/* ============================================================
   Focus Assured Design System - token layer
   Do not add component styles here. Light mode on :root, dark on .dark.

   Brand source: Focus Assured brand guidelines.
     Forest Green #5D7770  - primary. Buttons, active nav, links, headings.
     Salmon       #E5826D  - the logo dot. Accent punctuation only.
     Sage         #A8BCA1  - supporting neutral, charts, soft fills.
     Taupe        #C2A68D  - supporting neutral, charts.
     Cream        #F5EFE6  - page canvas. Never pure white.
     Ink          #1F2A26  - all body text. Never black.

   Values are HSL triplets consumed as hsl(var(--token)) so alpha can be
   applied inline as hsl(var(--token) / 0.12).
   ============================================================ */

:root {
  /* -- surfaces & ink -- */
  --background: 36 42.8% 93.1%;      /* cream #F5EFE6 */
  --foreground: 158.1 15.1% 14.3%;   /* ink #1F2A26 */
  --card: 0 0% 100%;                 /* white cards lift off the cream canvas */
  --card-foreground: 158.1 15.1% 14.3%;
  --popover: 0 0% 100%;
  --popover-foreground: 158.1 15.1% 14.3%;
  --primary: 163.8 12.3% 41.6%;      /* forest #5D7770 - white on this is 4.8:1 (AA) */
  --primary-foreground: 0 0% 100%;
  --secondary: 150 20% 93%;          /* forest-sage tint: active nav, secondary buttons */
  --secondary-foreground: 158.1 15.1% 14.3%;
  --muted: 36 16% 87%;
  --muted-foreground: 163 12% 36%;   /* forest-family secondary text, 5.6:1 on cream */
  --accent: 150 20% 93%;
  --accent-foreground: 158.1 15.1% 14.3%;
  --destructive: 2 68% 44%;
  --destructive-foreground: 0 0% 100%;
  --border: 36 16% 87%;
  --input: 36 16% 87%;
  --ring: 163.8 12.3% 41.6%;
  --overlay: 158 15% 10%;

  /* -- named brand neutrals -- */
  --ink-strong: 158.1 15.1% 14.3%;
  --sage: 104.5 16.8% 68.4%;         /* #A8BCA1 */
  --taupe: 28.3 30.3% 65.7%;         /* #C2A68D */
  --mist: 150 20% 93%;

  /* -- semantic -- */
  --success: 142 45% 28%;
  --success-tint: 142 45% 28% / 0.12;
  --warning: 38 92% 36%;
  --warning-tint: 45 100% 51% / 0.14;
  --info: 200 55% 34%;
  --info-tint: 200 55% 34% / 0.10;
  --destructive-tint: 2 68% 44% / 0.10;

  /* -- domain semantics (risk / influence) -- */
  --risk-high: 2 68% 48%;
  --risk-medium: 38 92% 45%;
  --risk-low: 142 45% 34%;
  --influence-high: 163.8 25% 38%;
  --influence-mid: 200 45% 45%;
  --influence-low: 28.3 25% 55%;

  /* -- corporate brand layer --
     Salmon is the logo dot: punctuation, never a working accent. It is a
     light coral, so white text on it fails contrast (2.7:1) - anything
     filled with salmon takes ink text via --brand-salmon-foreground (5.5:1). */
  --brand-forest: 163.8 12.3% 41.6%;
  --brand-salmon: 10.5 69.8% 66.3%;
  --brand-salmon-tint: 10.5 69.8% 66.3% / 0.18;
  --brand-salmon-foreground: 158.1 15.1% 14.3%;
  --brand-amber: 41 90% 51%;         /* machine/preview signal - not an FA brand colour */

  /* -- charts -- */
  --chart-1: 163.8 12.3% 41.6%;
  --chart-2: 104.5 16.8% 68.4%;
  --chart-3: 10.5 69.8% 66.3%;
  --chart-4: 28.3 30.3% 65.7%;
  --chart-5: 163 12% 36%;
  --chart-track: 36 16% 87%;

  /* -- sidebar -- */
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 158.1 15.1% 14.3%;
  --sidebar-accent: 150 20% 93%;
  --sidebar-border: 36 16% 87%;

  /* -- typography --
     FA is a single-family brand: Outfit SemiBold for headings, Regular for
     body. No serif display face - display and sans are deliberately equal. */
  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  --tracking-tight: -0.4px;
  --tracking-button: 0.2px;
  --tracking-eyebrow: 0.5px;

  /* -- shape -- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* -- elevation (ink-tinted, hairline-first) -- */
  --shadow-sm: 0 1px 3px 0 hsl(158.1 15.1% 14.3% / 0.08);
  --shadow-md: 0 4px 12px -2px hsl(158.1 15.1% 14.3% / 0.10), 0 2px 4px -2px hsl(158.1 15.1% 14.3% / 0.06);
  --shadow-lg: 0 12px 32px -8px hsl(158.1 15.1% 14.3% / 0.16), 0 4px 8px -4px hsl(158.1 15.1% 14.3% / 0.08);

  /* -- motion -- */
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 300ms;
  --ease-default: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* -- z-index -- */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 200;
  --z-toast: 300;
}

