/* =============================================================================
   HIPAA Sherpa — Design Tokens (single source of truth)

   Every color, spacing, radius, shadow, and type value used anywhere in the
   product resolves to a custom property defined HERE. Light values live in
   :root; dark mode is ONLY a remap inside [data-theme="dark"] — components
   must never need their own dark rules if they use these tokens.

   Loaded BEFORE app.css (see templates/partials/head.php). Lint (lint:ui)
   flags raw hex values and deprecated aliases in templates.
   ============================================================================= */

/* Self-hosted Schibsted Grotesk (latin variable font) — the system voice
   (guide §Typography, revised 2026-07-24: a distinctive grotesque replaces the
   stock Inter default). One file covers weights 400–900. font-display:swap
   keeps text visible during load; the file is <link rel=preload>ed in head.php. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
}

/* ---- CSS Custom Properties -------------------------------- */
:root {
  /* Brand */
  --primary:        #2867e4;
  --primary-hover:  #1256d8;
  --primary-light:  #e8f1ff;
  --primary-text:   #2564e0;
  --primary-dark:   #1046c1;
  --accent:         #008398;
  --accent-light:   #e3f6f9;

  /* Legacy aliases (keep for existing code) */
  --success:  #008a4e;
  --warning:  #ac6900;
  --danger:   #d40c1a;
  --info:     #007cab;

  /* Semantic shorthand aliases (used by utility CSS) */
  --bg:      #f8fafd;
  --bg-card: #ffffff;
  --border:  #dadee3;
  /* Legacy aliases — referenced by older inline styles. Map to --bg-alt so
     code that says `var(--surface-secondary, var(--bg-secondary))` resolves
     to a defined value instead of falling through to nothing. */
  --surface-secondary: #edf0f4;
  --bg-secondary:      #edf0f4;

  /* Surfaces */
  --bg-body:           #f8fafd;
  --bg-surface:        #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-alt:            #edf0f4;
  --bg-hover:          #f4f7fa;

  /* Text */
  --text-primary:   #121b29;
  --text-secondary: #3e4858;
  /* #697079 (vs the old #6b7280) clears WCAG AA body (>=4.5) even on the
     tinted --bg-alt surface (#f1f5f9), where muted text often sits. */
  --text-muted:     #636b76;
  /* --text-subtle is used for hint/secondary label text, so it must clear WCAG
     AA-large (>=3:1) on every light surface (body/surface/alt). #828892 gives
     ~3.3:1 while staying clearly lighter than --text-muted. --text-disabled is
     for disabled controls (WCAG-exempt) and stays at the fainter value. */
  --text-subtle:    #697079;
  --text-disabled:  #9ca3af;
  --text-inverse:   #ffffff;

  /* Borders */
  --border-color:  #dadee3;
  --border-strong: #c5cbd2;
  --border-focus:  #2867e4;

  /* Semantic colors — light variants */
  --success-light:  #e8f8ee;
  --warning-light:  #fdf1e4;
  --danger-light:   #ffeeec;
  --info-light:     #e6f7ff;

  /* Semantic colors */
  --color-success:        #008a4e;
  --color-success-strong: #00874c; /* white-text fill (4.6:1) — see rule 10 */
  --color-success-bg:     #e8f8ee;
  --color-success-border: #b1dec2;
  --color-success-text:   #136842;
  --color-warning:        #ac6900;
  --color-warning-strong: #a86600; /* white-text fill (4.6:1) — see rule 10 */
  --color-warning-bg:     #fdf1e4;
  --color-warning-border: #eacba6;
  --color-warning-text:   #7a4d00;
  --color-danger:         #d40c1a;
  --color-danger-strong:  #d40c1a; /* white-text fill (5.9:1); see .btn-danger */
  --color-danger-bg:      #ffeeec;
  --color-danger-border:  #f6c3bc;
  --color-danger-text:    #a21a1b;
  --color-info:           #007cab;
  --color-info-strong:    #007cab; /* white-text fill (4.7:1); base already clears AA */
  --color-info-bg:        #e6f7ff;
  --color-info-border:    #aad9f2;
  --color-info-text:      #006186;
  --color-purple:         #7c44c3;
  --color-purple-bg:      #f5f1ff;
  /* Ink for text ON --color-purple-bg (rule 10). Same value as the base because
     purple already clears AA on its own tint (5.45:1) — defined so every semantic
     family exposes the SAME triad and the pairing rule is uniform. */
  --color-purple-text:    #7c44c3;
  --color-white:          #ffffff;

  /* Legacy gray scale (keep for existing code) */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgb(2 6 23 / 0.05);
  --shadow-sm: 0 1px 2px rgb(2 6 23 / 0.06), 0 12px 30px -18px rgb(2 6 23 / 0.18);
  --shadow:    0 1px 3px rgb(2 6 23 / 0.07), 0 16px 40px -20px rgb(2 6 23 / 0.20);
  --shadow-md: 0 2px 4px rgb(2 6 23 / 0.07), 0 20px 44px -20px rgb(2 6 23 / 0.22);
  --shadow-lg: 0 2px 4px rgb(2 6 23 / 0.08), 0 30px 60px -24px rgb(2 6 23 / 0.26);
  --shadow-xl: 0 4px 8px rgb(2 6 23 / 0.10), 0 40px 80px -28px rgb(2 6 23 / 0.30);

  /* Radius */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* Transitions */
  --transition:      150ms ease;
  --transition-fast: 120ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 300ms ease;
  --transition-md:   250ms ease;

  /* Sidebar */
  --sidebar-width:            240px;
  --sidebar-bg:               #ffffff;
  --sidebar-border:           #dadee3;
  --sidebar-link-color:       #3e4858;
  --sidebar-link-hover-bg:    #edf0f4;
  --sidebar-link-active-bg:   #e8f1ff;
  --sidebar-link-active-color:#2867e4;

  /* Code blocks keep a fixed dark-slate palette in both themes */
  --code-bg:   #1e293b;
  --code-text: #e2e8f0;
  /* Theme-aware faint surface overlays */
  --overlay-faint: rgba(0, 0, 0, .03);
  --overlay-soft:  rgba(0, 0, 0, .06);

  /* ---- Data-visualization palette (categorical, fixed order) ---------------
     Validated with the dataviz validator against this app's own chart surface in
     BOTH themes (white light, dark-slate dark). Each mode passes the lightness
     band, chroma floor, adjacent CVD separation (worst dE 9.1 light / 8.4 dark,
     target >=8) and the normal-vision floor (22.9 / 19.8, floor >=15). Light mode
     WARNs on contrast for the aqua and yellow steps, which obligates relief, so
     every chart using them ships direct labels AND a table view.
     Assign these in FIXED order per entity, never by rank, or a filter would
     repaint the survivors. Do not re-step without re-running the validator.
     NOTE: keep "name colon value" patterns out of this comment — the token
     contract test parses declarations by regex and would read them as real ones. */
  --viz-1: #2a78d6;   /* blue   */
  --viz-2: #eb6834;   /* orange */
  --viz-3: #1baf7a;   /* aqua   */
  --viz-4: #eda100;   /* yellow */
  --viz-grid:    #e2e8f0;   /* hairline gridlines: one step off surface */
  --viz-surface: #ffffff;   /* the surface marks are drawn on (ring/gap color) */

  --font-sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
}

