/**
 * Shimomiya Theme - Design Variables
 * Figmaデザインベース + クラフト感デザイン強化版
 *
 * @package Shimomiya
 */

:root {
    /* ==========================================================================
       Colors - ビタミンカラー強化パレット
       メインビジュアルの地図イラストから抽出した
       「屋根の赤」「木の緑」「地面の茶色」をキーカラーとして適用
       ========================================================================== */

    /* Primary Colors */
    --color-cream: #FFF8E7;
    --color-yellow: #FFE566;
    --color-yellow-light: #FFFAE0;
    --color-yellow-text: #E8B400;
    --color-pink: #E8526E;

    /* Illustration Accent Colors（イラストから抽出） */
    --color-accent-red: #D35B47;
    --color-accent-green: #5DA044;
    --color-accent-orange: #F2A73B;
    --color-accent-blue: #65B8D6;

    /* Brown Palette - 視認性強化 */
    --color-brown-dark: #2D1B0E;
    --color-brown-medium: #4F3B17;
    --color-brown-footer: #231810;
    --color-brown-border: #374151;

    /* Text Colors - 高コントラスト（濃い焦げ茶色） */
    --color-gray-text: #2D1B0E;
    --color-text: #2D1B0E;
    --color-white: #ffffff;

    /* Background Colors */
    --color-bg-light: #F5EFE6;
    --color-button-bg: #EDDED4;

    /* Service Card Image BG */
    --color-service-image-bg: rgba(211, 91, 71, 0.18);

    /* ==========================================================================
       Typography
       ========================================================================== */

    /* Font Families */
    --font-zen: 'Zen Maru Gothic', sans-serif;
    --font-noto: 'Noto Sans JP', sans-serif;
    --font-comfortaa: 'Comfortaa', cursive;

    /* Font Sizes - 高齢者向けアクセシビリティ強化 */
    --font-size-xs: 18px;
    --font-size-sm: 22px;
    --font-size-base: 22px;
    --font-size-md: 22px;
    --font-size-lg: 24px;
    --font-size-xl: 24px;
    --font-size-2xl: 30px;
    --font-size-3xl: 32px;
    --font-size-4xl: 34px;
    --font-size-5xl: 35.6px;
    --font-size-6xl: 38px;
    --font-size-7xl: 48px;

    /* Font Weights - 全体的にウェイトアップ */
    --font-weight-light: 400;
    --font-weight-normal: 500;
    --font-weight-medium: 500;
    --font-weight-semibold: 700;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 2.0;
    --line-height-loose: 2;

    /* ==========================================================================
       Spacing
       ========================================================================== */

    --container-max-width: 1140px;
    --container-padding: 20px;

    --section-padding-sm: 47px;
    --section-padding-md: 71px;
    --section-padding-lg: 80px;
    --section-padding-xl: 109px;

    --card-padding-sm: 35px 49px;
    --card-padding-md: 44px;
    --card-padding-lg: 48px;

    --gap-sm: 20px;
    --gap-md: 28px;
    --gap-lg: 40px;
    --gap-xl: 67px;

    /* ==========================================================================
       Border Radius
       ========================================================================== */

    --radius-sm: 12px;
    --radius-md: 30px;
    --radius-lg: 640px;
    --radius-full: 9999px;

    /* ==========================================================================
       Shadows - 存在感強化
       ========================================================================== */

    --shadow-header: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.10);
    --shadow-photo: 3px 5px 15px rgba(0, 0, 0, 0.12);

    /* ==========================================================================
       Stitch（ステッチ風装飾）- クラフト感
       ========================================================================== */

    --stitch-width: 2.5px;
    --stitch-offset: 5px;
    --stitch-color-light: rgba(255, 255, 255, 0.55);
    --stitch-color-dark: rgba(45, 27, 14, 0.20);

    /* ==========================================================================
       Transitions
       ========================================================================== */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ==========================================================================
       Z-Index
       ========================================================================== */

    --z-header: 1000;
    --z-modal: 9999;

    /* ==========================================================================
       Component Sizes
       ========================================================================== */

    /* Header */
    --header-height: 92px;

    /* Hero */
    --hero-frame-height: 644px;
    --hero-border-width: 5px;

    /* Thumbnail */
    --thumbnail-size: 190px;
    --thumbnail-gap: 28px;

    /* Service Card */
    --service-card-width: 550px;
    --service-card-height: 750px;
    --service-card-image-width: 444px;
    --service-card-image-height: 249px;

    /* About/Contact Image */
    --about-image-width: 503px;
    --about-image-height: 405px;

    /* Button */
    --button-height: 58px;
    --button-min-width: 290px;
    --header-button-min-width: 117px;
}