/* GENERATED FROM _src/tokens/ — do not edit by hand (TZ-16). */
@layer tokens, components, utilities, overrides;
@layer tokens{
/* TZ-16 tokens · colors — paper/ink palette, legacy slate/brand/indigo
   remap, semantic status colors, fg/bg/border/action aliases. */
:root {
  /* ── Paper / ink palette (canonical Direction A) ─────────────────── */
  --paper:    #f5f4f0;   /* soft off-white — page bg */
  /* Contrast pass 2026-06-10, step 3: surface tiers deepened so hover /
     thead / active states separate from the page bg (paper-2 vs paper
     1.11 -> 1.18:1, paper-3 1.21 -> 1.35:1 — the old values were nearly
     indistinguishable, reading as one flat light plane). Text contrast
     on the deeper tiers stays compliant: ink-3 on paper-3 = 8.9:1 (AAA),
     ink-4 = 4.03:1 (> 3:1 non-text, WCAG 2.2 SC 1.4.11). */
  --paper-2:  #e5e2d8;   /* surfaces, hover */
  --paper-3:  #d8d4c7;   /* deeper — thead, active */
  --ink:      #0a0908;   /* near-black */
  --ink-2:    #2a2925;   /* secondary text */
  /* Contrast pass 2026-06-10 (doc-grounded): ink-3 darkened #4a4640 →
     #3a3732 (8.5→10.8:1 on paper; APCA Lc 85→90.6 — reaches the Lc 90
     floor for 12px/400 per https://git.apcacontrast.com/documentation/
     APCA_in_a_Nutshell.html — half the UI is 11-12px mono caps in this
     tier). ink-4 darkened #8a8478 → #6f6a60 (3.38→4.88:1 — placeholders
     now pass WCAG 2.2 SC 1.4.3 AA as text, hairlines exceed the 3:1
     non-text minimum of SC 1.4.11 on every paper tier). */
  --ink-3:    #3a3732;   /* muted text */
  --ink-4:    #6f6a60;   /* placeholder / hairline */
  /* ТЗ-23 B-05: split accent into UI variant (low text-contrast req) and
     BTN variant (passes WCAG AA on paper text). Legacy --accent stays
     aliased to --accent-ui to avoid touching ~80 call sites at once. */
  --accent-ui:  #d97706;   /* amber-600 — nav active, focus ring, seg-btn */
  --accent-btn: #b45309;   /* amber-700 — button surface (ink text 5.1:1 AA) */
  --accent:     var(--accent-ui);

  /* ── Legacy slate → paper/ink remap ─────────────────────────────── */
  --color-slate-50:  var(--paper-2);
  --color-slate-100: var(--paper-3);
  --color-slate-200: var(--ink-4);
  --color-slate-300: var(--ink-4);
  --color-slate-400: var(--ink-3);
  --color-slate-500: var(--ink-3);
  --color-slate-600: var(--ink-2);
  --color-slate-700: var(--ink-2);
  --color-slate-800: var(--ink);
  --color-slate-900: var(--ink);
  --color-slate-950: var(--ink);

  /* Brand → ink + accent */
  --color-brand-50:  var(--paper-2);
  --color-brand-100: var(--paper-3);
  --color-brand-200: var(--ink-4);
  --color-brand-300: var(--ink-3);
  --color-brand-400: var(--ink-3);
  --color-brand-500: var(--ink-2);
  --color-brand-600: var(--ink);
  --color-brand-700: var(--ink);
  --color-brand-800: var(--ink);
  --color-brand-900: var(--ink);
  --color-brand-950: var(--ink);
  --color-logo: var(--ink);

  /* Indigo → ink */
  --color-indigo-50:  var(--paper-2);
  --color-indigo-600: var(--ink);
  --color-indigo-700: var(--ink-2);

  /* ── Status colours — semantic, NOT remapped ────────────────────── */
  --color-red-50:  #fcd5d8;
  --color-red-100: #fbcfd3;
  --color-red-200: #f7b8be;
  --color-red-300: #f49aa3;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #5a0820;   /* pill text on red-50 */

  --color-green-50:  #d3f4d0;
  --color-green-100: #cdf2c9;
  --color-green-200: #b5e7af;
  --color-green-300: #8ad985;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #0f3d11; /* pill text on green-50 */

  --color-amber-50:  #fde9b8;
  --color-amber-100: #fbe1a3;
  --color-amber-200: #f9d57f;
  --color-amber-300: #f4c14c;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #854d0e;
  --color-amber-900: #5a3a00;

  --color-blue-50:  #d4e5fa;
  --color-blue-100: #c7dcf7;
  --color-blue-200: #a5c8f0;
  --color-blue-300: #79addd;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #0c2a52;

  /* Yellow → accent family (used by pw-banner) */
  --color-yellow-100: #fef3c7;
  --color-yellow-400: var(--accent);
  --color-yellow-900: #5a3a00;

  /* Orange / sky / grey leftovers */
  --color-orange-50:  #fff7ed;
  --color-orange-300: #fdba74;
  --color-orange-800: #9a3412;
  --color-sky-500:    #0ea5e9;
  --color-gray-200:   var(--paper-3);
  --color-gray-700:   var(--ink-2);

  --color-ink: var(--ink);
  --color-disabled: var(--ink-4);

  /* ── Semantic aliases ───────────────────────────────────────────── */
  --fg-strong:        var(--ink);
  --fg:               var(--ink);
  --fg-muted:         var(--ink-2);
  --fg-subtle:        var(--ink-3);
  --fg-inverse:       var(--paper);
  --bg-page:          var(--paper);
  --bg-surface:       var(--paper);
  --bg-subtle:        var(--paper-2);
  --bg-hover:         var(--paper-2);
  --border:           var(--ink);
  --border-strong:    var(--ink);
  --border-focus:     var(--accent);
  --action:           var(--ink);
  --action-hover:     var(--ink-2);
  --action-disabled:  var(--ink-4);

  /* ── Status alias shorthands (designer wireframes) ──────────────── */
  --ok:      var(--color-green-700);
  --warn:    #b45309;
  --err:     var(--color-red-700);
  --accent-b:#d97706;               /* legacy alias = our --accent */
}
/* TZ-16 tokens · typography — font families, --ds-* scale, legacy
   --text-* / --leading-* aliases, weights, tracking. */
:root {
  /* ── Direction A unified font scale (per TZ-17) ─────────────────────
     Single ladder for the whole product. ANY `font-size: Npx` outside
     this file is a bug. Floor: 11px for letter-spaced caps, 12px for
     body. --ds-eyebrow is the smallest allowed value.
     Add new tokens here BEFORE using off-scale values in templates. */
  --ds-eyebrow: 11px;   /* mono caps, table TH, sidebar group, BALANCE */
  --ds-helper:  12px;   /* helper text, "last seen 4h ago", muted sub */
  --ds-body-sm: 13px;   /* table cells, list rows, mono ID values */
  --ds-body:    14px;   /* default body, form labels, button text */
  --ds-body-lg: 15px;   /* dialog body, large input value */
  --ds-body-md: 16px;   /* card title, dialog H3 — replaces 5× hardcoded 16px */
  --ds-section: 18px;   /* card titles (Pricing & bonuses), modal H3 */
  --ds-page:    24px;   /* page H1 with no eyebrow */
  --ds-page-lg: 28px;   /* page H1 with eyebrow */
  --ds-stat:    32px;   /* hero stat numbers ($1,284) */
  --ds-hero:    40px;   /* one-off marketing hero (Deposit) */
  --ds-display: 64px;   /* extra-large display — invoice EXPIRED stamp, ТЗ-23 B-02 */

  /* ── Legacy --text-* aliases — rebound to the new ladder so existing
     CSS calls (~80 sites) inherit the unified scale without rewrite. */
  --text-xs:   var(--ds-helper);  --leading-xs:   16px;
  --text-sm:   var(--ds-body);    --leading-sm:   20px;
  --text-base: 16px;              --leading-base: 24px;
  --text-lg:   var(--ds-section); --leading-lg:   24px;
  --text-xl:   20px;              --leading-xl:   26px;
  --text-2xl:  var(--ds-page);    --leading-2xl:  28px;
  --text-3xl:  var(--ds-page-lg); --leading-3xl:  32px;
  --text-4xl:  var(--ds-stat);    --leading-4xl:  36px;
  --text-5xl:  var(--ds-hero);    --leading-5xl:  1;
  --text-6xl:  48px;              --leading-6xl:  1;

  /* ── Font weights (per TZ-18) ──────────────────────────────────────
     Only 400/500/600/700 are loaded as woff2 (see base.css @font-face).
     Any `font-weight: NNN` outside this file is a bug — use the tokens.
     Roles:
     - 400 normal — body, helper, hints, captions
     - 500 medium — nav items idle, form labels
     - 600 semibold — eyebrows, uppercase labels, TH, pills, buttons
     - 700 bold — H1/H2/H3, hero stats, active states, dialog titles
     Never use 100/200/300/800/900 — not loaded → browser synthesizes. */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --tracking-tight:   -0.025em;
  --tracking-tighter: -0.05em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.06em;
  --tracking-eyebrow: 0.14em;  /* mono uppercase micro-labels (eyebrows, labels, table TH) */

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* ТЗ-23 B-15 + B-19: --hand / --hand-2 removed (dead tokens, never referenced).
     Short aliases — backward-compat for legacy wireframe references. */
  --sans:    var(--font-sans);
  --mono:    var(--font-mono);
}
/* TZ-16 tokens · spacing — --space-* scale, content-width scale, grid bg. */
:root {
  /* ── Grid background (decorative dotted/line grid) ──────────────── */
  --grid-stop: rgba(24, 23, 26, 0.07);
  --grid-size: 24px;

  /* ── Spacing scale (per TZ-19) ──────────────────────────────────────
     Single source of truth for padding / margin / gap. ANY
     `padding|margin|gap: Npx` outside this file is a bug — use the
     --space-* tokens or the .p-* / .m-* / .gap-* classes (utilities spacing.css).
     4px grid: 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / 40 / 48 / 64
     half-steps for fine tuning: 2 / 6 / 10 / 14.
     Semantic roles: --space-1 row inset · --space-2 default gap/pad-y ·
     --space-2_5 toolbar/list pad-y · --space-3 button pad-x · --space-3_5
     card/section pad · --space-4 block pad + table cell pad-x ·
     --space-5 dialog body · --space-6 large card / page pad-y · --space-8
     page pad-x. Never 5/7/9/13/18/22/26/36px — snap to the nearest token. */
  --space-0:   0;
  --space-px:  1px;
  --space-0_5: 0.125rem;
  --space-1:   0.25rem;
  --space-1_5: 0.375rem;
  --space-2:   0.5rem;
  --space-2_5: 0.625rem;
  --space-3:   0.75rem;
  --space-3_5: 0.875rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* ── Content-width scale ────────────────────────────────────────── */
  --width-narrow:  480px;
  --width-reading: 720px;
  --width-content: 1140px;
  --width-data:    100%;
}
/* TZ-16 tokens · motion — durations + easing.
   ТЗ-23 B-18: easing expanded — `ease` was too generic. Added explicit
   in/out curves so entries (toasts, dialogs) and exits read naturally. */
:root {
  /* ── Motion ─────────────────────────────────────────────────────── */
  --dur-fast:    0.08s;
  --dur:         0.15s;
  --dur-slow:    1.6s;
  --easing:      cubic-bezier(0.2, 0.6, 0.2, 1);   /* standard — most transitions */
  --easing-out:  cubic-bezier(0.16, 1, 0.3, 1);    /* entries — dialogs, sidesheets */
  --easing-in:   cubic-bezier(0.4, 0, 1, 1);       /* exits */
}
/* TZ-16 tokens · radius + shadow — sharp Direction A radii, brutalist
   offset shadows, focus ring. */
:root {
  --radius:  0;

  /* ── Radius — sharp Direction A ─────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-3xl:  0;
  --radius-full: 9999px;
  --radius-input: 0;
  --radius-btn:   0;
  --radius-card:  0;
  --radius-modal: 0;

  /* ── Shadow — brutalist offset ──────────────────────────────────── */
  --shadow-sm:  2px 2px 0 var(--ink);
  --shadow:     2px 2px 0 var(--ink);
  --shadow-md:  3px 3px 0 var(--ink);
  --shadow-lg:  4px 4px 0 var(--ink);
  --shadow-xl:  6px 6px 0 var(--ink);
  --shadow-2xl: 8px 8px 0 var(--ink);
  --shadow-balance: 2px 2px 0 var(--ink);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}
}