/* aripone.com theme: Navy (Rey, 2026-09-14: "We set the theme in one place ... so that if we decide
   to make an update it's easier to make that change").

   The one file that holds the site's colours. Change a value here and every page follows.
   Tokens only: custom properties inside these three blocks, nothing else. Layout, type and
   motion live in intaglio.css. Status colours (good, warn, bad) are not theme tokens: they live
   in intaglio.css so "At risk" reads as bad whatever this file says.
   Gate: `python3 tools/site/theme-check.py` (from the repo root) must pass, dark and light,
   before a change ships. */

:root {
  /* page, dark: the identity */
  --ground: #050608;
  --surface: #0D1020;
  --surface-2: #111735;
  --line: #262C44;
  --edge: #8C7A4E;
  --ink: #F2F0EA;
  --ink-2: #B6BBCC;
  --link: #E0B955;
  --detail: #E0B955;
  --accent: #E7C15F;
  --accent-hover: #F2D27E;
  --accent-ink: #0A0B10;
  --rosette: rgba(224, 185, 85, 0.34);
  --rosette-2: rgba(65, 105, 225, 0.30);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(242, 240, 234, 0.03);
  --shadow-2: 0 24px 60px -12px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.5);
  --btn-shadow: 0 14px 28px -10px rgba(3, 5, 14, 0.7), 0 1px 0 rgba(255, 245, 215, 0.5) inset;

  /* bands (header, hero, contact): the same in both themes */
  --band: #0D1020;
  --band-glow: rgba(47, 72, 170, 0.45);
  --band-shade: rgba(3, 5, 14, 0.55);
  --band-ink: #FFFFFF;
  --band-ink-2: #D6DEF8;
  --band-line: rgba(255, 255, 255, 0.24);
  --band-link: #F2D27E;
  --band-accent: #E7C15F;
  --band-accent-hover: #F2D27E;
  --band-accent-ink: #0A0B10;
  --band-detail: #E7C15F;
  --band-rosette: rgba(231, 193, 95, 0.40);
  --band-rosette-2: rgba(255, 255, 255, 0.14);

  /* the gold line where a band meets the page (Rey, 2026-09-14: "Add the gold line") */
  --band-edge: rgba(224, 185, 85, 0.75);
  --band-edge-2: rgba(224, 185, 85, 0.30);
  --rule-edge: rgba(224, 185, 85, 0.75);
  --rule-edge-2: rgba(224, 185, 85, 0.30);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #F4F6FB;
    --surface: #FFFFFF;
    --surface-2: #E4E9F6;
    --line: #C9D0E0;
    --edge: #8A7442;
    --ink: #0A0C14;
    --ink-2: #454B5E;
    --link: #1F45D6;
    --detail: #7A590A;
    --accent: #0D1020;
    --accent-hover: #1B2A55;
    --accent-ink: #FFFFFF;
    --rosette: rgba(122, 89, 10, 0.26);
    --rosette-2: rgba(31, 69, 214, 0.20);
    --shadow-1: 0 1px 2px rgba(10, 12, 20, 0.08), 0 0 0 1px rgba(10, 12, 20, 0.04);
    --shadow-2: 0 24px 50px -16px rgba(10, 12, 20, 0.24), 0 2px 6px rgba(10, 12, 20, 0.06);
    --btn-shadow: 0 14px 28px -10px rgba(3, 5, 14, 0.45), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
    --rule-edge: rgba(138, 116, 66, 0.85);
    --rule-edge-2: rgba(138, 116, 66, 0.35);
  }
}

:root[data-theme="light"] {
  --ground: #F4F6FB;
  --surface: #FFFFFF;
  --surface-2: #E4E9F6;
  --line: #C9D0E0;
  --edge: #8A7442;
  --ink: #0A0C14;
  --ink-2: #454B5E;
  --link: #1F45D6;
  --detail: #7A590A;
  --accent: #0D1020;
  --accent-hover: #1B2A55;
  --accent-ink: #FFFFFF;
  --rosette: rgba(122, 89, 10, 0.26);
  --rosette-2: rgba(31, 69, 214, 0.20);
  --shadow-1: 0 1px 2px rgba(10, 12, 20, 0.08), 0 0 0 1px rgba(10, 12, 20, 0.04);
  --shadow-2: 0 24px 50px -16px rgba(10, 12, 20, 0.24), 0 2px 6px rgba(10, 12, 20, 0.06);
  --btn-shadow: 0 14px 28px -10px rgba(3, 5, 14, 0.45), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  --rule-edge: rgba(138, 116, 66, 0.85);
  --rule-edge-2: rgba(138, 116, 66, 0.35);
}