/* =====================================================
   variables.css — あべこべ工房 デザイントークン完全版
   ===================================================== */

:root {
  /* =====================================================
     GLOBAL BACKGROUND
     body全体の背景色。この上にメインカードが浮かぶ。
     ===================================================== */
  --color-body-bg:       #EAEAEA;   /* 洗練されたミニマルなライトクールグレー */
  --color-body-bg-noise: url("../images/noise.svg");

  /* =====================================================
     MAIN CARD（コンテンツを包む大きな白カード）
     ===================================================== */
  --color-card-bg:       #FFFFFF;   /* すっきりとした白 */
  --color-card-border:   rgba(0,0,0,0.03);
  --color-card-shadow:   0 10px 40px rgba(40,35,30,0.03);
  --color-card-radius:   32px;      /* 大きめの角丸で親しみやすさと高級感を両立 */

  /* =====================================================
     SIDEBAR（縦型左ナビ）
     ===================================================== */
  --color-sidebar-bg:    #F9F8F6;   /* ライトサイドバーにしてシンプルに */
  --color-sidebar-text:  #2D2A26;   /* ダークトープのテキスト */
  --color-sidebar-muted: rgba(45,42,38,0.5);
  --color-sidebar-accent:#A38D7D;   /* 優しいトープベージュ */
  --color-sidebar-width: 280px; /* 260px から 280px に広げてお知らせやメニューをゆったり配置 */

  /* =====================================================
     ACCENT（アクセントカラー）
     ===================================================== */
  --color-accent:        #A38D7D;   /* 優しいトープベージュ */
  --color-accent-hover:  #8A7667;
  --color-accent-light:  #F4F0EC;
  --color-accent-text:   #5E4F44;

  --color-blue:          #8B9AA6;   /* 落ち着いたニュートラルブルー */
  --color-blue-light:    #EDF1F4;

  /* =====================================================
     TYPOGRAPHY COLORS
     ===================================================== */
  --color-text-main:     #2D2A26;   /* 柔らかいダークトープ */
  --color-text-sub:      #66615C;
  --color-text-muted:    #99948F;
  --color-text-on-dark:  #F9F8F6;

  /* =====================================================
     BORDERS & DIVIDERS
     ===================================================== */
  --color-border:        #EAE5E0;
  --color-border-light:  #F5F0EB;

  /* =====================================================
     SURFACE COLORS（セクション内の背景差分）
     ===================================================== */
  --color-surface-1:     #FFFFFF;
  --color-surface-2:     #FAF9F6;
  --color-surface-3:     #F2EFEA;

  /* =====================================================
     OVERLAY
     ===================================================== */
  --color-bg-overlay:    rgba(18,18,18,0.55);

  /* =====================================================
     SHADOWS
     ===================================================== */
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.12);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.20),
                  0 8px 24px rgba(0,0,0,0.10);

  /* =====================================================
     FONT FAMILIES
     ===================================================== */
  --font-display: 'DM Sans', sans-serif;
  --font-ja:      'Noto Sans JP', sans-serif;
  --font-mono:    'Courier New', monospace;

  /* =====================================================
     FONT SIZES
     ===================================================== */
  --fs-2xs:   0.625rem;   /* 10px */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   2rem;       /* 32px */
  --fs-3xl:   2.75rem;    /* 44px */
  --fs-hero:  clamp(2.5rem, 5vw, 4.5rem);
  --fs-kv:    clamp(4rem, 10vw, 9rem);

  /* =====================================================
     LINE HEIGHTS
     ===================================================== */
  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-base:   1.7;
  --lh-loose:  2.0;

  /* =====================================================
     LETTER SPACING
     ===================================================== */
  --ls-tighter: -0.04em;
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-wider:    0.12em;
  --ls-widest:   0.2em;

  /* =====================================================
     SPACING
     ===================================================== */
  --sp-1:   0.25rem;   /* 4px */
  --sp-2:   0.5rem;    /* 8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-section: clamp(4rem, 8vw, 7rem);

  /* =====================================================
     BORDER RADIUS
     ===================================================== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-full: 9999px;
  --radius-card: var(--color-card-radius);

  /* =====================================================
     LAYOUT
     ===================================================== */
  --sidebar-width:  220px;
  --container-max:  1360px; /* 1200px から 1360px に広げて要素をよりワイドに表示 */
  --content-max:    860px;  /* コンテンツ幅も合わせて拡張 */
  --container-pad:  clamp(1rem, 2.5vw, 2rem); /* 左右の内部余白を縮めて広く見せる */

  /* =====================================================
     Z-INDEX
     ===================================================== */
  --z-base:    1;
  --z-card:    10;
  --z-sidebar: 100;
  --z-header:  200;
  --z-drawer:  300;
  --z-overlay: 400;
  --z-modal:   500;
  --z-toast:   600;

  /* =====================================================
     TRANSITIONS
     ===================================================== */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   120ms;
  --t-base:   240ms;
  --t-slow:   400ms;
  --t-drawer: 380ms var(--ease-out-expo);
}