/*!
 * Pay Compass (소침반) — Design Tokens
 * OWNER: pc-foundation (P0). FROZEN after P0 — every other worker REFERENCES these
 * tokens only; do not redefine or fork values elsewhere. Cross-boundary need → route
 * through squad-leader.
 *
 * Source of truth: docs/dev/squad-runs/pay-compass-planning/pay-compass-landing-plan.md
 *   §5-1 Layer 1 Primitive, §5-2 Layer 2 Semantic, §5-3 Layer 3 Component, §6-1 Motion.
 *
 * HARD RULE: blue tokens only. Trust = blue, risk = red. GREEN / PURPLE / TEAL banned
 * anywhere in this system — hard fail. Components/logic must reference Layer 2/3 tokens
 * only; never reach into Layer 1 primitives directly (§5-2 header rule in the plan).
 *
 * EXCEPTION (2026-07): raster illustration ASSETS under assets/illustrations/ are exempt
 * from the blue-only rule — the Toss-magazine-style 3D illustrations use per-topic pastel
 * multicolor (peach/mint/neutral) by product decision. This exemption is scoped to image
 * assets only; all UI TOKENS + component color here remain blue-only (risk = red). Do not
 * add green/purple/teal to the token layers below.
 */

:root{
  /* ════════════════════════════════════════════════════════════════
   * LAYER 1 — PRIMITIVE (raw scale, no semantic meaning)
   * Do NOT reference these outside this file except via Layer 2/3 aliases.
   * ════════════════════════════════════════════════════════════════ */

  /* Navy scale — deep-navy chapters / inverse surfaces */
  --navy-900:#0e1124;
  --navy-800:#141a33;
  --navy-700:#1b2447;
  --navy-600:#1c2750;
  --navy-500:#26356a;
  --navy-400:#33437e;

  /* Blue scale — brand accent family */
  --blue-700:#1c39c2;
  --blue-600:#2b4ee6;
  --blue-500:#4a6bf5;
  --blue-400:#6d8bff;
  --blue-300:#7d9bff;
  --blue-200:#9fb0ee;
  --blue-150:#c3cef2;
  --blue-100:#dfe5fb;
  --blue-050:#eef1ff;

  /* Neutral scale — light-surface text/lines */
  --ink-900:#15181f;
  --ink-700:#3d4350;
  --ink-500:#626879;   /* a11y-safe muted (≈4.8:1 on white) — see §5-4 */
  --ink-400:#969ca8;   /* ≈2.8:1 on white — decorative/large-text ONLY, never small body */
  --line-200:#ebedf1;
  --line-100:#f1f2f6;
  --paper-100:#f7f8fb;
  --paper-050:#f4f5f7;
  --white:#ffffff;
  --cool-white:#f4f7fd;   /* daybreak / light-chapter reading surface (LOCK arrival) */

  /* Semantic hues — risk is the ONLY non-blue signal color in this system */
  --red-500:#e2495b;
  --red-600:#b8253a;   /* solid-red fill on white ≈5.2:1 — clears AA (G-5) */
  --red-050:#fdecef;

  /* ════════════════════════════════════════════════════════════════
   * LAYER 2 — SEMANTIC (role tokens; components/logic reference this layer)
   * ════════════════════════════════════════════════════════════════ */

  /* Surface */
  --surface-base:      var(--paper-050);
  --surface-raised:    var(--white);
  --surface-sunken:    var(--paper-100);
  --surface-inverse:   var(--navy-900);
  --surface-inverse-2: var(--navy-500);

  /* Text */
  --text-primary:      var(--ink-900);
  --text-secondary:    var(--ink-700);
  --text-muted:        var(--ink-500);   /* default for small/secondary copy (a11y-safe) */
  --text-faint:        var(--ink-400);   /* ≥14px, decorative/non-essential labels only */
  --text-on-inverse:   var(--white);
  --text-on-inverse-2: var(--blue-150);

  /* Brand / trust */
  --brand:             var(--blue-600);
  --brand-strong:      var(--blue-700);  /* pressed/hover */
  --brand-soft:        var(--blue-050);  /* brand background tint */
  --brand-on-inverse:  var(--blue-300);
  --sky:               var(--blue-400);  /* SKY depth-layer accent (post-discovery light) */
  --surface-daylight:  var(--cool-white);/* LOCK-arrival light chapter surface */

  /* Data / status signal */
  --data-live:         var(--blue-600);  /* 현재 기준 표기 accent — NOT a live/pulse indicator (governance #16: renamed from "AI 갱신"/live-dot wording, value unchanged, no fake real-time) */
  --data-anchor:       var(--blue-600);  /* calculator #1 anchor value */
  --data-refresh:      var(--brand-soft);/* re-rank tone — reassurance tint on list re-sort, NOT amber/red (governance #16: renamed from "FLIP re-rank flash", value unchanged) */
  --risk:              var(--red-500);   /* "fraud signal" education — advisory, not alarm */
  --risk-soft:         var(--red-050);
  --risk-strong:       var(--red-600);   /* solid red button/text fill — AA on white (G-5). Tints/bands stay --risk. */

  /* Border / division */
  --border-subtle:     var(--line-100);
  --border-default:    var(--line-200);
  --border-brand:      var(--brand);

  /* Motion material — Trust Refinery Spine (M1) particle state colors */
  --spine-particle-live:  var(--blue-400); /* surviving/verified data point */
  --spine-particle-out:   var(--ink-400);  /* filtered-out point — grey fade, NOT red (non-alarming) */
  --spine-particle-flag:  var(--red-500);  /* flagged fraud-history point — brief repel moment only */

  /* ════════════════════════════════════════════════════════════════
   * LAYER 3 — COMPONENT (component-scoped tokens)
   * ════════════════════════════════════════════════════════════════ */

  /* Inverse chapter backgrounds */
  --banner-grad: linear-gradient(155deg, var(--navy-900) 0%, var(--navy-600) 62%, var(--navy-500) 100%);
  --calc-grad:   linear-gradient(160deg, var(--navy-700), var(--navy-500));

  /* Ranking table */
  --rank1-bg:    linear-gradient(90deg, #e9eeff, #fbfcff 60%);
  --rank1-ring:  inset 0 0 0 2px var(--brand);
  --feebar-track:#e9edf3;
  --feebar-fill: linear-gradient(90deg, var(--blue-600), var(--blue-400));
  --rank-pct:    var(--brand);

  /* Calculator result (anchoring, M3) */
  --calc-anchor-amt: var(--data-anchor);
  --calc-delta:      var(--text-muted);  /* delta stays grey/muted — never red (no fear framing) */

  /* CTA / FAB */
  --cta-bg:      var(--ink-900);         /* primary CTA = ink; brand-blue reserved for rank/data */
  --fab-bg:      var(--brand);
  --fab-shadow:  0 8px 24px rgba(43,78,230,.40);

  /* Shadow */
  --sh-s:0 1px 2px rgba(20,24,33,.04);
  --sh:  0 6px 22px rgba(20,24,33,.06);
  --sh-l:0 16px 42px rgba(24,30,64,.18);
  --sh-brand:0 4px 11px rgba(43,78,230,.24);
  /* Illustration elevation — ONE ultra-diffuse drop-shadow language for all Toss
   * cutout PNGs (A-2a). --ondark for cutouts sitting on navy surfaces. */
  --sh-illust:        drop-shadow(0 6px 14px rgba(20,24,33,.10));
  --sh-illust-ondark: drop-shadow(0 8px 18px rgba(0,0,0,.28));

  /* Radius */
  --r:22px;
  --rs:14px;

  /* Container */
  --maxw:480px;

  /* ════════════════════════════════════════════════════════════════
   * MOTION FOUNDATION (§6-1) — easing/duration/scroll tokens.
   * Exponential ease-out family only. bounce/elastic banned (function over spectacle).
   * ════════════════════════════════════════════════════════════════ */

  /* Easing */
  --e-out-quart: cubic-bezier(.25, 1, .5, 1);    /* default UI transitions */
  --e-out-quint: cubic-bezier(.22, 1, .36, 1);   /* FLIP / list re-sort */
  --e-out-expo:  cubic-bezier(.16, 1, .3, 1);    /* sheet/reader entrance */
  --e-inout:     cubic-bezier(.65, 0, .35, 1);   /* background chapter scrub interpolation */

  /* Duration */
  --d-instant: 120ms;  /* press feedback */
  --d-fast:    180ms;  /* hover / chevron */
  --d-base:    260ms;  /* tab / chip transition */
  --d-slow:    420ms;  /* bar fill / sheet */
  --d-reveal:  640ms;  /* section mask reveal */
  --d-story:   900ms;  /* FLIP flash / narrative beat */

  /* Scroll (GSAP/Lenis — read by js/app.js as the single source of truth) */
  --scrub:      0.6;   /* ScrollTrigger scrub inertia coefficient (seconds) */
  --lenis-lerp: 0.10;  /* Lenis interpolation (0.08–0.12 range) */

  /* ════════════════════════════════════════════════════════════════
   * TYPE SCALE LAYER (redesign · appendix 02 §1–§2)
   * NEW in the tabs-wizard redesign. Sits alongside the color layers as a
   * first-class token layer (there was no font-size token layer before).
   *
   * ⚠️ DELIBERATE OVERRIDE of the conservative type-skill ceiling (hero ≤ 96px,
   *    tracking ≥ −0.04em). Per appendix 02 §1 the site's CONTENT IS NUMBERS
   *    (payout %, rank, delta, minutes) and their instant legibility is the trust
   *    UX — so numeric heroes are pushed to 160px and tracking to −0.05em ON
   *    PURPOSE. `--fs-data-mega` supersedes the old `--type-data-peak` (56→96px)
   *    which no longer exists. Big ≠ loud: only HONEST numbers get large — hype
   *    copy never does (anti-dark-pattern §6 preserved).
   * ════════════════════════════════════════════════════════════════ */

  /* ── DATA-PEAK — numbers-as-heroes (top tier, above sentences) ── */
  --fs-data-mega:  clamp(4.5rem, 2.6rem + 8.3vw, 10rem);   /* 72 → 160  LOCK 87% (page max) */
  --fs-data-hero:  clamp(3rem, 1.6rem + 6vw, 7rem);        /* 48 → 112  wizard result·집계·계산기 */
  --fs-data-title: clamp(1.75rem, 1.49rem + 1.1vw, 2.5rem);/* 28 → 40   table %·stage count·step no. */

  /* ── DISPLAY — designed Hangul declarations ── */
  --fs-display-1:  clamp(2.25rem, 1.1rem + 4.9vw, 5.5rem); /* 36 → 88   hero sentence·tab 대선언 */
  --fs-display-2:  clamp(1.875rem, 1.3rem + 2.45vw, 3.5rem);/* 30 → 56  section/stage headline */

  /* ── Standard 7 tiers ── */
  --fs-headline:   clamp(1.5rem, 1.32rem + 0.75vw, 2rem);       /* 24 → 32 */
  --fs-title:      clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);  /* 18 → 22 */
  --fs-body-lg:    clamp(1.0625rem, 1.035rem + 0.12vw, 1.125rem);/* 17 → 18 */
  --fs-body:       clamp(0.9375rem, 0.915rem + 0.1vw, 1rem);    /* 15 → 16 */
  --fs-body-sm:    0.875rem;                                    /* 14 */
  --fs-label:      clamp(0.875rem, 0.86rem + 0.06vw, 0.9375rem);/* 14 → 15 */
  --fs-label-sm:   0.8125rem;                                   /* 13 */
  --fs-caption:    clamp(0.75rem, 0.74rem + 0.05vw, 0.8125rem); /* 12 → 13 */
  --fs-overline:   clamp(0.6875rem, 0.68rem + 0.05vw, 0.75rem); /* 11 → 12 */

  /* ── Weights (Pretendard) — 900/Black intentionally unused (smears in reverse) ── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── Optical tracking curve — big=tighten (Latin/numbers −0.05em),
   *    small=loosen (overline +0.08em). Hangul capped at −0.03em (자모 collision). ── */
  --tr-mega:       -0.05em;   /* Latin/number only */
  --tr-hero:       -0.04em;
  --tr-data-title: -0.03em;
  --tr-display-1:  -0.03em;   /* Hangul cap */
  --tr-display-2:  -0.025em;
  --tr-headline:   -0.02em;
  --tr-title:      -0.01em;
  --tr-body:        0em;
  --tr-label:       0em;
  --tr-caption:     0.02em;
  --tr-overline:    0.08em;
  --tr-hangul-max: -0.03em;   /* hard floor for any Hangul display run */

  /* ── Line-heights (snap to the 4px grid at their target px) ── */
  --lh-mega:       0.90;
  --lh-hero:       0.92;
  --lh-data-title: 1.0;
  --lh-display-1:  1.05;
  --lh-display-2:  1.10;
  --lh-headline:   1.2;
  --lh-title:      1.35;
  --lh-body:       1.6;
  --lh-body-lg:    1.6;

  /* ════════════════════════════════════════════════════════════════
   * SPACE SCALE — 8px grid (base unit 4px, primary rhythm 8px)
   * ════════════════════════════════════════════════════════════════ */
  --space-0:   0;
  --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;

  /* Shell chrome geometry (referenced by shell.css + app.js) */
  --topbar-h:  56px;
  --ctabar-h:  64px;
  --shell-pad: 20px;   /* container min side padding — big-type never clips (02 §2-5) */
  --z-topbar:  100;
  --z-ctabar:  90;
  --z-fab:     110;
  --z-overlay: 200;
  --z-toast:   300;
}

/*
 * prefers-reduced-motion global kill-switch (§8-1).
 * This is a SAFETY NET independent of JS tier detection — it must work even before
 * js/main.js runs. Per-interaction reduced-motion fallbacks (static spine panel, no
 * count-up, no autoplay, etc.) are each owning module's responsibility per §6-4/§8-1.
 */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}