/* =====================================================================
   IMMERSE NETWORK — design tokens
   The ONE place colours, geometry and the font stack live. Change a
   value here and the whole site recolours, including the swatch sheet
   in immerse-color-palette/index.html, which reads its captions back out of
   these same tokens.

   Loaded by every page BEFORE assets/css/styles.css. It is kept separate so
   the palette sheet can take the tokens without inheriting the site's
   component styles.
   ===================================================================== */

:root {
  /* brand */
  --brand: #08586f; /* primary deep teal — nav, buttons, headings */
  --brand-deep: #05404e; /* darker teal — hovers, footer               */
  --accent: #1e9fb3; /* logo aqua — kickers, markers, highlights   */
  --page: #ffffff; /* page background                            */
  --panel: #edf5f6; /* section / card background (soft aqua tint) */

  /* derived */
  --ink: #123b44;
  --body: #46555a;
  --muted: #7c888c;
  --line: rgba(15, 74, 84, 0.12);
  --shadow: 0 18px 50px -22px rgba(12, 50, 58, 0.38);
  --card-shadow: 0 10px 30px -18px rgba(12, 50, 58, 0.2);

  /* on dark backgrounds */
  --white: #ffffff;
  --glass: rgba(255, 255, 255, 0.12);
  --glass-line: rgba(255, 255, 255, 0.35);
  --on-brand: rgba(255, 255, 255, 0.92);
  --on-brand-dim: rgba(255, 255, 255, 0.62);
  --scrim: rgba(0, 0, 0, 0.35);

  /* geometry */
  --r: 20px;
  --r-lg: 26px;
  --r-pill: 100px;
  --font:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}