/* ========================================================================
   AI WORKS — Warm LP  |  styles.css (standalone build)
   Concatenation of the design-system tokens in the canonical order:
   fonts(@import) → colors → typography → spacing → borders → base.
   Values are copied verbatim from the _ds token files. Shared by
   index.html and privacy.html (relative link).
   ======================================================================== */

/* ---- FONTS — Plus Jakarta Sans (latin/numbers) + Noto Sans JP (Japanese).
   Loaded from Google Fonts. Inter / Roboto / system-ui are FORBIDDEN. ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Noto+Sans+JP:wght@400;500;700;800&display=swap');

/* ========================================================================
   COLORS — Warm cream base × deep navy headings × orange accents.
   All pairs documented for WCAG AA in the design-system readme.
   ======================================================================== */
:root {
  /* ---- Core palette ---- */
  --color-navy:        #1B2559; /* headings, logo text, darkest text */
  --color-navy-soft:   #2E3A6E; /* sub-headings, body emphasis */
  --color-orange:      #F26A1B; /* DECORATIVE accent: underlines, number badges, icons */
  --color-orange-deep: #D9530A; /* decorative accent (eyebrow label text, hero-demo glow/spinner) — do not pair with white text: ≈4.04:1, below AA */
  --color-orange-tint: #FFF4EC; /* warm soft band / badge bg */
  --color-cta-solid:      #C84A06; /* solid AA fill for white text — recommend pill / FAQ badge / hero-demo pill+logo (≈4.73:1) */
  --color-cta-solid-deep: #B84300; /* darker solid fill for white text — CTA hover / hero-demo logo gradient end (≈5.47:1) */
  --color-purple:      #7C5CFC; /* secondary accent: word highlights, sparkles */
  --color-purple-tint: #F1ECFF; /* secondary soft band / decoration */
  --color-cream:       #FCF8F3; /* PAGE BASE — warm off-white */
  --color-cream-2:     #F7F1E8; /* alternating band / card underlay */
  --color-white:       #FFFFFF; /* card face / white band */
  --color-blue-mist:   #F2F6FE; /* airy blue band */
  --color-ink:         #262324; /* body text (darkest) */
  --color-text-secondary: #4A4744; /* descriptions */
  --color-text-tertiary:  #6E6A66; /* footnotes, subsidy hedge, operator info */
  --color-border:        rgba(27, 37, 89, 0.10); /* card keyline / divider */
  --color-border-strong: rgba(242, 106, 27, 0.45); /* card hover / recommended border */

  /* ---- On-dark (navy surface) ---- */
  --color-on-dark:       #FFFFFF;
  --color-on-dark-sub:   #C7D0F0; /* navy-surface sub body. on navy 7:1+ */
  --color-on-dark-muted: #9AA6D8; /* navy-surface footnotes. on navy 4.6:1 */

  /* ---- Mac chrome signal dots (product mock frames) ---- */
  --color-dot-red:    #FF5F57;
  --color-dot-yellow: #FEBC2E;
  --color-dot-green:  #28C840;

  /* ---- Semantic roles ---- */
  --background:        var(--color-cream);
  --background-alt:    var(--color-cream-2);
  --background-soft:   var(--color-orange-tint);
  --background-mist:   var(--color-blue-mist);
  --background-card:   var(--color-white);
  --background-dark:   var(--color-navy);

  --heading:           var(--color-navy);
  --text-primary:      var(--color-ink);
  --text-secondary:    var(--color-text-secondary);
  --text-tertiary:     var(--color-text-tertiary);
  --text-on-dark:      var(--color-on-dark);
  --text-on-dark-sub:  var(--color-on-dark-sub);
  --text-on-dark-muted: var(--color-on-dark-muted);

  --accent:      var(--color-orange);
  --accent-cta:  var(--color-orange-deep);
  --accent-2:    var(--color-purple);
  --accent-soft: var(--color-orange-tint);

  /* CTA vertical gradient: bright at top, deep at bottom so white text keeps AA */
  --gradient-cta: linear-gradient(180deg, #C84A06 0%, #B84300 100%);
}

/* ========================================================================
   TYPOGRAPHY — Plus Jakarta Sans (latin/numbers) + Noto Sans JP (Japanese)
   Scale carries SP→PC fluid sizing via clamp(). Headings 700/800.
   ======================================================================== */
:root {
  /* ---- Families ---- */
  --font-ja-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-latin:   "Plus Jakarta Sans", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body:    "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-extra:   800;

  /* ---- Type scale (clamp = SP min … PC max) ---- */
  --text-display:  clamp(30px, 3.6vw, 52px);  /* Hero H1 */
  --text-h1:       clamp(25px, 3vw, 38px);    /* section heading */
  --text-h1-sub:   clamp(13px, 1.2vw, 15px);  /* heading subtitle */
  --text-h2:       clamp(19px, 2.1vw, 27px);  /* card heading */
  --text-h3:       clamp(16px, 1.4vw, 18px);  /* small heading */
  --text-num:      clamp(32px, 3.75vw, 48px); /* 01/02/03 numbers */
  --text-lead:     clamp(16px, 1.5vw, 19px);  /* hero / section lead */
  --text-body:     clamp(15px, 1.25vw, 16px); /* paragraph body */
  --text-caption:  clamp(13px, 1.1vw, 14px);  /* helper */
  --text-micro:    12px;                       /* legal footnote */
  --text-eyebrow:  clamp(11px, 0.95vw, 12px); /* pre-label / pill */

  /* ---- Line-heights ---- */
  --lh-display: 1.18;
  --lh-h1:      1.28;
  --lh-h2:      1.38;
  --lh-h3:      1.45;
  --lh-num:     1.0;
  --lh-lead:    1.74;
  --lh-body:    1.85;
  --lh-caption: 1.7;
  --lh-tight:   1.0;

  /* ---- Letter-spacing ---- */
  --ls-display: -0.02em;
  --ls-h1:      -0.015em;
  --ls-h2:      -0.01em;
  --ls-eyebrow: 0.1em;
  --ls-sub:     0.02em;
  --ls-normal:  0;
}

/* ========================================================================
   SPACING & LAYOUT — 4px base (8pt grid). Generous cadence.
   ======================================================================== */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* ---- Section vertical rhythm (clamp SP→PC) ---- */
  --section-y:        clamp(64px, 6vw, 112px);
  --section-y-tight:  clamp(56px, 5vw, 96px);
  --section-y-wide:   clamp(80px, 8vw, 144px);

  /* ---- Content max widths ---- */
  --layout-wide:   1140px; /* hero / results / footer */
  --layout-mid:    860px;  /* CTA / profile */
  --layout-narrow: 680px;  /* FAQ / reading */

  /* ---- Horizontal page padding ---- */
  --layout-px:    clamp(20px, 4vw, 32px);

  /* ---- Card gutters ---- */
  --gutter:    clamp(16px, 2vw, 32px);

  /* ---- Sticky CTA bar height ---- */
  --sticky-h:    clamp(60px, 1vw, 64px);
}