.dark {
  --background: 158 15% 11%;
  --foreground: 36 42.8% 93.1%;
  --card: 158 15% 14%;
  --card-foreground: 36 42.8% 93.1%;
  --popover: 158 15% 14%;
  --popover-foreground: 36 42.8% 93.1%;
  --primary: 104.5 16.8% 68.4%;      /* sage carries primary in the dark */
  --primary-foreground: 158 15% 11%;
  --secondary: 158 15% 19%;
  --secondary-foreground: 36 42.8% 93.1%;
  --muted: 158 15% 19%;
  --muted-foreground: 104.5 16.8% 68.4%;
  --accent: 158 15% 19%;
  --accent-foreground: 36 42.8% 93.1%;
  --destructive: 2 60% 50%;
  --destructive-foreground: 36 42.8% 93.1%;
  --border: 158 15% 20%;
  --input: 158 15% 20%;
  --ring: 104.5 16.8% 68.4%;
  --overlay: 0 0% 0%;

  --ink-strong: 36 42.8% 93.1%;
  --sage: 104.5 20% 74%;
  --taupe: 28.3 30% 70%;
  --mist: 158 15% 19%;

  --success: 142 45% 55%;
  --success-tint: 142 45% 40% / 0.22;
  --warning: 45 100% 62%;
  --warning-tint: 45 100% 51% / 0.20;
  --info: 200 60% 62%;
  --info-tint: 200 55% 45% / 0.20;
  --destructive-tint: 2 68% 50% / 0.20;

  --risk-high: 2 70% 62%;
  --risk-medium: 45 100% 62%;
  --risk-low: 142 45% 55%;
  --influence-high: 163.8 25% 62%;
  --influence-mid: 200 50% 62%;
  --influence-low: 28.3 30% 65%;

  --brand-forest: 163.8 18% 60%;
  --brand-salmon: 10.5 60% 62%;
  --brand-salmon-tint: 10.5 69.8% 62% / 0.22;
  --brand-salmon-foreground: 158 15% 11%;
  --brand-amber: 41 90% 60%;

  --chart-1: 104.5 16.8% 68.4%;
  --chart-2: 163.8 18% 60%;
  --chart-3: 10.5 60% 62%;
  --chart-4: 28.3 30% 70%;
  --chart-5: 36 20% 78%;
  --chart-track: 158 15% 22%;

  --sidebar-background: 158 15% 9%;
  --sidebar-foreground: 36 42.8% 93.1%;
  --sidebar-accent: 158 15% 17%;
  --sidebar-border: 158 15% 17%;

  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.30);
  --shadow-md: 0 4px 12px -2px hsl(0 0% 0% / 0.36), 0 2px 4px -2px hsl(0 0% 0% / 0.24);
  --shadow-lg: 0 12px 32px -8px hsl(0 0% 0% / 0.48), 0 4px 8px -4px hsl(0 0% 0% / 0.30);
}