/* Dolphin Tank design tokens.
   Direction: Y2K chrome over deep water. Ice-blue and silver, one acid-lime signal, amber for a rejection.
   Light is the default; the dark variant is deep-sea blue-black, never violet.
   Theme resolution: data-theme="light|dark" on <html> wins, otherwise prefers-color-scheme. */

@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-4-var.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:light;

  /* surface hierarchy: canvas < surface-1 < surface-2 (recessed) < elevated < overlay */
  --canvas:#EFEBDF;
  --surface-1:#F7F4EC;
  --surface-2:#E6E1D3;
  --elevated:#FCFAF5;
  --overlay:#F7F4EC;
  --scrim:rgba(15,34,48,.45);

  /* text */
  --text-primary:#0F2230;
  --text-secondary:#364A58;
  --text-muted:#4A5E6A;
  --text-on-accent:#FFFFFF;

  /* one accent: sonar teal */
  --accent:#1546C8;
  --accent-strong:#0F2F8F;
  --accent-soft:#DCE6FB;

  /* state colours, used for state only */
  --success:#1D6A3A;
  --success-soft:#D8E8D9;
  --warning:#7F5200;
  --warning-soft:#EEE0BF;
  --danger:#A0281D;
  --danger-soft:#F0D8D2;
  --info:#1B5887;
  --info-soft:#D6E2EC;

  /* borders */
  --border:#BDB6A2;
  --border-subtle:#D6D0BF;
  --border-strong:#0F2230;
  --border-focus:#1546C8;
  --border-error:#A0281D;

  /* chart */
  --chart-bar:#1546C8;
  --chart-gap:#DDD7C6;
  --chart-grid:#CFC9B6;

  /* type families */
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;

  /* type scale */
  --fs-display:clamp(2.25rem,1rem + 3.4vw,3.6rem);
  --fs-h1:clamp(2rem,1.4rem + 2.4vw,3rem);
  --fs-h2:clamp(1.6rem,1.25rem + 1.4vw,2.25rem);
  --fs-h3:1.25rem;
  --fs-body:1.0625rem;
  --fs-body-small:.9375rem;
  --fs-label:.75rem;
  --fs-caption:.8125rem;
  --fs-code:.875rem;
  --lh-display:1.04;
  --lh-heading:1.18;
  --lh-body:1.6;
  --lh-tight:1.4;
  --tracking-label:.09em;

  /* spacing scale (4 px base) */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4.5rem;
  --space-9:7rem;

  /* radius scale: 2 px controls, 4 px panels, 8 px media, pill only for small status badges */
  --radius-control:2px;
  --radius-panel:4px;
  --radius-media:8px;
  --radius-pill:999px;

  /* layout */
  --rail-w:15.5rem;
  --measure:40rem;
  --sheet:64rem;
  --gutter:clamp(1rem,4vw,2.5rem);
  --target:44px;
  --focus-ring:2px solid var(--border-focus);
  --focus-offset:3px;
}

/* dark variant: deep-sea blue-black */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#05101C;
    --surface-1:#0A1A2B;
    --surface-2:#0F2438;
    --elevated:#16314B;
    --overlay:#081624;
    --scrim:rgba(2,8,12,.7);
    --text-primary:#EAF3FF;
    --text-secondary:#BCCCDE;
    --text-muted:#95ABC2;
    --text-on-accent:#06140A;
    --accent:#B8FF3C;
    --accent-strong:#A9DBFF;
    --accent-soft:#1B3A12;
    --success:#6CCB96;
    --success-soft:#143B27;
    --warning:#E3B655;
    --warning-soft:#3F3011;
    --danger:#F29488;
    --danger-soft:#451E19;
    --info:#86BCEB;
    --info-soft:#14344E;
    --border:#2E4A66;
    --border-subtle:#1B3350;
    --border-strong:#8FB0D0;
    --border-focus:#B8FF3C;
    --border-error:#F29488;
    --chart-bar:#86CCFF;
    --chart-gap:#0C1D30;
    --chart-grid:#1B3350;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#05101C;
  --surface-1:#0A1A2B;
  --surface-2:#0F2438;
  --elevated:#16314B;
  --overlay:#081624;
  --scrim:rgba(2,8,12,.7);
  --text-primary:#EAF3FF;
  --text-secondary:#BCCCDE;
  --text-muted:#95ABC2;
  --text-on-accent:#06140A;
  --accent:#B8FF3C;
  --accent-strong:#A9DBFF;
  --accent-soft:#1B3A12;
  --success:#6CCB96;
  --success-soft:#143B27;
  --warning:#E3B655;
  --warning-soft:#3F3011;
  --danger:#F29488;
  --danger-soft:#451E19;
  --info:#86BCEB;
  --info-soft:#14344E;
  --border:#2E4A66;
  --border-subtle:#1B3350;
  --border-strong:#8FB0D0;
  --border-focus:#B8FF3C;
  --border-error:#F29488;
  --chart-bar:#86CCFF;
  --chart-gap:#0C1D30;
  --chart-grid:#1B3350;
}