/* =============================================================================
   C.L. Stegall — Theme tokens  (LOCKED palette, 2026-07-26)
   -----------------------------------------------------------------------------
   TO RESKIN THE WHOLE SITE: edit only the five hexes under "BRAND PALETTE".
   Every color on the site points back to these through the semantic roles
   below, so one change here updates everything at once.

   Source palette: ColorScheme_02 (Coolors). Teal + gold on charcoal:
   a calm, cold-edged, atmospheric read for dark fiction.
   ============================================================================= */

:root {
  /* ---- BRAND PALETTE — edit these five to change the look ----------------- */
  --charcoal: #32373B;   /* deepest base / page background            */
  --teal:     #3891A6;   /* primary accent (buttons, links)           */
  --gold:     #AF9164;   /* secondary accent (tags, emphasis)         */
  --mint:     #B5FFE9;   /* bright highlight (link hover, glow)        */
  --white:    #FEFEFF;   /* primary text                              */

  /* ---- SUPPORT NEUTRALS (derived; usually leave alone) ------------------- */
  --surface-raw: #3C4349;  /* charcoal lifted one step for cards       */
  --muted-raw:   #98A2A6;  /* cool gray for secondary text             */
  --ink:         #23272A;  /* below charcoal for deep overlays         */

  /* ---- SEMANTIC ROLES (what the components actually reference) ----------- */
  /* Surfaces */
  --color-bg:          var(--charcoal);
  --color-bg-deep:     var(--ink);
  --color-surface:     var(--surface-raw);

  /* Text */
  --color-text:        var(--white);
  --color-text-muted:  var(--muted-raw);

  /* Lines */
  --color-border:      rgba(152, 162, 166, 0.20);

  /* Links */
  --color-link:        var(--teal);
  --color-link-hover:  var(--mint);

  /* Actions (buttons) */
  --color-accent:        var(--teal);
  --color-accent-hover:  #2F7C8F;        /* teal, one step deeper */
  --color-on-accent:     #12181B;        /* deep ink text on teal — passes AA */

  /* Secondary accent (warm) */
  --color-accent-2:      var(--gold);
  --color-on-accent-2:   #1a1408;

  /* Focus + overlays */
  --color-focus:       var(--teal);
  --color-overlay:     rgba(35, 39, 42, 0.62);
}

/* -----------------------------------------------------------------------------
   Notes
   - Teal is the primary action color; gold is the warm secondary (tags, quote
     rules, emphasis). Mint is a bright hover/highlight, used sparingly.
   - Button text is dark ink on teal, which clears contrast better than white.
   - This palette also carries a true white, so a lighter theme is possible
     later if ever wanted; the roles above keep the site dark for now.
   ----------------------------------------------------------------------------- */