/* =============================================================================
   Sentioshield Design System — token layer (canonical)
   -----------------------------------------------------------------------------
   The SINGLE SOURCE OF TRUTH for every colour, type step, space, radius,
   elevation and motion curve in the portal. Compiled from the platform-neutral
   tokens.json (Style Dictionary) — see the "Design tokens" section of the
   Sentioshield Design System. DO NOT hardcode a hex/size/radius anywhere in the
   portal; reference a var(--token) instead. If a value you need is missing,
   report it as a design-system gap — never invent one here.

   Brand rule: spend warmth on the lens, discipline on everything else.
   ========================================================================== */

:root {
  /* ---- Brand & surfaces (light) ---- */
  --ink: #0E1B2A;        --ink-soft: #2C3E50;   --mist: #5B6B7B;
  --paper: #F6F4EF;      --paper-2: #FBFAF7;    --surface: #FFFFFF;
  --line: #D9D3C7;       --line-strong: #C7BFB0;

  /* ---- Aegis (the lens) ---- */
  --aegis: #1F6F6B;      --aegis-deep: #134E4A; --aegis-glow: #74C7C0;
  --gold: #B8924A;

  /* ---- Severity ramp (brand primitive — the whole product inherits this) ---- */
  --sev-0: #1F6F6B;  --sev-1: #3E8A86;  --sev-2: #B8924A;
  --sev-3: #C2603A;  --sev-4: #A6324B;
  --sev-0-tint: #1F6F6B14; --sev-1-tint: #3E8A8614; --sev-2-tint: #B8924A1A;
  --sev-3-tint: #C2603A1A; --sev-4-tint: #A6324B1A;

  /* ---- Semantic ---- */
  --bg: var(--paper);          --text: var(--ink);
  --text-2: var(--ink-soft);   --text-3: var(--mist);
  --action: var(--aegis);      --action-hover: var(--aegis-deep);
  --focus-ring: 0 0 0 3px #1F6F6B59;
  /* Text/fills that sit ON a saturated or always-dark surface (teal/crimson button, ink toast,
     the dark auth aside). Theme-independent: they must stay light in BOTH light and dark. */
  --on-accent: #FBFAF7;        --on-accent-muted: #C8D4D2;
  --sev-4-hover: #8C2A3F;      /* darkened crimson for destructive :hover */
  --scrim: rgba(14,27,42,.42); /* modal/overlay backdrop */

  /* ---- Type ---- */
  --font-display: 'Spectral', Georgia, serif;
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --text-h1: 34px;  --text-h2: 28px;  --text-h3: 22px;
  --text-body: 15px; --text-small: 13.5px; --text-overline: 11px;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* ---- Radius ---- */
  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px;
  --radius-lg: 12px; --radius-pill: 999px;

  /* ---- Elevation (slate-tinted, diffuse — hairlines first) ---- */
  --elev-1: 0 1px 2px rgba(14,27,42,.06);
  --elev-2: 0 4px 14px rgba(14,27,42,.08);
  --elev-3: 0 16px 40px rgba(14,27,42,.16);

  /* ---- Motion ---- */
  --motion-micro: 120ms; --motion-base: 200ms; --motion-enter: 320ms;
  --ease-out: cubic-bezier(0.2,0,0,1);
  --ease-in-out: cubic-bezier(0.4,0,0.2,1);

  /* ---- Density (portal-owned, built on the DS density guidance) ----
     comfortable is the default; [data-density="compact"] overrides below. */
  --control-h: 36px;      /* desktop comfortable control height */
  --row-h: 52px;          /* default table row */
  --gutter: var(--space-6);
  --content-max: 1200px;  /* app & admin content width */
  --reading-max: 680px;   /* long-form */
}

/* Compact density for data-heavy views. Never below the DS minimums. */
[data-density="compact"] {
  --control-h: 32px;
  --row-h: 44px;
  --gutter: var(--space-4);
}

/* Relaxed density — for lower-stakes family surfaces. */
[data-density="relaxed"] {
  --control-h: 40px;
  --row-h: 64px;
  --gutter: var(--space-8);
}

[data-theme="dark"] {
  --bg: #0E1B2A;        --surface: #15293B;    --surface-2: #1B3346;
  --paper: #0E1B2A;     --paper-2: #15293B;
  --line: #2A3F52;      --line-strong: #3A5168;
  --text: #F1ECE3;      --text-2: #C8D4D2;     --text-3: #9FB8B5;
  --action: #2C7E78;    --action-hover: #74C7C0;
  --aegis: #74C7C0;     /* the lens brightens on dark */
  --sev-0: #3E8A86; --sev-2: #C9A35A; --sev-3: #D2734C; --sev-4: #C24B62;
  --sev-4-hover: #A83E54;      /* darker crimson for destructive :hover on dark */
  --scrim: rgba(0,0,0,.55);
  /* --on-accent / --on-accent-muted intentionally NOT overridden — they stay light on dark too. */
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}