/* ============================================================
   michaelurquidi.com - Brand Tokens
   Palette B: Olive, Purple & Gold (locked)
   One source of truth for the site, the tools, and product covers.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---- Core palette (LIGHT) ---- */
  --bg:        #F7F4ED;  /* page background, soft warm white */
  --surface:   #EFEADF;  /* cards, panels, raised areas */
  --ink:       #2A2730;  /* primary text, near-charcoal with a purple cast */
  --muted:     #6B6759;  /* secondary text, captions, labels */
  --primary:   #74784C;  /* olive - primary brand, button/fill, nav */
  --primary-d: #5C6040;  /* olive pressed / hover-dark */
  --link:      #686C42;  /* olive deepened for text links, clears WCAG AA on bg and surface */
  --accent:    #6E5E80;  /* muted purple - the signature accent (text/small) */
  --accent-d:  #574A66;  /* purple pressed / hover-dark */
  --accent-surface: #6E5E80; /* purple as a panel/fill background */
  --gold:      #C2A04F;  /* gold - highlights, key CTAs, price tags */
  --gold-d:    #A8893E;  /* gold pressed / hover-dark */
  --border:    #D7D0BE;  /* hairlines, input borders, dividers */
  --border-s:  #C7BFA8;  /* stronger hairline for emphasis rules */

  /* ---- On-color text (accessible pairings) ---- */
  --on-primary: #F7F4ED;
  --on-accent:  #F7F4ED;
  --on-accent-surface: #F7F4ED;
  --on-gold:    #2A2730;

  /* ---- Type families ---- */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;     /* display */
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* body / UI */
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* labels, code, URLs */

  /* ---- Type scale (fluid) ---- */
  --fs-display: clamp(40px, 6.4vw, 78px);
  --fs-h1:      clamp(32px, 4.4vw, 52px);
  --fs-h2:      clamp(25px, 3vw, 36px);
  --fs-h3:      20px;
  --fs-body:    17px;
  --fs-small:   14.5px;
  --fs-label:   12px;   /* mono uppercase labels */

  /* ---- Rhythm ---- */
  --maxw: 1080px;
  --gutter: clamp(22px, 5vw, 56px);
  --radius: 12px;
  --radius-s: 8px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   DARK MODE
   A designed dark variant of Palette B, not an inversion.
   Warm near-black ground, light warm ink, brand colors
   lifted so olive, purple, and gold still read on dark.
   color-scheme above tells the browser we handle dark
   ourselves, which stops mobile browsers from applying
   their own broken auto-darkening.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #1B1A17;  /* warm near-black, slight olive cast */
    --surface:   #252320;  /* lifted warm panel */
    --ink:       #ECE7DA;  /* warm off-white, primary text */
    --muted:     #A29B86;  /* warm grey, secondary text */
    --primary:   #A0A56E;  /* olive lifted to read on dark */
    --primary-d: #B2B77E;  /* olive hover (lighter on dark) */
    --link:      #A0A56E;  /* dark olive link, already clears AA on dark bg */
    --accent:    #B7A8CB;  /* light pastel purple, the accent on dark */
    --accent-d:  #C9BCDA;  /* purple hover (lighter on dark) */
    --accent-surface: #4A3F59; /* deep muted purple panel ground */
    --gold:      #D2B466;  /* gold brightened for dark */
    --gold-d:    #C9AB60;  /* gold hover/secondary on dark */
    --border:    #34322B;  /* subtle warm hairline on dark */
    --border-s:  #46433A;  /* stronger hairline on dark */

    --on-primary: #1B1A17; /* dark text on the lifted olive button */
    --on-accent:  #1B1A17; /* dark text if accent is used as a fill */
    --on-accent-surface: #ECE7DA; /* light text on deep purple panel */
    --on-gold:    #1B1A17; /* dark text on gold button */
  }
}