/* BARK design tokens for the regulation browser: the two :root blocks (raw and semantic tokens)
   of frontend/design_handoffs/colors_and_type.css, copied verbatim. That file also styles bare
   elements (h1, p, a), which would restyle the act text, so it is not linked whole.
   tests/test_tokens.py fails when this copy drifts from the source. Regenerate with:
     awk '/^:root \{/{f=1} f{print} f&&/^\}/{f=0}' frontend/design_handoffs/colors_and_type.css */
:root {
  /* — Core palette (from bark-remotion/src/shared/theme.ts) — */
  --bark-bg:              #f1f5f9;  /* Page background                  */
  --bark-bg-warm:         #f0f4f6;  /* Warm/secondary background        */
  --bark-surface:         #ffffff;  /* Card / panel                     */
  --bark-surface-sunken:  #f5f8f9;  /* Nested card / well               */
  --bark-border:          #e2e8f0;  /* Default border                   */
  --bark-border-strong:   #b6c4d3;  /* Emphasized border / keyboard key */
  --bark-divider:         #eef2f4;  /* Hairline inside cards            */

  --bark-text:            #0c1929;  /* Primary text (also navy)         */
  --bark-text-secondary:  #3d5b6c;  /* Secondary text / metadata        */
  --bark-text-tertiary:   #506b7a;  /* Muted / placeholder              */
  --bark-text-inverse:    #f8fafb;  /* On-navy text                     */

  /* Teal — limited application post-2026-04 corrective: drives --secondary,
     --node-process, .badge-teal, .btn-teal, focus rings, and graph-node
     active-path emphasis. Not the brand accent (that's navy / --primary). */
  --bark-teal:            #0d9488;
  --bark-teal-dark:       #0f766e;
  --bark-teal-darker:     #0a564f;  /* AA-clearing white-on-teal for .btn-teal:hover */
  --bark-teal-light:      #f0fdfa;
  --bark-teal-border:     #99f6e4;

  /* Navy — dark surface / CTA blocks / dark mode anchor */
  --bark-navy:            #0c1929;
  --bark-navy-700:        #172336;
  --bark-navy-600:        #23334b;

  /* Semantic / supporting (kept vivid — graph nodes, validation states,
     errors and clickable links still need to read as alerts/states.). */
  --bark-blue:            #2563eb;  /* Citations & links                */
  --bark-blue-light:      #eff6ff;
  --bark-cyan:            #06b6d4;  /* Information / input nodes        */
  --bark-green:           #10b981;  /* Success / conclusions            */
  --bark-green-light:     #ecfdf5;
  --bark-red:             #ef4444;  /* Destructive / prohibition        */
  --bark-red-light:       #fef2f2;
  --bark-orange:          #f59e0b;  /* Warning / threshold / exception  */
  --bark-orange-light:    #fffbeb;
  --bark-amber-200:       #fde68a;  /* Highlighter: a cited passage     */
  --bark-purple:          #7c3aed;  /* Definition / decision            */
  --bark-purple-light:    #f5f3ff;

  /* The single warm accent — copper. Marks the Build brand zone (Build
     card on Home, build template tiles, build-type chips) and chat
     send buttons across all composers. Not for general decoration. */
  --bark-copper:          #a16332;
  --bark-copper-light:    #f5ece4;

  /* Navy-derived hover/border surfaces (palette-overhaul-2026-04 corrective).
     These replace the teal-tinted hover surfaces inherited from the
     teal-primary era. Repointing --accent-tint / --accent-border below
     to these values cascades navy hover surfaces across ~60 callsites. */
  --bark-navy-tint:       #e8edf3;  /* Soft navy hover surface for cards/panels       */
  --bark-navy-border:     #c9d3df;  /* Navy-derived hairline                          */

  /* — Typography — */
  --font-heading: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Type scale (body-first, 4-step ratio) — */
  --text-xs:   11px;   /* captions, keyboard hints                  */
  --text-sm:   13px;   /* dense UI (table rows, metadata)           */
  --text-base: 15px;   /* body default                              */
  --text-md:   17px;   /* lead / emphasised body                    */
  --text-lg:   20px;   /* section heading (sans)                    */
  --text-xl:   24px;   /* page subtitle                             */
  --text-2xl:  32px;   /* H2 serif                                  */
  --text-3xl:  44px;   /* H1 serif                                  */
  --text-4xl:  60px;   /* hero display                              */

  /* Line heights */
  --leading-tight:   1.15;  /* big serif display                    */
  --leading-snug:    1.3;   /* headings                             */
  --leading-normal:  1.5;   /* body                                 */
  --leading-relaxed: 1.65;  /* long-form reading                    */

  /* Weights (Inter ranges 100–900; tokens use 300–800) */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;   /* serif display                    */
  --tracking-normal: 0;
  --tracking-wide:   0.02em;    /* small caps labels, buttons       */
  --tracking-caps:   0.08em;    /* eyebrow labels                   */

  /* — Spacing (4px base) — */
  --space-0:  0;
  --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;

  /* — Radius — */
  --radius-xs: 2px;    /* tiny chip indicators                       */
  --radius-sm: 4px;    /* inputs                                     */
  --radius-md: 6px;    /* buttons, badges                            */
  --radius-lg: 8px;    /* cards                                      */
  --radius-xl: 12px;   /* panels, modals                             */
  --radius-2xl: 16px;  /* hero surfaces                              */
  --radius-pill: 999px;

  /* — Shadow (flat, never heavy — banking-tool restraint) — */
  --shadow-xs:  0 1px 0 rgba(12, 25, 41, 0.04);
  --shadow-sm:  0 1px 2px rgba(12, 25, 41, 0.06), 0 1px 1px rgba(12, 25, 41, 0.04);
  --shadow-md:  0 4px 10px rgba(12, 25, 41, 0.06), 0 1px 2px rgba(12, 25, 41, 0.04);
  --shadow-lg:  0 12px 28px rgba(12, 25, 41, 0.08), 0 2px 4px rgba(12, 25, 41, 0.04);
  /* Focus ring is pinned to --secondary (teal) so it stays a warm halo
     regardless of how --accent is repointed. DESIGN.md prose says "teal
     focus ring sourced from secondary" — this matches that contract.
     The first declaration is a static rgba() fallback for browsers
     without color-mix support (Safari <16.4); modern browsers use the
     color-mix variant which tracks --secondary. */
  --shadow-focus: 0 0 0 3px rgba(13, 148, 136, 0.28);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--secondary) 28%, transparent);

  /* — Motion — */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:      120ms;
  --dur-normal:    200ms;
  --dur-slow:      320ms;

  /* — Z-index scale — */
  --z-base:     0;
  --z-sticky:   10;
  --z-dropdown: 50;
  --z-modal:    100;
  --z-toast:    200;

  /* — Layout — */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1400px;
}
:root {
  --fg:             var(--bark-text);
  --fg-secondary:   var(--bark-text-secondary);
  --fg-tertiary:    var(--bark-text-tertiary);
  --on-surface-tertiary: var(--bark-text-tertiary);
  --fg-inverse:     var(--bark-text-inverse);

  --bg:             var(--bark-bg);
  --bg-warm:        var(--bark-bg-warm);
  --surface:        var(--bark-surface);
  --surface-sunken: var(--bark-surface-sunken);

  --border:         var(--bark-border);
  --border-strong:  var(--bark-border-strong);
  --divider:        var(--bark-divider);

  /* — Brand anchor (palette-overhaul-2026-04 corrective) —
     Navy is THE brand identity. `--primary` is BARK Navy used for sidebar,
     primary CTAs, brand chrome, and now also hover surfaces (via the
     repointed --accent-* legacy aliases below). `--primary-hover` is
     INTENTIONALLY LIGHTER than --primary, not darker — for very dark
     tokens, hover lifts toward white rather than deepens. `--primary-tint`
     is the soft navy-tint hover surface (was teal-tint before this pass).
     Note: `--primary` (#0c1929) shares its hex with `--bark-text` by
     design — body text and brand chrome are the same near-black. */
  --primary:        var(--bark-navy);
  --primary-hover:  var(--bark-navy-700);
  --primary-tint:   var(--bark-navy-tint);
  --primary-border: var(--bark-navy-border);
  --on-primary:     #ffffff;

  /* Secondary (teal) — kept as a typed brand color but with very limited
     application. Drives `--node-process`, `.badge-teal`, `.btn-teal`, and
     graph-node active-path emphasis. Not used for general decoration.
     `--secondary-darker` is the AA-clearing variant for hover on .btn-teal. */
  --secondary:      var(--bark-teal);
  --secondary-hover: var(--bark-teal-dark);
  --secondary-darker: var(--bark-teal-darker);
  --secondary-tint: var(--bark-teal-light);
  --secondary-border: var(--bark-teal-border);
  --on-secondary:   #ffffff;

  /* Legacy --accent aliases — REPOINTED FROM TEAL TO NAVY.
     ~60 callsites across the app use --accent / --accent-tint /
     --accent-border / --accent-hover for hover surfaces, focus rings,
     and "click affordances". Repointing these to navy cascades the
     navy-first identity without per-component edits. The few surfaces
     that should stay copper (Build card, send buttons) opt in to
     --accent-copper explicitly. */
  --accent:         var(--primary);
  --accent-hover:   var(--primary-hover);
  --accent-tint:    var(--primary-tint);
  --accent-border:  var(--primary-border);

  /* The ONE warm accent — copper. Used at exactly two surfaces:
     the Build card on Home, and chat send buttons. Everywhere else
     is navy or navy-derived. */
  --accent-copper:        var(--bark-copper);
  --accent-copper-tint:   var(--bark-copper-light);

  --link:           var(--bark-blue);
  --link-bg:        var(--bark-blue-light);
  --success:        var(--bark-green);
  --success-bg:     var(--bark-green-light);
  --danger:         var(--bark-red);
  --danger-bg:      var(--bark-red-light);
  --warning:        var(--bark-orange);
  --warning-bg:     var(--bark-orange-light);
  /* readable amber for TEXT on light surfaces (DESIGN.md colors.warning-ink): --warning fails AA as text */
  --warning-ink:    #9a6a06;
  /* a cited passage marked in regulation text (DESIGN.md colors.highlight-bg) */
  --highlight-bg:   var(--bark-amber-200);
  --info:           var(--bark-cyan);

  /* — Graph / node types (from Research UI) — */
  --node-question:     var(--bark-blue);       /* user prompt         */
  --node-article:      var(--bark-blue);       /* regulation article  */
  --node-requirement:  var(--bark-blue);       /* must comply with    */
  --node-prohibition:  var(--bark-red);        /* must not            */
  --node-definition:   var(--bark-purple);     /* legal definition    */
  --node-condition:    var(--bark-orange);     /* if/then             */
  --node-exception:    var(--bark-orange);     /* carve-out           */
  --node-threshold:    var(--bark-orange);     /* numeric threshold   */
  --node-reasoning:    var(--bark-cyan);       /* logic / synthesis   */
  --node-calculation:  var(--bark-green);      /* computed value      */
  --node-result:       var(--bark-green);      /* output              */
  --node-conclusion:   var(--bark-green);      /* final answer        */
  --node-input:        var(--bark-cyan);       /* user-provided data  */
  --node-output:       var(--bark-green);      /* computed output     */
  --node-process:      var(--bark-teal);       /* pipeline step       */
  --node-searching:    var(--bark-orange);     /* in-flight search    */

  /* — Inventory map estate vocabulary (BAR-124) —
     Node types on the Map canvas + its legend read THESE, never the
     general-purpose tokens directly (E-GRF-01). Aliases only — the
     blessed 4 Aug map look, unchanged. Law nodes fill --surface and
     ring in --node-map-law-ring. */
  --node-map-cluster:    var(--primary);        /* cluster hub          */
  --node-map-obligation: var(--border-strong);  /* obligation · open    */
  --node-map-artifact:   var(--accent-copper);  /* artifact · example   */
  --node-map-signed:     var(--success);        /* signed claim         */
  --node-map-law-ring:   var(--fg-secondary);   /* law node ring        */

  /* — Build category palette (modeling pipeline stages) —
     Distinct from research --node-* vocabulary above. These are
     filled-pill colors (white text on saturated fill), used on every
     ModelingNode pill-badge and as the colored top-bar on each
     cluster column in the build view. */
  --node-category-input-data: #14b8a6;
  --node-category-parameter:  #6366f1;
  --node-category-transform:  #ec4899;
  --node-category-calculate:  #3b82f6;
  --node-category-validate:   #22c55e;
  --node-category-output:     #10b981;
}