/* ---- Semantic tiers (modernization additions) ---------------------------- */
:root {
  /* Surfaces: 1 = page, 2 = card, 3 = raised/popover */
  --surface-1: var(--bg-body);
  --surface-2: var(--bg-surface);
  --surface-3: var(--bg-surface-raised);

  /* Text: 1 = primary, 2 = secondary, 3 = muted */
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);

  /* Focus & overlays */
  --focus-ring:   0 0 0 3px rgba(37, 99, 235, .35);
  --overlay:      rgba(15, 23, 42, .5);

  /* Marketing background (hero grid / glows / shapes / starfield).
     Dark values are remapped below so the dynamic background stays visible
     and on-palette in both themes. */
  --hero-gradient: linear-gradient(135deg, #f8faff 0%, #eff6ff 50%, #f0fdfe 100%);
  --hero-grid-line: rgba(30, 64, 175, .04);
  --hero-glow-1:   #bfdbfe;
  --hero-glow-2:   #a5f3fc;
  --hero-glow-opacity: .35;
  --hero-shape:    rgba(30, 64, 175, .14);
  --hero-star:     rgba(30, 64, 175, .35);

  /* Banded-scale families (style-guide §severity/§matrix; matrix is fixed art
     in both themes, orange re-themes) */
  --color-orange: #d84b00;
  /* Ink for orange TEXT (rule 10). The base is a fill: it is only 4.26:1 on
     white and 4.1:1 on its own 14% tint, so text must use this darker step. */
  --color-orange-text: #b94000;
  /* White-text fill: white on the base is only 4.26:1 light / 2.83:1 dark. */
  --color-orange-strong: #cd4700;
  --matrix-1: #50d492;
  --matrix-2: #edcc48;
  --matrix-3: #fc9f30;
  --matrix-4: #fc6b33;
  /* Role tokens added 2026-07-23 (guide §Color): --primary-soft = soft primary
     text on tinted chips (AA-proven both themes); --bg-inverse = the fixed deep
     chip surface (bulk bar, kbd hints) that stays dark in BOTH themes, pairing
     with --text-inverse. */
  --primary-soft: #1046c1;
  --bg-inverse: #111923;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Semantic shorthand aliases */
  --bg:      #0a1019;
  --bg-card: #111923;
  --border:  #2d333d;
  --surface-secondary: #040810;
  --bg-secondary:      #040810;

  --bg-body:           #0a1019;
  --bg-surface:        #111923;
  --bg-surface-raised: #1a222e;
  --bg-alt:            #040810;
  --overlay-faint: rgba(255, 255, 255, .04);
  --overlay-soft:  rgba(255, 255, 255, .08);
  --bg-hover:          #1a222e;

  /* Data-viz palette, dark steps. NOT a flip of the light values — the same four
     hues re-stepped for the dark surface and validated as a set against #111923
     (all four clear 3:1 there, so dark needs no relief rule). */
  --viz-1: #3987e5;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-4: #c98500;
  --viz-grid:    #2d333d;
  --viz-surface: #111923;

  --text-primary:   #f2f5f9;
  --text-secondary: #b7bec7;
  --text-muted:     #989fa8;
  /* AA-large (>=3:1) on every dark surface incl. raised #253347; stays lighter
     than --text-muted. --text-disabled (disabled controls, WCAG-exempt) keeps
     the fainter value. */
  --text-subtle:    #848b94;
  --text-disabled:  #475569;

  --border-color:  #2d333d;
  --border-strong: #464e58;
  --border-focus:  #22cde5;

  /* Semantic light variants — dark equivalents */
  --success-light:  #092617;
  --warning-light:  #2b1c03;
  --danger-light:   #321613;
  --info-light:     #032331;

  --color-success:        #00c37a;
  /* Dark's base success/warning are BRIGHT (they read as text on dark ground),
     so white ink on them is only 2.31:1 / 1.98:1. The -strong step is the
     white-text fill — much darker than the base, unlike in light mode. */
  --color-success-strong: #008654; /* white 4.63:1 */
  --color-success-bg:     #092617;
  --color-success-border: #12452c;
  --color-success-text:   #69c090;
  --color-warning:        #f2ab19;
  --color-warning-strong: #9a6d0f; /* white 4.6:1 */
  --color-warning-bg:     #2b1c03;
  --color-warning-border: #4e3504;
  --color-warning-text:   #cea35f;
  --color-danger:         #f1453f;
  --color-danger-strong:  #d92b25; /* white-text fill stays AA (4.86:1); base stays bright for danger-as-text */
  --color-danger-bg:      #321613;
  --color-danger-border:  #5a2b26;
  --color-danger-text:    #fb8276;
  --color-info:           #40b8ee;
  --color-info-strong:    #2b7da1; /* white 4.61:1 — dark's base is bright (2.26:1) */
  --color-info-bg:        #032331;
  --color-info-border:    #024059;
  --color-info-text:      #6db5da;
  --color-purple:         #ac77fa;
  --color-purple-bg:      #291c3c;
  --color-purple-text:    #ac77fa;   /* 5.11:1 on the tint — see rule 10 */

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-sm: 0 8px 30px -12px rgb(0 0 0 / 0.55);
  --shadow-md: 0 12px 40px -14px rgb(0 0 0 / 0.60);
  --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.68);
  --shadow-xl: 0 32px 80px -24px rgb(0 0 0 / 0.75);

  --sidebar-bg:               #111923;
  --sidebar-border:           #2d333d;
  --sidebar-link-color:       #989fa8;
  --sidebar-link-hover-bg:    #1a222e;
  --sidebar-link-active-bg:   rgba(53,129,246,.22);
  --sidebar-link-active-color:#49a0ff;
  --primary-light:            rgba(53,129,246,.22);
  --primary-text:             #49a0ff;

  /* Legacy aliases */
  --gray-50:  #162032;
  --gray-100: #1e293b;
  --gray-200: #334155;
  --gray-300: #475569;
  --gray-400: #64748b;
  --gray-500: #94a3b8;
  --gray-600: #cbd5e1;
  --gray-700: #e2e8f0;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;
}


