/* =============================================================================
   TRINITY DEMO — DESIGN TOKENS v2.1
   =============================================================================
   Governs:     remandly-demo, retainerfund-demo, familylawpath-demo
   Does NOT
   govern:      pitch video hero stills, slide overlays, motion graphics frames
                — those use System B (Vault Navy / Brass / Oxblood / Path Pine),
                specified in 05_pitch_script/visual_design_system.md

   Gate 1 lock: 01_master_brief/GATE1_TOKEN_DECISIONS.md      (Q1=A, Q2=A, Q3=film)
   Review:      07_design_tokens/GATE1_SIGNOFF_TOKENS_V1.md   (conditional pass)
   Verifier:    07_design_tokens/contrast_check.py
   Cross-check: 07_design_tokens/pm_independent_verify_v2.py  (PM, independent)
                07_design_tokens/tokens_v2_verify.py          (build)

   TOKENS ARE CLOSED at v2.1. All 12 changed values verified twice, independently,
   against every surface each token can land on.

   -----------------------------------------------------------------------------
   STANDING RULE (from Gate 1 review):
   Every colour pair carrying text is COMPUTED, not eyeballed. Every ratio in
   this file is a real WCAG 2.1 relative-luminance figure. No stated number,
   no approval.

   AA FLOOR APPLIED: 4.5:1 for normal text on the WORST surface it can land on
   (not just canvas). Placeholder text sits inside input fields on --surface-1
   or --surface-2, so every text token is verified against canvas AND all three
   surface steps. This is where v1's six fixes were still failing.
   -----------------------------------------------------------------------------

   v2.1 CHANGELOG — one value, caught on PM's independent re-derivation
    12.       --state-danger           #EA5257   was #E5484D
              #E5484D on --surface-3 computes to 4.4984:1 — it misses the AA floor
              by 0.0016. This token paints the LSO Rule 6.3-1 hard-block message,
              which is the one string in the build that legally must be readable,
              and hard-block panels sit on --surface-3. #EA5257 is 4.8986:1 there
              and is visually indistinguishable at this size.

   v2 CHANGELOG — 11 colour values changed
     1.  RF   --accent-fill      NEW  #4E48DB   filled buttons only (6.03:1)
     2.  RF   --accent-text      NEW  #8079FF   accent as text/link (4.51:1 worst)
     3.  RF   --accent-navy      →    --surface-rf-navy   SURFACE ONLY, renamed
     4.  FLP  light --accent-fg       #32302F   ink on #10B981 fill (5.18:1)
     5.  FLP  light --accent-text NEW #0B7854   accent as text on linen (4.52:1)
     6.  FLP  light hover/active  →   lighten, not darken (ink must stay legible)
     7.  FLP  light --text-muted      #6B6866   was #6D6A67 (failed surface-3)
     8.       --text-faint  dark      #7C818C   was #4A4D54
     9.       --text-faint  light     #6D6864   was #A6A29E
    10.       --state-info             #7A8290   was #6E7583
    11.       --border-input     NEW  #5F6572 / #8D8578   WCAG 1.4.11 3:1 floor
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. SHARED TOKENS — all three platforms, dark mode
   ----------------------------------------------------------------------------- */