/* ========================================================================
   BORDERS, RADII, ELEVATION — navy-tinted soft shadows on warm ground;
   orange-tinted warm lift on hover; orange glow on CTAs.
   ======================================================================== */
:root {
  /* ---- Border widths ---- */
  --border-keyline: 1px;
  --border-rule:    2px;
  --border-accent:  4px;  /* quote-block left bar */

  /* ---- Heading underline (signature) ---- */
  --heading-underline-w: 56px;
  --heading-underline-h: 4px;

  /* ---- Radii ---- */
  --radius-sm:     4px;
  --radius-md:     10px;  /* input / small card */
  --radius-lg:     16px;  /* standard content card */
  --radius-xl:     20px;  /* large card / photo frame */
  --radius-2xl:    28px;  /* hero visual / showpiece */
  --radius-pill:   999px; /* pill / tab / CTA */
  --radius-circle: 50%;

  /* ---- Elevation ---- */
  --elevation-0: none;
  --elevation-1: 0 2px 8px rgba(27, 37, 89, 0.06), 0 0 0 1px rgba(27, 37, 89, 0.05);
  --elevation-hover: 0 12px 28px rgba(242, 106, 27, 0.12), 0 0 0 1px rgba(242, 106, 27, 0.22);
  --elevation-2: 0 6px 16px rgba(27, 37, 89, 0.12);
  --elevation-photo: 0 18px 48px -10px rgba(27, 37, 89, 0.22);
  --elevation-cta: 0 8px 22px rgba(217, 83, 10, 0.32);
  --elevation-cta-hover: 0 12px 30px rgba(217, 83, 10, 0.42);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ========================================================================
   BASE — element defaults that consumers inherit. Applies the body font,
   cream background, and ink text so any page starts on-brand.
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  color: var(--heading);
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

/* Latin numerals/letters render in Plus Jakarta Sans even inside JP runs */
.num, .latin { font-family: var(--font-latin); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}