/* Design tokens: every colour, radius, shadow and spacing value used by the site. Components must use these, not raw values.
   Colours derive from the logo (teal mark, navy wordmark). Light is the default; the dark set replaces it under [data-theme="dark"],
   which theme.js always sets (saved choice first, then the system setting). */

:root {
  /* ---- type and layout ---- */
  --font: "Figtree", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);

  /* ---- spacing scale (4 px base) ---- */
  --space-1: .25rem;   /*  4 */
  --space-2: .5rem;    /*  8 */
  --space-3: .75rem;   /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* ---- radii ---- */
  --radius-input: 14px;
  --radius-note: 16px;
  --radius-tile: 18px;
  --radius-panel: 24px;
  --radius-card: 26px;
  --radius-pill: 999px;

  /* ---- surfaces and text ---- */
  --bg: #f5f9f8;
  --surface: #ffffff;
  --surface-2: #e9f1f0;
  --ink: #16294a;
  --muted: #536578;
  --line: #d3dfdf;

  /* ---- brand ---- */
  --teal: #4c9f88;
  --teal-ink: #27705d;          /* teal that passes AA as text on --bg */
  --accent: #27705d;            /* button and link fill */
  --accent-hover: #1d5b4b;
  --on-accent: #ffffff;
  --mark-wave: #599987;         /* the logo mark, same on light and dark */
  --focus: #1c6fd1;

  /* ---- signal colours: used by the hero animation only; deliberately not tied to any named signal ---- */
  --signal-1: #1f8f73;
  --signal-2: #c8742a;
  --signal-3: #4a6fd1;

  /* ---- status colours (alerts, badges, form validation) ---- */
  --success: #1c6e45;  --success-bg: #e3f3ea;
  --danger: #b3261e;   --danger-bg: #fbe9e7;
  --warning: #84560a;  --warning-bg: #fcf0d5;
  --info: #1b5a93;     --info-bg: #e2eefa;

  /* ---- raised cards (soft plate, icon tile, inset note) ---- */
  --card-bg: linear-gradient(180deg, #ffffff 0%, #ecf4f3 100%);
  --card-shadow: 0 18px 30px -18px rgba(16, 38, 52, .38), inset 2px 3px 4px 0 rgba(255, 255, 255, .85), inset -3px -5px 9px 0 rgba(16, 38, 52, .08);
  --card-well: inset 4px 5px 11px -3px rgba(16, 38, 52, .17), inset -2px -3px 6px 0 rgba(255, 255, 255, .9);
  --card-sunk: #e2ebea;
  --tile-shadow: 0 12px 18px -12px rgba(16, 38, 52, .5), inset 2px 2px 3px rgba(255, 255, 255, .7), inset -3px -4px 7px rgba(16, 38, 52, .16);
  --tile-teal: linear-gradient(155deg, #b0e6d2, #5cc4a5);  --tile-teal-ink: #12332a;
  --tile-blue: linear-gradient(155deg, #d3e3ff, #7fa8ff);  --tile-blue-ink: #16264d;
  --tile-amber: linear-gradient(155deg, #fadcb0, #f0a85a); --tile-amber-ink: #3a2308;

  /* ---- floating bar and menu ---- */
  --shadow-bar: 0 10px 30px -18px rgba(10, 21, 34, .45);
  --shadow-menu: 0 18px 40px -20px rgba(10, 21, 34, .55);
  --shadow-lift: 0 14px 24px -10px rgba(16, 38, 52, .45), 0 3px 6px rgba(16, 38, 52, .12);   /* an item that rises on hover */
  --shadow-btn: 0 12px 18px -10px rgba(16, 38, 52, .5), 0 3px 5px rgba(16, 38, 52, .14);   /* a button that pops up on hover */
  --surface-lift: #ffffff;      /* tint of a glass item that rises on hover (see .site-menu__link) */
  --glass-lift-mix: 58%;        /* how opaque that tint is */
  --glass-edge: rgba(255, 255, 255, .95);   /* bright rim and top highlight of a raised glass item */

  /* ---- glass: frosted see-through surfaces (see components/glass.css). Amounts only; the colour is --surface, so both themes work ---- */
  --glass-bar-mix: 40%;    --glass-bar-blur: 5px;
  --glass-panel-mix: 46%;  --glass-panel-blur: 6px;
  --glass-saturate: 1.4;

  /* ---- call-to-action band ---- */
  --cta-bg: #1c3557;
  --cta-ink: #ffffff;
  --cta-btn-bg: #ffffff;
  --cta-btn-bg-hover: #e8f1ef;
  --cta-btn-ink: #1c3557;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0a1522;
  --surface: #112133;
  --surface-2: #162a40;
  --ink: #e7eff2;
  --muted: #9aacbb;
  --line: #22384d;

  --teal: #5cc4a5;
  --teal-ink: #78d6b9;
  --accent: #5cc4a5;
  --accent-hover: #78d6b9;
  --on-accent: #06251c;
  --focus: #7db4ff;

  --signal-1: #5cc4a5;
  --signal-2: #f0a85a;
  --signal-3: #7fa8ff;

  --success: #6fd3a0;  --success-bg: #12332a;
  --danger: #ff9f96;   --danger-bg: #3a1a1c;
  --warning: #f2c05f;  --warning-bg: #33290f;
  --info: #8cc4ff;     --info-bg: #112a44;

  --card-bg: linear-gradient(180deg, #1e3c5b 0%, #12273f 100%);
  --card-shadow: 0 18px 30px -18px rgba(0, 0, 0, .75), inset 1px 2px 3px 0 rgba(255, 255, 255, .08), inset -3px -5px 9px 0 rgba(0, 0, 0, .3);
  --card-well: inset 4px 5px 11px -3px rgba(0, 0, 0, .55), inset -2px -3px 6px 0 rgba(255, 255, 255, .04);
  --card-sunk: #0d1c2d;
  --tile-shadow: 0 12px 18px -12px rgba(0, 0, 0, .7), inset 2px 2px 3px rgba(255, 255, 255, .35), inset -3px -4px 7px rgba(0, 0, 0, .22);

  --shadow-lift: 0 14px 24px -10px rgba(0, 0, 0, .75), 0 3px 6px rgba(0, 0, 0, .4);
  --shadow-btn: 0 12px 18px -10px rgba(0, 0, 0, .8), 0 3px 5px rgba(0, 0, 0, .4);
  --surface-lift: #3a5f86;
  --glass-lift-mix: 42%;
  --glass-edge: rgba(255, 255, 255, .26);

  --cta-bg: #0e2236;
  --cta-ink: #e7eff2;
  --cta-btn-bg: #5cc4a5;
  --cta-btn-bg-hover: #78d6b9;
  --cta-btn-ink: #06251c;

  color-scheme: dark;
}