:root {

  /* --- CANVAS + LUMINANCE LADDER (Linear-class near-black) --------------------
     Depth is luminance stepping, never drop-shadow.
     Film cuts to True Black #0A0F14, laptop opens on #08090A — 6-point delta,
     visually identical on a laptop panel. Black-to-black, per Gate 1 amendment.
     Applies at Beat 6, Beat 6-pre, Beat 9. */

  --canvas:         #08090A;
  --surface-1:      #0F1011;  /* base card / input field */
  --surface-2:      #141516;  /* elevated card / sticky nav */
  --surface-3:      #18191A;  /* hover / focus / active lift — WORST-CASE bg */

  /* --- BORDERS — two tokens, two jobs ---------------------------------------
     --hairline is DECORATIVE ONLY. 1.30:1 on canvas. WCAG 1.4.11 exempts
     purely decorative dividers, so this is legal — but it must never be the
     visible boundary of an input, checkbox, radio, or focus indicator.
     --border-input carries the 3:1 non-text floor for interactive boundaries. */

  --hairline:       #23252A;  /* decorative dividers only — 1.30:1, NOT for inputs */
  --hairline-soft:  #1B1D22;  /* internal card dividers — decorative only */
  --border-input:   #5F6572;  /* inputs/checkboxes/focus — 3.41 canvas, 3.01 s-3 PASS */

  /* --- TEXT LADDER ----------------------------------------------------------
     Ratios shown as: canvas / surface-1 / surface-2 / surface-3 */

  --text-primary:   #F7F8F8;  /* 18.73 / 17.81 / 17.10 / 16.47  AAA  headlines+body */
  --text-body:      #E4E6EA;  /* 15.95 / 15.17 / 14.56 / 14.02  AAA  paragraphs */
  --text-muted:     #8A8F98;  /*  6.13 /  5.86 /  5.63 /  5.42  AA   labels, captions */
  --text-faint:     #7C818C;  /*  5.10 /  4.88 /  4.68 /  4.51  AA   PLACEHOLDERS */
  --text-inverse:   #08090A;  /* text ON accent-filled buttons */

  /* NOTE — the faint/muted step is now compressed (5.10 vs 6.13). That is the
     unavoidable cost of AA on placeholder text. Do NOT re-darken --text-faint
     to widen the ladder: it governs placeholders in both intake products, and
     both demos are walked in front of a compliance-focused reader on Aug 12.
     Widen hierarchy with SIZE and WEIGHT, not with a failing contrast value. */

  /* --- SUCCESS SIGNAL (Cash-App canvas inversion) ---------------------------
     Max 3 uses per session across all three demos combined.
     NEVER on RetainerFund borrowing surfaces — MA v. Robinhood consent order,
     $7.5M, Jan 2024. RF celebrates repayment, verification and paperwork
     completion only. Never disbursement, never approval-of-borrowing. */

  --dopamine-green: #00E013;  /* 11.08:1 both directions on canvas — AAA */

  /* --- SEMANTIC STATE COLOURS ---------------------------------------------- */

  --state-warn:     #F5A524;  /* 9.76 canvas / 8.96 s-2  AAA  FLP safety-check chip */
  --state-danger:   #EA5257;  /* 5.54 canvas / 4.90 s-3  AA   Rule 6.3-1 hard-block
                                 v2.1 — was #E5484D (4.4984 on s-3, missed AA by
                                 0.0016). This token paints the only string on the
                                 site that legally must be readable. */
  --state-info:     #7A8290;  /* 5.15 / 4.92 / 4.72 / 4.55  AA  neutral notice */

  /* --- MOTION -------------------------------------------------------------- */

  --ease:           cubic-bezier(0.25, 1, 0.5, 1);      /* ease-out-quart */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant:    100ms;    /* press states */
  --dur-fast:       150ms;    /* chip fills, hover, focus rings */
  --dur-med:        300ms;    /* fade-ups, slide-ins, toasts */
  --dur-slow:       600ms;    /* line-draws, progress bar fills */
  --dur-hero:       800ms;    /* balance rings, count-downs */

  /* --- RADII --------------------------------------------------------------- */

  --radius-xs:      4px;
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-full:    9999px;

  /* --- SPACING (8px base grid) -------------------------------------------- */

  --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;

  /* --- TYPE FAMILIES (100% free, OFL licensed) ---------------------------- */

  --font-sans:      'Geist', 'Inter var', system-ui, -apple-system, sans-serif;
  --font-mono:      'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-serif:     'Instrument Serif', ui-serif, Georgia, serif;
  --font-display:   var(--font-sans);   /* RF overrides this to serif */

  /* --- TYPE SCALE (fixed — no arbitrary sizes) ---------------------------- */

  --fs-11: 11px;  /* eyebrow labels only */
  --fs-14: 14px;  /* caption */
  --fs-16: 16px;  /* body — reading floor */
  --fs-18: 18px;  /* body large */
  --fs-24: 24px;  /* H3 */
  --fs-32: 32px;  /* H2 */
  --fs-48: 48px;  /* H1 */
  --fs-64: 64px;  /* display */

  /* --- LINE HEIGHT -------------------------------------------------------- */

  --lh-tight:    1.05;   /* display, H1 */
  --lh-heading:  1.15;   /* H2, H3 */
  --lh-body:     1.5;    /* body, captions */
  --lh-relaxed:  1.65;   /* long-form reading */

  /* --- TRACKING ----------------------------------------------------------- */

  --tracking-display: -0.03em;   /* 48-64px */
  --tracking-heading: -0.02em;   /* 24-32px */
  --tracking-body:    -0.005em;
  --tracking-eyebrow:  0.08em;   /* uppercase 11px */

  /* --- NUMERALS ----------------------------------------------------------- */

  --num-tabular:  tabular-nums;  /* ALL money, dates, case IDs, ledgers */

  /* --- Z-INDEX LADDER ---------------------------------------------------- */

  --z-base: 0;  --z-sticky: 10;  --z-dropdown: 20;  --z-sheet: 30;
  --z-modal: 40;  --z-toast: 50;  --z-haptic: 60;

  /* --- FOCUS RING -------------------------------------------------------- */

  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent, #F7F8F8);
}


