/* â”€â”€â”€ Azul theme â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   Split out of site.css 2026-08-02. Everything here is scoped to
   [data-theme="azul"]; base styles stay in site.css.

   LOAD ORDER IS PART OF THE CONTRACT. _Layout links site.css, then every theme
   file, then themes/_shared.css. Theme rules carry an extra attribute selector,
   so they outrank base styles wherever they land - but do not reorder the links
   without re-reading _shared.css, which wins by POSITION rather than weight.

   The picker applies themes client-side with no reload (site.js), so every theme
   file ships on every page. Serving only the active theme would need the picker
   to fetch on demand first. */
/* Azul - porcelain azulejo page, deep cobalt chrome, mustard-tile secondary. */
[data-theme="azul"] {
    --bg: #f4f6f9;
    --bg2: #e9edf3;
    --bg3: #dde3ec;
    --surface: #d0d9e5;
    --border: #bfcad9;
    --border2: #a9b8cb;
    --text: #16202e;
    --text-mid: #47556a;
    --text-dim: #5b6a80;
    --amber: oklch(0.48 0.17 262);
    --amber-dim: oklch(0.40 0.13 262);
    --amber-bg: oklch(0.93 0.03 262);
    --cyan: #0e7a8a;
    --cyan-dim: rgba(14, 122, 138, 0.45);
    --heart: oklch(0.52 0.22 27);
    --nav-bg: #23368f;
    --nav-border: #1b2a70;
    --nav-fg: #ccd4f0;
    --nav-fg-dim: #a3aede;
    --nav-fg-strong: #f0f2fc;
    --nav-accent: #f2c14e;
    --nav-accent-dim: rgba(242, 193, 78, 0.5);
    --nav-accent-bg: rgba(255, 255, 255, 0.10);
    --nav-btn-border: rgba(204, 212, 240, 0.4);
    --footer-bg: #23368f;
    --footer-border: #1b2a70;
    --footer-fg: #ccd4f0;
    --footer-accent: #f2c14e;
}
