/* =========================================================================
   Design Tokens
   - Single source of truth for color / typography / spacing / radius / shadow
   - Reference: CLAUDE.md Section 2A
   - All values are intentionally low-saturation; accent red is used sparingly
     as a focal signal only.
   ========================================================================= */

:root {
  /* ---- Color ------------------------------------------------------------ */
  --color-bg:           #FFFFFF;
  --color-bg-alt:       #F7F8FA;
  --color-bg-dark:      #0F1115;
  --color-text:         #1A1D24;
  --color-text-muted:   #5B6373;
  --color-text-on-dark: #F2F4F8;
  --color-border:       #E5E7EB;
  --color-border-strong:#C9CCD3;

  /* Accent (brand red) — CTA / active state / focal point ONLY
     ロゴ SVG の "o" シンボル色（#D84B5A）と一致させブランド統一を担保 */
  --color-accent:        #D84B5A;
  --color-accent-hover:  #B03B48;
  --color-accent-soft:   #FBE9EB;
  --color-accent-on-dark:#F07380;

  /* Link */
  --color-link:        var(--color-text);
  --color-link-hover:  var(--color-accent);

  /* Semantic feedback */
  --color-success: #2E7D32;
  --color-warning: #ED6C02;
  --color-danger:  #C62828;
  --color-info:    #1565C0;

  /* ---- Typography ------------------------------------------------------- */
  --font-ja:
    "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans",
    "Yu Gothic", "Meiryo", sans-serif;
  --font-en:
    "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
    sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas,
    monospace;

  --fs-body:    1rem;      /* 16px PC / 15px SP */
  --fs-small:   0.8125rem; /* 13px */
  --fs-caption: 0.75rem;   /* 12px */
  --fs-h1:      3rem;      /* 48px PC / 32px SP */
  --fs-h2:      2rem;      /* 32px PC / 24px SP */
  --fs-h3:      1.375rem;  /* 22px PC / 18px SP */
  --fs-hero:    3.5rem;    /* 56px PC / 36px SP */
  --fs-stat:    3rem;

  --lh-body:    1.75;
  --lh-heading: 1.3;
  --lh-tight:   1.15;

  --ls-heading: -0.01em;
  --ls-button:   0.04em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ---- Spacing scale (8pt) --------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad-pc: 32px;
  --container-pad-sp: 20px;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ---- Shadow (subtle, single tier) ------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.08);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-header:   100;
  --z-overlay:  900;
  --z-modal:   1000;
  --z-toast:   1100;
}

/* SP では本文 / 見出しを少し詰める */
@media (max-width: 767px) {
  :root {
    --fs-body:  0.9375rem; /* 15px */
    --fs-h1:    2rem;
    --fs-h2:    1.5rem;
    --fs-h3:    1.125rem;
    --fs-hero:  2.25rem;
    --fs-stat:  2.25rem;
    --container-pad-pc: var(--container-pad-sp);
  }
}

/* ユーザーの「動きを減らす」設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}