/* -----------------------------------------------------------------------------
   2. REMANDLY — voltage orange
   Logo R2 (custom sans wordmark, angled R intervention).
   Register: criminal, urgent, 2 a.m., calibrated warm not alarm.
   All Remandly pairs passed v1 review unchanged.
   ----------------------------------------------------------------------------- */

[data-platform="remandly"] {
  --accent:         #FF5900;  /* 6.34 canvas / 5.82 s-2 / 5.60 s-3  AA  text+fill */
  --accent-hover:   #FF7325;  /* 7.34 canvas  AAA */
  --accent-active:  #E64F00;  /* 5.20 canvas  AA */
  --accent-fill:    #FF5900;  /* filled buttons — same value, ink text */
  --accent-fg:      #08090A;  /* 6.34:1 on fill. NEVER white — white is 2.95:1 FAIL */
  --accent-text:    #FF5900;  /* accent as text/link — 5.60 worst on surface-3  AA */
  --accent-soft:    #FF5900CC;
  --accent-wash:    #FF59001A;
  --accent-glow:    #FF590033;
}


/* -----------------------------------------------------------------------------
   3. RETAINERFUND — Stripe blurple
   Logo RF2 (heraldic RF serif monogram in circle).
   Register: financing, gravitas, permanence, bank-crest.

   COMPLIANCE — binds every RF surface:
     · RF is NOT the lender of record. No "we lend", no "our capital".
     · No interest rate displayed anywhere. Flat origination fee per funded file.
     · No credit score on any screen, ever.
     · No receivables, no collections, no credit risk.
     · Client-initiated only — LSO 4.1-2 / LSA 4.1-2. No outreach language.
     · Tier mapping LOCKED: A → ready, B → co-signer, C/D → decline.
     · A decline must route visibly to a second-tier lender placeholder,
       never to a dead end.
     · --dopamine-green is FORBIDDEN on any borrowing surface here.
   ----------------------------------------------------------------------------- */

[data-platform="retainerfund"] {
  --accent:         #635BFF;  /* BRAND ONLY — washes, glows, borders, icon fills.
                                 4.24:1 as text on canvas = FAIL. Never a text colour. */
  --accent-fill:    #4E48DB;  /* filled buttons ONLY — 6.03:1 with --accent-fg  AA */
  --accent-fg:      #F7F8F8;  /* 6.03 on fill. Dark text on #4E48DB is 3.11 FAIL */
  --accent-text:    #8079FF;  /* accent as text/link/active-nav.
                                 5.79 canvas / 5.53 s-1 / 5.31 s-2 / 5.11 s-3
                                 / 4.51 on --surface-rf-navy — passes AA everywhere */
  --accent-hover:   #8079FF;
  --accent-active:  #4E48DB;
  --accent-soft:    #635BFFCC;
  --accent-wash:    #635BFF1A;
  --accent-glow:    #635BFF33;

  /* SURFACE ONLY. #0A2540 on canvas is 1.28:1 — invisible as a foreground.
     Renamed from --accent-navy so no component can read it as a text colour.
     Legal text colours on this surface:
       --text-primary  14.60  AAA   --text-body    12.43  AAA
       --text-muted     4.78  AA    --accent-text   4.51  AA
     NOT legal on this surface: --text-faint (3.51 FAIL). */
  --surface-rf-navy: #0A2540;  /* RF hero panels / quote blocks / footers */

  --font-display:   var(--font-serif);   /* Instrument Serif — H1/H2 only, body stays sans */
}