/* ---- Dark remap for the modernization additions --------------------------- */
[data-theme="dark"] {
  --focus-ring: 0 0 0 3px rgba(96, 165, 250, .4);
  --overlay:    rgba(2, 6, 23, .65);

  --hero-gradient: linear-gradient(135deg, #0b1120 0%, #0f172a 55%, #0b1f2a 100%);
  --hero-grid-line: rgba(148, 197, 253, .05);
  --hero-glow-1:   #1e3a8a;
  --hero-glow-2:   #164e63;
  --hero-glow-opacity: .22;
  --hero-shape:    rgba(96, 165, 250, .18);
  --hero-star:     rgba(191, 219, 254, .65);

  /* ---- 2026 additions (tokens introduced/overridden by the 2026 system) ---- */
  --primary: #216ee1;
  --primary-hover: #4394ff;
  --accent: #22cde5;
  --success: #00c37a;
  --warning: #f2ab19;
  --danger: #f1453f;
  --info: #40b8ee;
  --color-orange: #f27636;
  /* Dark orange already clears AA as text (6.25:1 on surface), so the ink
     aliases the base — same uniform-triad reasoning as --color-purple-text. */
  --color-orange-text: #f27636;
  --color-orange-strong: #b75929; /* white 4.69:1 */
  --primary-soft: #97bffe;
  --bg-inverse: #1a222e;
}