/* ============================================================
   Design Tokens — based on DESIGN.md (Linear-inspired, light mode)
   DESIGN.md を更新したらこのファイルも合わせて更新すること
   ============================================================ */

:root {
  /* --- Brand (project colors) --- */
  --color-primary:    #2c5f8a;
  --color-primary-dk: #1e4266;
  --color-primary-lt: #3a7abd;
  --color-accent:     #e8a020;
  --color-accent-lt:  #f5c05a;
  --color-accent-dk:  #c47a10;

  /* --- Surfaces (Linear light-mode adaptation) --- */
  --surface-page:     #eaedf2;
  --surface-subtle:   #f3f4f5;
  --surface-card:     #ffffff;
  --surface-hover:    #f0f2f5;
  --surface-overlay:  rgba(0,0,0,0.85);

  /* --- Text hierarchy (Linear 4-tier) --- */
  --text-primary:   #1a1b1e;
  --text-secondary: #4a5568;
  --text-muted:     #718096;
  --text-faint:     #a0aec0;
  --text-inverse:   #f7f8f8;

  /* --- Borders (semi-transparent — Linear approach) --- */
  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.18);

  /* --- Border Radius (Linear scale) --- */
  --radius-micro: 2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-2xl:   16px;
  --radius-pill:  9999px;

  /* --- Elevation / Shadow (light-mode Linear elevation) --- */
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:    0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-hover: 0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-focus: 0 0 0 3px rgba(44,95,138,0.25);

  /* --- Spacing (8px base — Linear) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* --- Typography --- */
  --font-sans:     'Noto Sans JP', 'Inter Variable', 'Inter', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-heading:  'Quicksand', 'Inter Variable', 'Inter', sans-serif;
  --font-mono:     'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-features: "cv01", "ss03";

  /* Type scale */
  --fs-micro:   10px;
  --fs-label:   12px;
  --fs-caption: 13px;
  --fs-sm:      14px;
  --fs-body:    15px;
  --fs-body-lg: 16px;
  --fs-h3:      20px;
  --fs-h2:      24px;
  --fs-h1:      32px;
  --fs-display: 48px;

  /* Weight (Linear 3-tier: read / emphasize / announce) */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   510;
  --fw-semibold: 590;

  /* Letter spacing (Linear: compress at display sizes) */
  --ls-display: -1.056px;
  --ls-h1:      -0.704px;
  --ls-h2:      -0.288px;
  --ls-h3:      -0.24px;
  --ls-body:    -0.165px;
  --ls-normal:  normal;

  /* --- Layout --- */
  --max-width:     1100px;
  --content-width: 720px;
}