/* ==========================================================================
   DESIGN TOKENS  ·  spiritualawareness.online
   --------------------------------------------------------------------------
   This is the ONE file to edit to change the look of the whole website.
   Every color, typeface, font size, space, corner radius and animation speed
   used anywhere on the site comes from a variable defined here.

   HOW TO USE
   - Change a value, save, refresh the browser. Every page updates.
   - Colors accept any CSS color: #hex, rgb(), hsl().
   - If you change a font family, also update the Google Fonts <link> in the
     <head> of each page (see README.txt > "Changing fonts").

   SECTIONS OF THIS FILE
   1. Brand palette (raw colors)
   2. Section accents (Discover, Empower, Heal, Experience)
   3. Night theme (default) — which raw color is used for what
   4. Day theme (light mode, visitors switch with the sun/moon button)
   5. Typography (families, sizes, weights, line heights)
   6. Spacing, layout widths, radius, shadows, motion
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. BRAND PALETTE
     ------------------------------------------------------------------------ */
  --c-midnight:   #0d0b21;   /* deepest background */
  --c-indigo:     #16123a;   /* raised surfaces (cards, panels) */
  --c-twilight:   #251f58;   /* borders, hover surfaces */
  --c-violet:     #7a68b8;   /* soft glow color */
  --c-lavender:   #c9bff0;   /* highlights on dark */
  --c-gold:       #e8c987;   /* candlelight: primary accent */
  --c-gold-deep:  #c9a45c;   /* button gradient end */
  --c-moonlight:  #f4efe4;   /* main text on dark */
  --c-mist:       #b2acd0;   /* secondary text on dark */
  --c-parchment:  #f7f2e8;   /* day theme background */
  --c-ink:        #211b3d;   /* day theme text */
  --c-ink-soft:   #4d4768;   /* day theme secondary text */
  --c-success:    #8fd1b8;
  --c-error:      #f2a7a7;

  /* ------------------------------------------------------------------------
     2. SECTION ACCENTS
     Each main section has its own "phase of the moon" color.
     Pages set <body data-section="heal"> and pick up the right accent.
     ------------------------------------------------------------------------ */
  --accent-home:        var(--c-gold);
  --accent-discover:    #efcf8a;   /* dawn gold      · waxing crescent */
  --accent-empower:     #f0a489;   /* ember rose     · first quarter  */
  --accent-heal:        #8fd3c3;   /* moon sage      · full moon      */
  --accent-experience:  #bda8f5;   /* aurora violet  · waning gibbous */

  /* ------------------------------------------------------------------------
     3. NIGHT THEME (default)
     These "role" variables are what the stylesheet actually uses.
     ------------------------------------------------------------------------ */
  --bg:              var(--c-midnight);
  --bg-gradient-1:   rgba(122, 104, 184, 0.30);   /* top-right glow */
  --bg-gradient-2:   rgba(143, 211, 195, 0.08);   /* left glow */
  --surface:         rgba(37, 31, 88, 0.45);      /* cards */
  --surface-strong:  var(--c-indigo);             /* solid panels, menus */
  --surface-hover:   rgba(37, 31, 88, 0.75);
  --border:          rgba(201, 191, 240, 0.16);
  --border-strong:   rgba(201, 191, 240, 0.32);
  --text:            var(--c-moonlight);
  --text-muted:      var(--c-mist);
  --heading:         var(--c-moonlight);
  --link:            var(--c-lavender);
  --on-accent:       var(--c-midnight);            /* text on gold buttons */
  --focus-ring:      var(--c-gold);
  --header-bg:       rgba(13, 11, 33, 0.82);
  --star-color:      230, 225, 245;                /* r, g, b for starfield */
  --star-opacity:    1;                            /* set 0 to hide stars */

  /* ------------------------------------------------------------------------
     5. TYPOGRAPHY
     ------------------------------------------------------------------------ */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-label:   "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --fw-body:      400;   /* raise to 500 for even easier reading */
  --fw-strong:    500;
  --fw-display:   500;
  --fw-hero:      400;

  /* Fluid sizes: clamp(smallest, preferred, largest) */
  --fs-xs:    0.8125rem;                                  /* 13px labels */
  --fs-sm:    0.9375rem;                                  /* 15px small print */
  --fs-base:  clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);  /* 17–19px body */
  --fs-lg:    clamp(1.1875rem, 0.6vw + 1.05rem, 1.375rem);/* lead paragraphs */
  --fs-h4:    clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --fs-h3:    clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
  --fs-h2:    clamp(2rem, 2.4vw + 1.3rem, 3.1rem);
  --fs-h1:    clamp(2.5rem, 4vw + 1.4rem, 4.4rem);
  --fs-hero:  clamp(2.8rem, 6vw + 1rem, 5.8rem);
  --fs-quote: clamp(1.7rem, 2.8vw + 1rem, 2.8rem);

  --lh-body:    1.75;
  --lh-heading: 1.12;
  --ls-label:   0.24em;   /* letter spacing of small uppercase labels */

  /* ------------------------------------------------------------------------
     6. SPACING, LAYOUT, SHAPE, MOTION
     ------------------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  clamp(3rem, 6vw, 5rem);
  --space-2xl: clamp(4.5rem, 10vw, 8.5rem);

  --page-gutter:    clamp(1rem, 4vw, 2rem);
  --width-page:     1180px;
  --width-text:     68ch;
  --header-height:  76px;

  --radius-sm:   6px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --shadow-soft: 0 20px 50px -24px rgba(0, 0, 0, 0.65);
  --glow:        0 0 30px rgba(232, 201, 135, 0.35);

  --speed-fast:  0.2s;
  --speed:       0.35s;
  --speed-slow:  0.9s;
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   4. DAY THEME
   Applied when a visitor presses the sun/moon button (saved per browser),
   or set <html data-theme="day"> to make day the default.
   -------------------------------------------------------------------------- */
[data-theme="day"] {
  --bg:              var(--c-parchment);
  --bg-gradient-1:   rgba(201, 164, 92, 0.18);
  --bg-gradient-2:   rgba(122, 104, 184, 0.10);
  --surface:         rgba(255, 255, 255, 0.72);
  --surface-strong:  #ffffff;
  --surface-hover:   #ffffff;
  --border:          rgba(33, 27, 61, 0.14);
  --border-strong:   rgba(33, 27, 61, 0.28);
  --text:            var(--c-ink);
  --text-muted:      var(--c-ink-soft);
  --heading:         var(--c-ink);
  --link:            #5a3fa8;
  --on-accent:       #ffffff;
  --focus-ring:      #5a3fa8;
  --header-bg:       rgba(247, 242, 232, 0.9);
  --star-opacity:    0;

  /* Darker accents so they stay readable on a light page */
  --accent-home:        #8a6214;
  --accent-discover:    #8a6214;
  --accent-empower:     #a8472a;
  --accent-heal:        #1f7a67;
  --accent-experience:  #6245b8;
  --c-gold:             #8a6214;
  --c-gold-deep:        #6f4e0c;
  --glow:               0 10px 30px -10px rgba(138, 98, 20, 0.45);
  --shadow-soft:        0 20px 40px -26px rgba(33, 27, 61, 0.45);
}