/* ==========================================================================
   Anchor & Ace: THEME FILE. Every colour on the site comes from here.

   How it works
   - styles.css, main.js and the generated pages only ever use the ROLE names below
     (--bg, --accent, --bg-inverse ...). They never contain a hex value for the brand.
   - A theme is one block that gives every role a value.
   - The live theme is chosen by <html data-theme="...">.
       Change it for the whole site : edit THEME = "..." at the top of build_site.py and rebuild
       Try one in the browser       : add ?theme=teal to any page URL (nothing is saved)
   - To add a theme: copy a block, rename it, change the values, run check_theme.py.

   The accent contract (what a theme must respect)
   - --accent         the single signal colour: waterline, primary button, one word, status mark.
   - --on-accent      text on an --accent fill. Must reach 4.5:1.
   - --accent-ink     accent used AS TEXT on light surfaces. If --accent cannot reach 4.5:1 on --bg,
                      point this at --text (the accent then appears as lines and fills only).
   - --accent as text on --bg-inverse must reach 4.5:1 (it is used for one word and small labels).
   ========================================================================== */

/* ---- FLARE (default): marine depth, cool paper, one vermilion signal ---------- */
:root,
[data-theme="flare"] {
  /* surfaces */
  --bg: #F7F6F2;               /* page, paper */
  --bg-alt: #E4EBEC;           /* cards, segmented control (ice) */
  --bg-alt-hover: #D8E2E4;
  --bg-inverse: #0E1C24;       /* dark sections (marine) */
  --bg-inverse-2: #12262F;     /* oak sky */
  --bg-inverse-hover: #1B3340;
  --bg-deep: #08141A;          /* below the waterline, vignettes */
  --glow-1: #17313E;           /* hero highlight */
  --glow-2: #244B5D;           /* film card highlight */

  /* text */
  --text: #14181B;
  --text-muted: #5B6469;
  --on-dark: #F7F6F2;

  /* the signal */
  --accent: #FF5A36;
  --accent-hover: #FF7452;
  --on-accent: #0E1C24;
  --accent-ink: #14181B;       /* flare fails as text on paper, so none */
  --focus: #0E1C24;
  --focus-on-dark: #FF5A36;

  /* logo and illustration */
  --logo: #0E1C24;
  --illus: #E4EBEC;            /* oak roots, trunk, arrow */
  --crown-1: #E4EBEC;          /* oak crown, light to dark */
  --crown-2: #CFDCDF;
  --crown-3: #B9CBD0;
  --tip: #F7F6F2;             /* iceberg tip, lit side */
  --tip-shade: #DDE3E3;       /* iceberg tip, shaded side */
  --depth-1: #4C6A7B;          /* iceberg layers, near the surface to deep */
  --depth-2: #3B5766;
  --depth-3: #2A4350;
  --depth-4: #1C3340;
  --depth-dna: #F7F6F2;        /* the point: Brand DNA */
  --depth-dna-ink: #0E1C24;    /* the anchor drawn on it */

  --theme-color: #0E1C24;      /* browser chrome on mobile */
}

/* ---- TEAL: marine depth, cool paper, sea-glass signal (kept as an alternative) -- */
[data-theme="teal"] {
  --bg: #F5F7F6;
  --bg-alt: #E4E9E8;
  --bg-alt-hover: #D8DFDE;
  --bg-inverse: #0B1A22;
  --bg-inverse-2: #0F2530;
  --bg-inverse-hover: #1A3340;
  --bg-deep: #06121A;
  --glow-1: #123240;
  --glow-2: #1B4A58;

  --text: #12191B;
  --text-muted: #566268;
  --on-dark: #F5F7F6;

  --accent: #3FD0B5;
  --accent-hover: #62DCC6;
  --on-accent: #0B1A22;
  --accent-ink: #0B6E5F;
  --focus: #0B1A22;
  --focus-on-dark: #3FD0B5;

  --logo: #0B1A22;
  --illus: #E1EFEC;
  --crown-1: #E1EFEC;
  --crown-2: #C5DDD8;
  --crown-3: #A8CBC5;
  --tip: #F5F7F6;
  --tip-shade: #DAE2E1;
  --depth-1: #3F6B73;
  --depth-2: #305861;
  --depth-3: #21454D;
  --depth-4: #153038;
  --depth-dna: #F5F7F6;
  --depth-dna-ink: #0B1A22;

  --theme-color: #0B1A22;
}

/* ---- HERITAGE: the original bone, sand and brass (kept for reference) ------------ */
[data-theme="heritage"] {
  --bg: #F3EFE8;
  --bg-alt: #E9E3D6;
  --bg-alt-hover: #DFD7C5;
  --bg-inverse: #0E1C24;
  --bg-inverse-2: #12262F;
  --bg-inverse-hover: #1B3340;
  --bg-deep: #08141A;
  --glow-1: #17313E;
  --glow-2: #244B5D;

  --text: #14181B;
  --text-muted: #5B6469;
  --on-dark: #F3EFE8;

  --accent: #C9A35E;
  --accent-hover: #D6B377;
  --on-accent: #0E1C24;
  --accent-ink: #7A5B1F;
  --focus: #7A5B1F;
  --focus-on-dark: #C9A35E;

  --logo: #0E1C24;
  --illus: #E9E3D6;
  --crown-1: #D2AE6E;
  --crown-2: #C9A35E;
  --crown-3: #BF9852;
  --tip: #F3EFE8;
  --tip-shade: #DDD6C8;
  --depth-1: #2E6178;
  --depth-2: #275469;
  --depth-3: #20475A;
  --depth-4: #193A4A;
  --depth-dna: #C9A35E;
  --depth-dna-ink: #0E1C24;

  --theme-color: #0E1C24;
}