/* ==========================================================================
   tokens.css — Design Tokens (single source of truth)
   Mirrors DESIGN_SPEC.md §2 exactly. Do not hard-code values elsewhere.
   ========================================================================== */

:root {
  /* ---------- Brand color ---------- */
  --color-brand-red: #FF2233;
  --color-brand-red-hover: #E51E2D;
  --color-brand-red-active: #C81A27;
  --color-brand-red-soft: #FFE8EA;

  /* ---------- Accent ---------- */
  --color-accent-yellow: #FFD400;
  --color-accent-yellow-soft: #FFF6C2;

  /* ---------- Text ---------- */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4D4D4D;
  --color-text-tertiary: #808080;
  --color-text-disabled: #B3B3B3;
  --color-text-on-red: #FFFFFF;
  --color-text-on-dark: #FFFFFF;

  /* ---------- Background ---------- */
  --color-bg-default: #FFFFFF;
  --color-bg-subtle: #F7F7F7;
  --color-bg-card: #FAFAFA;
  --color-bg-muted: #EFEFEF;
  --color-bg-dark: #1A1A1A;
  --color-bg-dark-subtle: #262626;

  /* ---------- Border / Divider ---------- */
  --color-border: #EAEAEA;
  --color-border-strong: #D4D4D4;
  --color-divider: #F0F0F0;

  /* ---------- Overlay ---------- */
  --color-overlay-50: rgba(0, 0, 0, 0.5);
  --color-overlay-30: rgba(0, 0, 0, 0.3);
  --color-overlay-hero: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);

  /* ---------- Status ---------- */
  --color-success: #00A368;
  --color-warning: #F5A623;
  --color-error: #E03131;

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-sans-jp:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  --font-sans-en:
    "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;

  --font-base:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Helvetica Neue",
    "Arial",
    sans-serif;

  --font-display:
    "Helvetica Neue",
    "Arial Black",
    "Noto Sans JP",
    sans-serif;

  /* Type scale (fluid) */
  --text-display:  clamp(40px, 6vw, 72px);
  --text-h1:       clamp(32px, 4vw, 48px);
  --text-h2:       clamp(26px, 3vw, 36px);
  --text-h3:       clamp(20px, 2vw, 24px);
  --text-h4:       clamp(16px, 1.5vw, 18px);
  --text-body-lg:  18px;
  --text-body:     16px;
  --text-body-sm:  14px;
  --text-caption:  12px;
  --text-button:   15px;
  --text-nav:      15px;

  /* ==========================================================================
     Spacing (4pt grid)
     ========================================================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;
  --space-14: 160px;
  --space-15: 200px;
  --space-16: 240px;

  --section-py-desktop: var(--space-12); /* 96px */
  --section-py-mobile:  var(--space-10); /* 64px */

  /* Content widths */
  --content-max:    1280px;
  --content-narrow: 960px;
  --content-wide:   1440px;
  --gutter-desktop: 32px;
  --gutter-mobile:  20px;

  /* ==========================================================================
     Radius
     ========================================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ==========================================================================
     Shadow
     ========================================================================== */
  --shadow-none: none;
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-hover:
    0 10px 30px rgba(0, 0, 0, 0.10),
    0 20px 50px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(255, 34, 51, 0.25);

  /* ==========================================================================
     Breakpoints (values; use in media queries directly)
     ========================================================================== */
  --bp-mobile:  767px;
  --bp-tablet:  1023px;
  --bp-laptop:  1199px;
  --bp-desktop: 1200px;

  /* ==========================================================================
     Motion
     ========================================================================== */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-scroll: 600ms;

  /* ==========================================================================
     Layout aliases
     ========================================================================== */
  --header-h-desktop: 72px;
  --header-h-tablet:  64px;
  --header-h-mobile:  56px;
  --header-z: 100;
  --drawer-z: 200;
}

/* Mobile type-scale overrides */
@media (max-width: 767px) {
  :root {
    --text-body-lg: 16px;
    --text-body:    15px;
    --text-body-sm: 13px;
  }
}