/* -----------------------------------------------------------------------------
   4. FAMILYLAWPATH — teal/growth green
   Logo FLP2 (three-node path icon + wordmark, dual-mode).
   Register: family, orientation, being heard.
   DUAL-MODE — dark = operator dashboard. light = client intake + marketing.
   Accent hex #10B981 is now IDENTICAL in both modes (Gate 1 Q2 resolution).
   ----------------------------------------------------------------------------- */

[data-platform="familylawpath"] {
  --accent:         #10B981;  /* 7.86 canvas / 7.21 s-2  AAA  text and fill */
  --accent-fill:    #10B981;
  --accent-fg:      #08090A;  /* 7.86:1 on fill  AAA */
  --accent-text:    #10B981;
  --accent-hover:   #34D39D;
  --accent-active:  #0E9E70;
  --accent-soft:    #10B981CC;
  --accent-wash:    #10B9811A;
  --accent-glow:    #10B98133;
}

/* --- FAMILYLAWPATH LIGHT MODE ---------------------------------------------
   Client intake + marketing only. Operator dashboard stays dark.
   Wealthsimple pattern — linen canvas, ink text.
   Trigger: [data-platform="familylawpath"][data-mode="light"] on <html>.

   Light-mode surfaces, worst-case bg for text = --surface-3 #EBE9E5. */

