/* =====================================================================
   sylviewrobel.com — THEME TOKENS
   ---------------------------------------------------------------------
   This file is the single source of truth for the site's colors and is
   safe to regenerate from the dashboard Theme editor (sylvie.nwesource.com).
   index.html only ever references these var(--*) names — never hardcodes a
   color — so rewriting this file restyles the whole site.

   The dashboard editor controls the EDITABLE tokens below, one value per
   mode (Light column / Dark column). Everything under "Derived" is computed
   from --highlight automatically, so changing one highlight recolors every
   accent (headings, links, buttons, timeline dots, hero tint).
   ===================================================================== */

/* ---------- LIGHT MODE ---------- */
:root {
  /* EDITABLE — highlight / accent (the teal on headings, links, buttons) */
  --highlight: #1f9b96;

  /* EDITABLE — section backgrounds */
  --bg:        #ffffff;   /* page / odd sections        */
  --bg-alt:    #f4f8f8;   /* alternating even sections  */
  --card:      #ffffff;   /* cards, form panel, photo   */

  /* EDITABLE — text */
  --ink:       #20323a;   /* headings + body text       */
  --muted:     #5a6b72;   /* secondary / lead text      */
  --border:    #e2eceb;   /* hairlines, card borders    */

  /* Derived from --highlight (do not edit by hand) */
  --teal:       var(--highlight);
  --teal-dark:  color-mix(in srgb, var(--highlight) 80%, #000);
  --teal-light: color-mix(in srgb, var(--highlight) 12%, #fff);
  --shadow:     0 10px 30px color-mix(in srgb, var(--highlight) 14%, transparent);
  --hero-overlay: linear-gradient(135deg,
                    color-mix(in srgb, var(--highlight) 55%, transparent),
                    rgba(16, 40, 46, .48));
}

/* ---------- DARK MODE ---------- */
html[data-theme="dark"] {
  /* EDITABLE — highlight / accent */
  --highlight: #38c5bf;

  /* EDITABLE — section backgrounds */
  --bg:        #0f1a1e;
  --bg-alt:    #14242a;
  --card:      #16272d;

  /* EDITABLE — text */
  --ink:       #e8f1f1;
  --muted:     #9fb3b6;
  --border:    #234048;

  /* Derived from --highlight (do not edit by hand) */
  --teal:       var(--highlight);
  --teal-dark:  color-mix(in srgb, var(--highlight) 75%, #fff);
  --teal-light: color-mix(in srgb, var(--highlight) 16%, #000);
  --shadow:     0 10px 30px rgba(0, 0, 0, .35);
  --hero-overlay: linear-gradient(135deg,
                    color-mix(in srgb, var(--highlight) 40%, transparent),
                    rgba(5, 16, 20, .68));
}