/* Otterminds Design System tokens ("Deep sea", dark only).
   This is the only file that may hold raw colour values. Everything else,
   including tailwind.config.js, refers to these custom properties by name. */
:root {
  color-scheme: dark;

  /* Surfaces: stack dark → light */
  --deep-sea: #061c24;          /* page background, flat */
  --surface-low: #0e242d;       /* cards, sheets, solid bars */
  --surface-high: #152b33;      /* dialogs, menus */
  --surface-highest: #213840;   /* fields, chips, tonal buttons */

  /* Text */
  --text: #deeaed;              /* titles, body. Every surface */
  --text-muted: #afc4ca;        /* secondary text, inactive nav labels and icons */
  --text-subtle: #90a5ad;       /* timestamps, dates, counters, fine print */

  /* Lines */
  --outline: #69838c;           /* outlined buttons and chips */
  --outline-variant: #274049;   /* dividers, card edges, header edge (decorative) */
  --separator-subtle: rgba(39, 64, 73, 0.5);

  /* Action and selection */
  --otter-cyan: #3fd8f2;        /* primary fill, links, focus */
  --on-otter-cyan: #061c24;     /* label on otter-cyan (= deep-sea), 10.3:1 */
  --lagoon: #0c4955;            /* selected fill: nav indicator, tabs */
  --on-lagoon: #b8f0f9;         /* label on lagoon, 8.0:1 */

  /* Error (only if the site ever needs it) */
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #7a1f1a;
  --on-error-container: #ffdad6;

  /* Effects */
  --glass-tint: rgba(14, 36, 45, 0.8); /* surface-low at 0.8 */

  /* Opacity */
  --opacity-hover: 0.04;
  --opacity-pressed: 0.08;

  /* Spacing */
  --space-4: 4px;  --space-8: 8px;  --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px;

  /* Radius */
  --radius-8: 8px; --radius-12: 12px; --radius-16: 16px;
  --radius-24: 24px; --radius-full: 1000px;

  /* Type */
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Website-only, derived from the tokens above. Not in the design system yet. */
  --link-underline: color-mix(in srgb, var(--otter-cyan) 40%, transparent);
}