[data-platform="familylawpath"][data-mode="light"] {
  --canvas:         #FCFCFC;   /* linen */
  --surface-1:      #FFFFFF;
  --surface-2:      #F4F2EF;
  --surface-3:      #EBE9E5;   /* WORST-CASE bg for light-mode text */
  --hairline:       #E4E2DF;   /* decorative only */
  --hairline-soft:  #EDEBE8;   /* decorative only */
  --border-input:   #8D8578;   /* 3.55 linen / 3.01 s-3  PASS WCAG 1.4.11 */

  /* Ratios: linen / white / surface-2 / surface-3 */
  --text-primary:   #32302F;   /* 12.80 / 13.13 / 11.75 / 10.83  AAA  ink */
  --text-body:      #3E3C3B;   /* 10.69 / 10.96 /  9.81 /  9.04  AAA */
  --text-muted:     #6B6866;   /*  5.39 /  5.53 /  4.95 /  4.56  AA
                                  (was #6D6A67 — 4.43 on surface-3, FAILED) */
  --text-faint:     #6D6864;   /*  5.37 /  5.51 /  4.93 /  4.54  AA  PLACEHOLDERS
                                  (was #A6A29E — 2.47, FAILED badly) */
  --text-inverse:   #FCFCFC;

  /* Accent stays logo-exact #10B981 in BOTH modes. Legibility comes from
     putting INK on the fill, not from shifting the hue. Ink on #10B981 = 5.18:1.
     White on #10B981 is 2.54:1 and is forbidden. */
  --accent:         #10B981;   /* logo-exact, unchanged across modes */
  --accent-fill:    #10B981;
  --accent-fg:      #32302F;   /* 5.18:1 ink on fill  AA */

  /* Hover/active LIGHTEN in light mode. Darkening the fill breaks the dark ink
     sitting on it — PM's proposed #0E9E70 hover is 3.84:1 with ink and #0B8A61
     active is 3.01:1, both FAIL. Press feedback is a transform, not a darken. */
  --accent-hover:   #14C68C;   /* 5.93:1 with ink  AA */
  --accent-active:  #2ED89F;   /* 7.15:1 with ink  AAA — pair with scale(0.98) */

  /* Accent as a FOREGROUND on linen needs its own darker value.
     #10B981 as text on linen is 2.47:1 FAIL. */
  --accent-text:    #0B7854;   /*  5.35 /  5.48 /  4.91 /  4.52  AA */

  --accent-soft:    #10B981CC;
  --accent-wash:    #10B9811A;
  --accent-glow:    #10B98133;
}


/* -----------------------------------------------------------------------------
   5. TABULAR NUMERAL DISCIPLINE
   Every money / date / case-ID surface. Non-optional on financial data.
   ----------------------------------------------------------------------------- */

.tabular, .money, .date, .case-id, .ledger, [data-tabular="true"] {
  font-variant-numeric: var(--num-tabular);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.numeric-col {
  text-align: right;
  font-variant-numeric: var(--num-tabular);
}


/* -----------------------------------------------------------------------------
   6. EYEBROW LABEL
   Uppercase 11px / 0.08em — the cheapest premium tell in the system.
   ----------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);   /* 6.13:1 — do NOT use --text-faint here */
  line-height: var(--lh-body);
}


/* -----------------------------------------------------------------------------
   7. INPUT BASELINE
   Enforces the border and placeholder tokens so no component can regress them.
   ----------------------------------------------------------------------------- */

input, textarea, select {
  background-color: var(--surface-1);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

input::placeholder, textarea::placeholder {
  color: var(--text-faint);   /* AA-verified on surface-1 — 4.88:1 dark, 5.51 light */
  opacity: 1;                 /* Firefox defaults to 0.54 and would break the ratio */
}

input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* -----------------------------------------------------------------------------
   8. MOTION UTILITIES
   ----------------------------------------------------------------------------- */

.transition-fast { transition: all var(--dur-fast) var(--ease); }
.transition-med  { transition: all var(--dur-med)  var(--ease); }
.transition-slow { transition: all var(--dur-slow) var(--ease); }

/* Chip fill + 1.03 scale-settle, 150ms — master brief §5.5 item 2 */
.chip-press {
  transition: transform var(--dur-fast) var(--ease-spring),
              background-color var(--dur-fast) var(--ease);
}
.chip-press:active { transform: scale(1.03); }

/* Button press — scale down, never darken (light mode ink legibility) */
.btn-press { transition: transform var(--dur-instant) var(--ease); }
.btn-press:active { transform: scale(0.98); }

.slide-up { animation: slideUp var(--dur-med) var(--ease) both; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Success-moment full-bleed wash. Max 3 per session. NEVER on RF borrowing. */
.success-wash { animation: successWash var(--dur-hero) var(--ease-spring); }
@keyframes successWash {
  0%   { background-color: var(--canvas); }
  40%  { background-color: var(--dopamine-green); }
  100% { background-color: var(--canvas); }
}

/* Endowed progress bar — opens at ~20%, 600ms slow-start. Credit real steps only. */
.progress-fill { transition: width var(--dur-slow) var(--ease); }


/* -----------------------------------------------------------------------------
   9. GLASS SURFACE
   Sticky nav and bottom sheets ONLY. Never cards, never modals.
   backdrop-filter costs 15-30% FPS on mid-tier Android.
   ----------------------------------------------------------------------------- */

.glass {
  background-color: color-mix(in oklab, var(--surface-2) 78%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--hairline-soft);
}


/* -----------------------------------------------------------------------------
   10. SAFE-AREA
   ----------------------------------------------------------------------------- */

.safe-top    { padding-top:    env(safe-area-inset-top, 0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-left   { padding-left:   env(safe-area-inset-left, 0); }
.safe-right  { padding-right:  env(safe-area-inset-right, 0); }


/* -----------------------------------------------------------------------------
   11. REDUCED MOTION
   ----------------------------------------------------------------------------- */

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


/* -----------------------------------------------------------------------------
   12. BASE ELEMENT DEFAULTS
   ----------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background-color: var(--canvas);
  color: var(--text-primary);
  min-height: 100dvh;
}

::selection {
  background-color: var(--accent-wash, #FF59001A);
  color: var(--text-primary);
}


/* =============================================================================
   END TOKENS v2 — every text-carrying pair computed against its worst surface
   ============================================================================= */