/* ============================================================================
   Brand design tokens — copied verbatim from the brand spec (colours/tokens.css),
   plus a semantic theme layer (light default + dark override) used across the site.
   ========================================================================== */

:root {
  /* --- Brand palette (raw) --- */
  /* Primary — Blues */
  --navy:      #0F2147;  /* Navy Blazer  — deep, iconic, trust */
  --denim:     #80B3D2;  /* Washed Denim — clearer denim blue */
  --wool:      #F5F2ED;  /* Wool Cream   — light, clean, faint warmth */
  /* Accent — Reds */
  --vermilion: #B5252B;  /* Chinese Red  — rich, traditional */
  --salmon:    #F9D2C2;  /* Light Salmon — pale pink-orange */
  /* Natural — Green & Brown */
  --leaf:      #3D7A55;  /* Leaf Green   — alive, foliage */
  --caramel:   #955231;  /* Caramel      — saturated red-brown */
  /* Text */
  --ink:       #111111;
  --mute:      #6E6E6E;

  /* Typography */
  --font-sans: "Calibri", "Carlito", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

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

  /* Border radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  150ms;

  /* --- Semantic layer: LIGHT (default) --- */
  --bg:           var(--wool);
  --surface:      #ffffff;
  --surface-2:    #efece5;          /* subtle raised / code background */
  --text:         var(--ink);
  --text-muted:   var(--mute);
  --heading:      var(--navy);
  --border:       rgba(15, 33, 71, 0.12);
  --border-strong:rgba(15, 33, 71, 0.22);
  --link:         var(--navy);
  --link-hover:   var(--vermilion);
  --accent:       var(--vermilion);
  --accent-soft:  rgba(181, 37, 43, 0.10);

  --btn-bg:       var(--navy);
  --btn-fg:       var(--wool);
  --btn-bg-hover: #16305f;

  --code-bg:      #0f2147;          /* install block: navy lacquer in both themes */
  --code-fg:      #eef2f8;
  --code-border:  rgba(128, 179, 210, 0.45);

  --shadow:       0 1px 0 rgba(15,33,71,0.05), 0 8px 24px rgba(15,33,71,0.06);
}

/* --- Semantic layer: DARK --- */
[data-theme="dark"] {
  --bg:           #0A1628;          /* deep navy */
  --surface:      #0F2147;          /* navy as raised surface */
  --surface-2:    #15294f;
  --text:         #ECE7D9;
  --text-muted:   #9FB2C9;
  --heading:      #F5F2ED;
  --border:       rgba(245, 242, 237, 0.14);
  --border-strong:rgba(245, 242, 237, 0.26);
  --link:         var(--denim);
  --link-hover:   #aacbe2;
  --accent:       #E2575C;
  --accent-soft:  rgba(226, 87, 92, 0.14);

  --btn-bg:       var(--denim);
  --btn-fg:       #0A1628;
  --btn-bg-hover: #9ac4dd;

  --code-bg:      #060f1d;
  --code-fg:      #eef2f8;
  --code-border:  rgba(128, 179, 210, 0.30);

  --shadow:       0 1px 0 rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.45);
}