/* ==========================================================================
   variables.css — design tokens
   spec: design-tokens.md
   ========================================================================== */

:root {
  /* ---------------------------------
     Colors — Brand (Green)
     --------------------------------- */
  --c-green-primary: #80CE44;
  --c-green-light:   #8DD255;
  --c-green-dark:    #5FB02E;
  --c-green-pale:    #F2FFE9;
  --c-green-bg:      #F4FBEB;

  /* ---------------------------------
     Colors — Accent (Yellow)
     --------------------------------- */
  --c-yellow:           #F6E756;
  --c-yellow-accent:    #FFE600;
  --c-yellow-highlight: rgba(255, 230, 0, 0.6);

  /* ---------------------------------
     Colors — Neutral
     --------------------------------- */
  --c-cream:       #FEF9DB;
  --c-off-white:   #FFFDF3;
  --c-white:       #FFFFFF;
  --c-black:       #000000;
  --c-gray-bg:     #EFEFEF;
  --c-gray-border: #D9D9D9;
  --c-gray-text:   #888888;
  --c-text:        #222222;
  --c-text-strong: #000000;
  --c-black-band:  #000000;

  /* ---------------------------------
     Typography — Font family
     --------------------------------- */
  --ff-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             "Yu Gothic", Meiryo, sans-serif;
  --ff-number: "Barlow", sans-serif;
  /* ---------------------------------
     Typography — Font sizes (PC)
     Confirmed: --fs-display = 80px (PSD 80pt)
     --------------------------------- */
  --fs-display:      80px;
  --fs-h1:           56px;
  --fs-h2:           40px;
  --fs-h3:           28px;
  --fs-quote:        36px;
  --fs-pill:         18px;
  --fs-anchor-title: 24px;
  --fs-anchor-sub:   13px;
  --fs-kpi-number:   72px;
  --fs-kpi-unit:     28px;
  --fs-kpi-label:    16px;
  --fs-kpi-top:      20px;
  --fs-mega:         120px;
  --fs-body:         18px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;
  --fs-eyebrow:      14px;
  --fs-nav-tab:      14px;

  /* ---------------------------------
     Typography — Line height
     --------------------------------- */
  --lh-tight:  1.3;
  --lh-base:   1.5;
  --lh-relaxed: 1.7;
  --lh-loose:  1.8;

  /* ---------------------------------
     Spacing scale (8px base)
     --------------------------------- */
  --space-1:   1px;
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-14:  14px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;
  --space-120: 120px;

  /* ---------------------------------
     Layout
     --------------------------------- */
  --container-max: 1200px;
  --container-pad: 24px;
  --section-gap:   120px;
  --header-height: 70px;

  /* ---------------------------------
     Radius
     --------------------------------- */
  --radius-pill:   9999px;
  --radius-sm:     8px;
  --radius-card:   12px;
  --radius-lg:     24px;
  --radius-circle: 50%;

  /* ---------------------------------
     Shadow / border
     --------------------------------- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.08);
  --border-thin: 1px solid var(--c-gray-border);
  --border-kpi:  4px solid var(--c-green-primary);

  /* ---------------------------------
     Transition
     --------------------------------- */
  --t-fast:  150ms ease-out;
  --t-base:  250ms ease-out;
  --t-slow:  500ms ease-out;
}

/* ==========================================================================
   SP overrides (≤767px)
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    /* Display & H1: 55% of PC */
    --fs-display:      40px;  /* 80 × 0.55 */
    --fs-h1:           32px;  /* 56 × 0.55 (round) */

    /* Mega: 60% */
    --fs-mega:         72px;  /* 120 × 0.6 */

    /* KPI number: 65% */
    --fs-kpi-number:   48px;  /* 72 × 0.65 (round) */

    /* Others: ~0.85–0.9 */
    --fs-h2:           28px;
    --fs-h3:           22px;
    --fs-quote:        24px;
    --fs-pill:         16px;
    --fs-anchor-title: 18px;
    --fs-kpi-unit:     20px;

    /* Layout */
    --container-pad:   20px;
    --section-gap:     64px;
  }
}