/* ============================================================
   DESIGN TOKENS — Figma Variables 互換
   ・色 / スペーシング / タイポ / 角丸 / シャドウ / モーション
   ・スペーシングは 8pxグリッドに完全準拠
   ============================================================ */

:root {
  /* ─── Color: Surface ───────────────────────────── */
  --color-surface-primary:    #FFFFFF;
  --color-surface-secondary:  #F4F4F4;
  --color-surface-tertiary:   #F9F9F9;
  --color-surface-inverse:    #111111;
  --color-surface-inverse-2:  #0F0F0F;
  --color-surface-muted:      #EBEBEB;

  /* ─── Color: Text ──────────────────────────────── */
  --color-text-primary:       #111111;
  --color-text-secondary:     #555555;
  --color-text-muted:         #999999;
  --color-text-on-inverse:    #FFFFFF;
  --color-text-on-inverse-2:  #AAAAAA;

  /* ─── Color: Border ────────────────────────────── */
  --color-border-subtle:      rgba(0, 0, 0, 0.08);
  --color-border-default:     rgba(0, 0, 0, 0.10);
  --color-border-strong:      #CCCCCC;
  --color-border-input:       #BBBBBB;
  --color-border-card:        #E5E5E5;
  --color-border-divider:     #DDDDDD;

  /* ─── Color: Brand & Accent ────────────────────── */
  --color-brand-primary:      #111111;
  --color-brand-primary-hover:#333333;
  --color-success:            #22C55E;

  /* ─── Spacing — 8px grid ───────────────────────── */
  --space-0:    0;
  --space-1:    8px;
  --space-2:    16px;
  --space-3:    24px;
  --space-4:    32px;
  --space-5:    40px;
  --space-6:    48px;
  --space-7:    56px;
  --space-8:    64px;
  --space-9:    72px;
  --space-10:   80px;
  --space-12:   96px;
  --space-14:   112px;
  --space-15:   120px;

  /* ─── Layout ───────────────────────────────────── */
  --container-max:        1200px;
  --container-pad-x:      var(--space-15);
  --section-pad-y:        var(--space-12);
  --section-pad:          var(--section-pad-y) var(--container-pad-x);
  --nav-height:           72px;

  /* ─── Border Radius ────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-pill: 9999px;

  /* ─── Typography: Family ──────────────────────── */
  --font-display:  'Noto Sans JP', sans-serif;
  --font-body:     'Noto Sans JP', sans-serif;
  --font-mono:     'SF Mono', 'Menlo', monospace;

  /* ─── Typography: Size ────────────────────────── */
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   20px;
  --text-3xl:   24px;
  --text-4xl:   32px;
  --text-5xl:   40px;
  --text-6xl:   44px;
  --text-7xl:   52px;
  --text-8xl:   56px;

  /* Display = clamp で responsive */
  --text-display-sm: clamp(28px, 3.2vw, 48px);
  --text-display-md: clamp(40px, 5.5vw, 76px);
  --text-display-lg: clamp(64px, 9vw, 120px);

  /* ─── Typography: Weight ──────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ─── Typography: Line height ─────────────────── */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.6;
  --leading-relaxed:  1.8;
  --leading-loose:    1.9;

  /* ─── Shadow ──────────────────────────────────── */
  --shadow-xs:  0 2px 8px  rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.05);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 12px 36px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 8px 48px rgba(0, 0, 0, 0.12);

  /* ─── Motion ──────────────────────────────────── */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast:   200ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;

  /* ─── Z-index ─────────────────────────────────── */
  --z-base:    1;
  --z-content: 2;
  --z-overlay: 50;
  --z-nav:     100;
  --z-cursor:  9999;
}

/* ─── Responsive token overrides ──────────────────── */
@media (max-width: 1100px) {
  :root {
    --container-pad-x: var(--space-6);
    --section-pad-y:   var(--space-12);
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad-x: var(--space-2);
    --section-pad-y:   var(--space-9);
  }
}