/* ===== LOOK / AESTHETIC (edit this file for visual updates) =====
   Words and links stay in js/content.js.
   If you change Google Fonts in index.html, update --font-* here too.

   Typical updates:
   1. Page colors  -> LIGHT / DARK sections below
   2. Pink accent  -> --pink (one color for buttons, titles, headers)
   3. Circle glows -> --page-glow in LIGHT / DARK
   4. Title look   -> cutout letters (hero + section titles) / TITLE LOOK (About star)
*/

:root {
  --pink: #d089a0;
  --pink-heading: var(--pink);
  --pink-soft: color-mix(in srgb, var(--pink) 16%, transparent);
  --black: #141413;
  --white: #eeebe6;
  --art-burgundy: #5c2d3a;
  --art-red: #7a3344;
  --font-display: "Lilita One", "Outfit", system-ui, sans-serif;
  --font-script: "Pacifico", "Lilita One", cursive;
  --font-cutout: "Playfair Display", "Times New Roman", Times, serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --scroll-thumb: #8a8680;
  --scroll-thumb-hover: #6e6b64;

  /* Title look: small pink star beside the About eyebrow. */
  --title-star-size: 1.05rem;
  --title-star-size-mobile: 0.95rem;
  --title-star-rotate: 8deg;
  --title-star-color: var(--pink);
}

/* ===== LIGHT =====
   Near white, with soft circle glows pinned to the viewport
   (the same “imaginary orbs” idea as the old black-and-pink site).
*/
html[data-theme="light"] {
  --bg: #fcfbf9;
  --bg-elevated: #ffffff;
  --text: #1a1917;
  --text-muted: rgba(26, 25, 23, 0.62);
  --border: rgba(40, 38, 34, 0.14);
  --cta-bg: var(--pink);
  --cta-text: var(--black);
  --cta-ghost-border: rgba(40, 38, 34, 0.28);
  --wash: rgba(70, 68, 62, 0.06);
  --wash-strong: rgba(70, 68, 62, 0.1);
  --page-glow:
    radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 36%),
    radial-gradient(circle at 8% 86%, color-mix(in srgb, var(--pink) 16%, transparent), transparent 40%),
    radial-gradient(circle at 96% 78%, rgba(80, 76, 70, 0.08), transparent 34%);
  --hero-visual:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 46%),
    linear-gradient(160deg, #fff, #faf8f6 60%, #f0eeea);
}

/* ===== DARK =====
   Charcoal + a little burgundy, with the same soft circle glows.
*/
html[data-theme="dark"] {
  --bg: #171716;
  --bg-elevated: #232321;
  --text: var(--white);
  --text-muted: rgba(238, 235, 230, 0.68);
  --border: rgba(196, 192, 184, 0.16);
  --cta-bg: var(--pink);
  --cta-text: var(--black);
  --cta-ghost-border: rgba(196, 192, 184, 0.34);
  --wash: rgba(72, 70, 64, 0.22);
  --wash-strong: color-mix(in srgb, var(--art-burgundy) 22%, transparent);
  --page-glow:
    radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--art-burgundy) 34%, transparent), transparent 36%),
    radial-gradient(circle at 8% 86%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 40%),
    radial-gradient(circle at 96% 78%, rgba(72, 70, 64, 0.28), transparent 34%);
  --hero-visual:
    radial-gradient(circle at 30% 20%, rgba(92, 45, 58, 0.38), transparent 46%),
    linear-gradient(160deg, #2a2a28, #161615 55%, #3a2428);
}