/* ============================================================================
   COLORS — single source of truth for every visual color on the site
   ============================================================================
   Edit any value below and the entire site updates on save+refresh.
   Every other CSS file and React component reads from these CSS variables.

   Each color is a CSS custom property (a "variable"). To use a color in CSS:
       background: var(--lilac);
   To reference it in inline JSX styles:
       style={{ background: "var(--lilac)" }}

   Sections:
     1. Brand palette       — the headline colors (lilac, pink, peach, mint, sky)
     2. Day mode            — light, pastel surfaces & text
     3. Night mode          — deep lavender surfaces & soft glow text
     4. Deep-purple stops   — used in dark gradients (stream box, jam card, etc.)
     5. On-dark text        — text painted onto deep-purple backgrounds
     6. Polaroid pins       — colored pushpins on the gallery polaroids
     7. Special accents     — the twitch "LIVE" red dot, etc.
   ============================================================================ */

/* ─── 1. BRAND PALETTE (shared between day and night) ─────────────────────── */
:root {
  --lilac:        #b7a8ff;   /* main brand color */
  --lilac-deep:   #8a78e0;
  --lilac-pale:   #c9bcff;
  --pink:         #ffb6d2;
  --pink-hot:     #ff9ec7;
  --peach:        #ffd2a8;
  --peach-soft:   #ffeac0;
  --mint:         #b6ecd3;
  --sky:          #a8dcff;
  --cyan-glow:    #8be3ff;

  --sparkle-day-extra: #a08aff;  /* third sparkle color in day mode */
}


/* ─── 2. DAY MODE ─────────────────────────────────────────────────────────── */
:root, .theme-day {
  --bg:           #f5d2d2;   /* page background (very pale butter) */
  --bg-tint:      #fff2dc;
  --bg-warm:      #ffe8c8;
  --bg-mint:      #fff7d8;
  --bg-pink:      #ffeaf0;
  --surface:      #ffffff;   /* cards */
  --surface-2:    #fff6e6;   /* secondary cards / hover */
  --ink:          #292133;   /* main text */
  --ink-soft:     #6b4f5c;   /* softer text */
  --ink-mute:     #a08894;   /* muted text */
  --line:         #f7e3c6;   /* hairlines */
  --line-strong:  #ecb19a;   /* stronger hairlines */

  --accent:       var(--lilac);
  --accent-deep:  var(--lilac-deep);
  --accent-soft:  #fce8d2;

  /* sparkle-cursor colors (day) */
  --sparkle-a:    var(--lilac);
  --sparkle-b:    var(--pink);
  --sparkle-c:    var(--peach);

  /* sparkle-cursor inline palette (used at runtime by app.jsx) */
  --sparkle-cursor-1: var(--lilac-deep);
  --sparkle-cursor-2: var(--lilac);
  --sparkle-cursor-3: var(--sparkle-day-extra);

  color-scheme: light;
}


/* ─── 3. NIGHT MODE ───────────────────────────────────────────────────────── */
.theme-night {
  --bg:           #0f0a1f;
  --bg-tint:      #161033;
  --bg-warm:      #1a1138;
  --surface:      #18122e;
  --surface-2:    #221a40;
  --ink:          #efe8ff;
  --ink-soft:     #b9aee0;
  --ink-mute:     #786a9e;
  --line:         #2a2152;
  --line-strong:  #3d2f78;

  --accent:       var(--lilac-pale);
  --accent-deep:  var(--lilac);
  --accent-soft:  #2a205a;

  --sparkle-a:    var(--lilac-pale);
  --sparkle-b:    var(--pink-hot);
  --sparkle-c:    var(--cyan-glow);

  --sparkle-cursor-1: var(--lilac-pale);
  --sparkle-cursor-2: var(--pink-hot);
  --sparkle-cursor-3: var(--cyan-glow);

  --footer-bg:    #0a0716;   /* footer is deeper than the page bg at night */

  color-scheme: dark;
}
/* day footer matches page tint */
:root, .theme-day { --footer-bg: var(--bg-tint); }


/* ─── 4. DEEP-PURPLE STOPS (dark gradients used in both themes) ─────────── */
:root {
  --grad-purple-1:  #1d1638;
  --grad-purple-2:  #2a1f5a;
  --grad-purple-3:  #3d2f78;
  --grad-purple-4:  #2a205a;
  --grad-purple-5:  #221a40;
  --grad-purple-6:  #1c1538;
  --grad-pink-deep: #3a1f4a;
  --grad-blue-mid:  #5a3d7a;   /* mid-purple used inside SVG stream art */
}


/* ─── 5. ON-DARK TEXT ─────────────────────────────────────────────────────── */
:root {
  --on-dark:       #0f0a1f;   /* text on lilac buttons (night mode) */
  --on-pink-deep:  #4a1f3a;   /* text on the pink "stream community" chip */
}


/* ─── 6. POLAROID PIN COLORS ─────────────────────────────────────────────── */
:root {
  --pin-red-1:    #ff7a9a;
  --pin-red-2:    #c2335a;
  --pin-red-3:    #7a1b3b;
  --pin-lilac-1:  var(--lilac);
  --pin-lilac-2:  #6d57c4;
  --pin-lilac-3:  #2a2052;
  --pin-peach-1:  var(--peach);
  --pin-peach-2:  #c08240;
  --pin-peach-3:  #5a3a16;

  --polaroid-night-bg: #1a1432;
}


/* ─── 7. SPECIAL ACCENTS ─────────────────────────────────────────────────── */
:root {
  --live-red:     #ff5577;   /* twitch live indicator dot */

  /* project-card illustrations */
  --art-stroke:   #5a3d7a;   /* the dark purple outline on the project SVGs */
  --lilac-faint:  #e7daff;   /* the very pale lilac UI strip in the browser illustration */
}