/* Safety Trust design tokens.
   The colours are Fluix's own palette, taken as-is from their design tokens:
   nine neutral greys carry almost everything, the petrol frames the app,
   teal marks what you act on (buttons, links, carets, action icons), yellow
   marks what is selected or focused, lime is the brand signal, and the
   status families (success, accent, warning, destructive, primary blue)
   each come as a light background, a vivid mark and a dark text tone.
   Charts use Fluix's data palette: green for one series, then blue, orange,
   yellow. One "frame" surface (sidebar + top bar + footer) holds an inset
   content panel; both follow the light / dark theme. */

:root {
  /* ── Fluix palette (raw values) ─────────────────────────── */
  --fx-neutral-1: #F4F4F4;  --fx-neutral-2: #E8E8E8;  --fx-neutral-3: #D1D1D1;
  --fx-neutral-4: #BABABA;  --fx-neutral-5: #8C8C8C;  --fx-neutral-6: #5F5F5F;
  --fx-neutral-7: #484848;  --fx-neutral-8: #313131;  --fx-neutral-9: #1A1A1A;
  --fx-petrol: #142828;     --fx-petrol-2: #264242;   --fx-petrol-3: #353D3D;
  --fx-teal: #0A9696;       --fx-teal-10: #E7F4F4;    --fx-teal-20: #CEEAEA;  --fx-teal-30: #9DD5D5;  --fx-teal-light: #CEEDED;
  --fx-lime: #EBFA00;
  --fx-blue-1: #EBF5FF;  --fx-blue-2: #CCE5FF;  --fx-blue-3: #8FC7FF;  --fx-blue-4: #1F8FFF;
  --fx-blue-5: #006BD6;  --fx-blue-6: #003B75;  --fx-blue-7: #002447;
  --fx-slate-1: #F2F5F7;  --fx-slate-2: #DFE5EC;  --fx-slate-3: #AFBFCF;  --fx-slate-4: #738FAB;
  --fx-slate-5: #3D5266;  --fx-slate-6: #263340;  --fx-slate-7: #171F26;
  --fx-success-1: #E5FFEB;  --fx-success-2: #00A824;  --fx-success-3: #006616;
  --fx-accent-1: #FFF6DB;   --fx-accent-2: #FFBF00;   --fx-accent-3: #614900;
  --fx-minor-1: #FEF2EC;    --fx-minor-2: #F2610D;    --fx-minor-3: #612705;
  --fx-danger-1: #FCEEEE;   --fx-danger-2: #D92626;   --fx-danger-3: #570F0F;
  --fx-service-1: #F4F1F8;  --fx-service-2: #7B53AC;  --fx-service-3: #312145;
  --fx-vinous-1: #FAEFF1;   --fx-vinous-2: #C63955;   --fx-vinous-3: #4F1722;
  /* data palette (charts) */
  --fx-data-green: #2AAC80;  --fx-data-blue: #33AFEE;  --fx-data-orange: #FF8A20;  --fx-data-yellow: #FEC30D;

  /* ── Roles ──────────────────────────────────────────────── */
  /* Brand */
  --st-forest-900: #0d1c1c;
  --st-forest-800: var(--fx-petrol);
  --st-forest-700: var(--fx-petrol-2);
  --st-forest-600: var(--fx-petrol-2);
  --st-forest-500: var(--fx-teal);
  --st-forest-300: var(--fx-teal-light);
  --st-forest-100: var(--fx-teal-10);

  /* Frame (sidebar, top bar, footer) */
  --st-frame: var(--fx-petrol);
  --st-frame-text: #FFFFFF;
  --st-frame-muted: var(--fx-neutral-4);
  --st-frame-faint: var(--fx-neutral-5);
  --st-frame-hover: rgba(255, 255, 255, .06);
  --st-frame-active: rgba(255, 255, 255, .13);
  --st-frame-accent: var(--fx-lime);          /* brand signal: mark, active menu icon */

  /* Content panel and surfaces */
  --st-bg: var(--fx-neutral-1);
  --st-surface: #FFFFFF;
  --st-surface-raised: #FFFFFF;
  --st-surface-sunken: var(--fx-neutral-1);
  --st-surface-head: var(--fx-neutral-1);     /* table headers, card headers */
  --st-border: var(--fx-neutral-2);
  --st-border-strong: var(--fx-neutral-4);
  --st-text: var(--fx-neutral-9);
  --st-text-muted: var(--fx-neutral-7);
  --st-text-faint: var(--fx-neutral-5);
  --st-accent: var(--fx-teal);                /* actions: primary buttons, links, carets */
  --st-accent-strong: #087F7F;
  --st-accent-text: var(--fx-teal);
  --st-accent-soft: var(--fx-teal-10);
  --st-on-accent: #FFFFFF;
  --st-selected: var(--fx-accent-1);          /* selected / focused: Fluix's yellow */
  --st-selected-border: #F5C242;
  --st-data: var(--fx-data-green);            /* charts, progress */
  --st-data-strong: #1F8F69;
  --st-axis: var(--fx-neutral-5);
  --st-tip: var(--fx-neutral-8);              /* chart tooltip */
  --st-tip-text: #FFFFFF;
  --st-tip-muted: #BDBDBD;
  --st-hover-band: #F7F7F7;                   /* column behind the hovered chart mark */
  --st-focus: var(--fx-teal);

  /* Signals: light background, vivid mark, dark text */
  --st-ok: var(--fx-success-2);
  --st-ok-bg: var(--fx-success-1);
  --st-ok-text: var(--fx-success-3);
  --st-info: var(--fx-blue-4);
  --st-info-bg: var(--fx-blue-1);
  --st-info-text: var(--fx-blue-6);
  --st-warn: var(--fx-accent-2);
  --st-warn-bg: var(--fx-accent-1);
  --st-warn-text: var(--fx-accent-3);
  --st-danger: var(--fx-danger-2);
  --st-danger-bg: var(--fx-danger-1);
  --st-danger-text: var(--fx-danger-3);

  /* Severity 1..4: grey, yellow, orange, red (Fluix's neutral, accent, minor, destructive) */
  --st-sev-1: var(--fx-neutral-5);
  --st-sev-2: var(--fx-accent-2);
  --st-sev-3: var(--fx-minor-2);
  --st-sev-4: var(--fx-danger-2);

  /* Layout */
  --st-sidebar-width: 232px;
  --st-sidebar-collapsed: 60px;
  --st-topbar-height: 52px;
  --st-bottomnav-height: 60px;

  /* Type: compact scale */
  --st-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --st-text-xs: 0.6875rem;   /* 11px */
  --st-text-sm: 0.78125rem;  /* 12.5px */
  --st-text-md: 0.875rem;    /* 14px */
  --st-text-lg: 0.96875rem;  /* 15.5px */
  --st-text-xl: 1.125rem;    /* 18px */
  --st-text-2xl: 1.375rem;   /* 22px */
  --st-text-3xl: 1.625rem;   /* 26px */

  /* Shape & depth: Fluix's shadows, petrol at 8% */
  --st-radius-sm: 4px;
  --st-radius: 8px;                    /* cards, menus, dialogs */
  --st-radius-lg: 10px;
  --st-shadow-sm: 0 1px 3px rgba(20, 40, 40, .08);    /* cards */
  --st-shadow: 0 2px 8px rgba(20, 40, 40, .08);       /* "rise" */
  --st-shadow-lg: 0 8px 16px rgba(20, 40, 40, .08), 0 0 0 1px rgba(20, 40, 40, .04);   /* "overlay": menus, dialogs */
  --st-ease: cubic-bezier(.2, .7, .2, 1);
  --st-fast: 120ms;
  --st-med: 200ms;

  color-scheme: light;
}

/* Dark: the same families, laid on Fluix's petrol */
[data-theme="dark"] {
  --st-frame: #0d1c1c;
  --st-frame-text: #FFFFFF;
  --st-frame-muted: var(--fx-neutral-4);
  --st-frame-faint: var(--fx-neutral-5);
  --st-frame-hover: rgba(255, 255, 255, .05);
  --st-frame-active: rgba(255, 255, 255, .11);
  --st-frame-accent: var(--fx-lime);

  --st-bg: var(--fx-petrol);
  --st-surface: #1B3232;
  --st-surface-raised: #213A3A;
  --st-surface-sunken: #102222;
  --st-surface-head: #182E2E;
  --st-border: var(--fx-petrol-2);
  --st-border-strong: #3A5656;
  --st-text: var(--fx-neutral-1);
  --st-text-muted: var(--fx-neutral-4);
  --st-text-faint: var(--fx-neutral-5);
  --st-accent: var(--fx-teal);
  --st-accent-strong: #0CB0B0;
  --st-accent-text: var(--fx-teal-light);
  --st-accent-soft: #123B3B;
  --st-on-accent: #FFFFFF;
  --st-selected: #3A3417;
  --st-selected-border: var(--fx-accent-2);
  --st-data: var(--fx-data-green);
  --st-data-strong: #3FC496;
  --st-axis: var(--fx-neutral-6);
  --st-tip: var(--fx-neutral-1);
  --st-tip-text: var(--fx-neutral-9);
  --st-tip-muted: var(--fx-neutral-6);
  --st-hover-band: #213A3A;
  --st-focus: var(--fx-teal-light);

  --st-ok: #3BC45A;
  --st-ok-bg: #133A20;
  --st-ok-text: #9BE6AD;
  --st-info: var(--fx-blue-3);
  --st-info-bg: #12304F;
  --st-info-text: var(--fx-blue-2);
  --st-warn: var(--fx-accent-2);
  --st-warn-bg: #3A3417;
  --st-warn-text: #FFE08A;
  --st-danger: #F06B6B;
  --st-danger-bg: #3E1A1A;
  --st-danger-text: #F8C4C4;

  --st-sev-1: var(--fx-neutral-4);
  --st-sev-2: var(--fx-accent-2);
  --st-sev-3: #FF8A4D;
  --st-sev-4: #F06B6B;

  --st-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --st-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  --st-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);

  color-scheme: dark;
}