/* ==========================================================================
   Palmetto State Pixels - design tokens v2 (flat, warm, homey)
   Direction: a small well-made workshop, not a tech startup. Warm charcoal
   ground, cream type, brass as the one steady accent. NO glow, NO gradients,
   NO neon, square-ish corners. The light-show clips are the only bright thing
   on the page.

   Variable names are unchanged from v1 so existing CSS keeps working;
   glow/gradient tokens are kept but now resolve to "nothing" or flat colour.

   Fonts (Google Fonts, load in <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Young+Serif&family=Source+Sans+3:wght@400;500;600;700&display=swap" rel="stylesheet">

   Seasons (put on <html>): (none)=year-round | christmas | halloween | july4 | veterans
   A season only changes the small accent colours (links, buttons, tiny marks).
   Never recolour backgrounds or big surfaces for a season.
   ========================================================================== */

:root {
  /* ---- Core palette: "Workshop at night" ---- */
  --ink:        #1A1714;   /* page background: warm black-brown, close to the clip blacks */
  --bg:         var(--ink);
  --night:      #14110F;   /* deepest: video frames, footer */
  --navy:       #221E1A;   /* legacy name -> raised panel */
  --surface-1:  #231F1B;   /* cards */
  --surface:    var(--surface-1);
  --surface-2:  #2C2723;   /* hover / inset */
  --line:       #3D362E;   /* hairlines */
  --line-strong:#5A5047;

  --text:       #F1EADB;   /* cream, 14:1 on --ink */
  --text-dim:   #CFC5B1;   /* body copy, 9.5:1 */
  --text-muted: #B3A794;   /* secondary, 7:1 */
  --text-mute:  var(--text-muted);

  /* Legacy colour names kept so old CSS still resolves; all muted now. */
  --cyan:   #8FA9D0;  --teal:  #8AA68F;  --mint: #B8C7A8;
  --spark:  #F1EADB;  --amber: #C9A25B;  --ember: #B5793A;

  --ok:     #8AA68F;   /* sage */
  --warn:   #C9A25B;   /* brass */
  --danger: #C4504A;   /* brick */

  /* ---- Active accent set (default = year-round: brass + sage + brick) ---- */
  --accent:     #C9A25B;   /* Brass: links, primary buttons, the one steady accent */
  --accent-2:   #8AA68F;   /* Sage: secondary marks, success */
  --accent-3:   #C4504A;   /* Brick: sparing, small flags */
  --warm:       var(--accent);
  --accent-ink: #1A1714;   /* text on a filled accent button */
  --glow:       201 162 91; /* r g b, legacy only. Do NOT use for shadows/glows. */
  --grad-light: linear-gradient(var(--accent), var(--accent));  /* flat on purpose */
  --grad-warm:  linear-gradient(var(--accent), var(--accent));
  --hero-wash:  none;

  /* ---- Typography ---- */
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    var(--font-body);   /* no monospace "lab" styling any more */

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.125rem;
  --fs-lg:   1.3125rem;
  --fs-xl:   clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-2xl:  clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-hero: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.65;
  --tracking-display: 0;
  --tracking-label:   0.08em;   /* small caps-style labels in the body sans */

  /* ---- Spacing (4px base) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4.5rem;
  --sp-9: 7rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --measure: 62ch;
  --page-max: 70rem;

  /* ---- Radius: square-ish. 0-4px only. ---- */
  --r-sm: 2px;  --r-md: 3px;  --r-lg: 4px;  --r-xl: 4px;  --r-pill: 3px;
  --radius: var(--r-md);

  /* ---- Elevation: borders, not shadows. No glow anywhere. ---- */
  --shadow-1: none;
  --shadow-2: 0 1px 0 rgb(0 0 0 / .35);
  --glow-sm:  none;
  --glow-md:  none;
  --glow-lg:  none;
  --ring:     0 0 0 2px var(--ink), 0 0 0 4px var(--accent);

  /* ---- Motion: calm, short, no looping flicker ---- */
  --ease-out:   cubic-bezier(.2, .7, .2, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 400ms;
  --twinkle:  0s;
  --chase:    0s;

  color-scheme: dark;
}

/* ==========================================================================
   Seasons: small accent shifts only. Backgrounds and text never change.
   ========================================================================== */
[data-season="christmas"] { --accent:#C4504A; --accent-2:#6F9A78; --accent-3:#C9A25B; --glow:196 80 74;  --accent-ink:#1A1714; }
[data-season="halloween"] { --accent:#D9762B; --accent-2:#8D6BB0; --accent-3:#8FA85A; --glow:217 118 43; --accent-ink:#1A1714; }
[data-season="july4"]     { --accent:#C4504A; --accent-2:#6C8FBE; --accent-3:#F1EADB; --glow:196 80 74;  --accent-ink:#1A1714; }
[data-season="veterans"]  { --accent:#C9A25B; --accent-2:#7F9AC4; --accent-3:#F1EADB; --glow:201 162 91; --accent-ink:#1A1714; }

/* ==========================================================================
   Light theme (optional, for printed-feeling sections): warm paper.
   ========================================================================== */
[data-theme="light"] {
  --ink:        #F4EFE4;
  --night:      #E9E2D3;
  --surface-1:  #FBF8F1;
  --surface-2:  #EAE3D4;
  --line:       #D6CCB8;
  --line-strong:#A99C85;
  --text:       #26211C;
  --text-dim:   #4A4036;
  --text-muted: #6A5E50;
  --accent:     #8F6A24;
  --accent-2:   #4F6F57;
  --accent-3:   #A63A35;
  --accent-ink: #FFFFFF;
  color-scheme: light;
}
[data-theme="light"][data-season="christmas"] { --accent:#A63A35; --accent-2:#456B4E; }
[data-theme="light"][data-season="halloween"] { --accent:#B85A14; --accent-2:#6B4C8A; }
[data-theme="light"][data-season="july4"]     { --accent:#A63A35; --accent-2:#3F6490; }
[data-theme="light"][data-season="veterans"]  { --accent:#8F6A24; --accent-2:#4F6D99; }

/* ==========================================================================
   Base + small utilities
   ========================================================================== */
.psp-body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
.psp-display {
  font-family: var(--font-display);
  font-weight: 400;              /* Young Serif ships one weight */
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}
.psp-label {                      /* small, quiet, uppercase sans */
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.psp-glow-text { text-shadow: none; }
.psp-gradient-text { color: var(--text); background: none; }
.psp-twinkle, .psp-chase > * { animation: none; }

/* Buttons: flat, square-ish, solid or outlined. */
.psp-btn {
  display: inline-block; font: 600 var(--fs-sm)/1 var(--font-body);
  padding: .9rem 1.4rem; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.psp-btn:hover { background: var(--text); border-color: var(--text); }
.psp-btn.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.psp-btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-med: 1ms; --dur-slow: 1ms; }
}
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }