/* ================================================================
   THE COSMIC HEALER. Colors & Type
   Dragon fire. Angelic light. Aboriginal grounding.
   Never pure black. Always lit from within.
   ================================================================ */

/* Fonts. Montserrat (display) + Poppins (sub-display, quote) + Roboto (body) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500&display=swap');

:root {
  /* ------------------------------------------------------------
     COLOR TOKENS. raw palette
     ------------------------------------------------------------ */

  /* Primary. Dragon Fire */
  --ch-red:              #CC2200;  /* Vibrant Dragon Red */
  --ch-crimson:          #8B0000;  /* Deep Crimson */
  --ch-oxblood:          #6B0000;  /* Bright crimson. brighter site background red */
  --ch-night:            #1A0A00;  /* Near-black for deep voids. still warm */

  /* Gold & Warmth. Angelic Light */
  --ch-gold:             #C9951A;  /* Burnished Gold */
  --ch-amber:            #E07B2A;  /* Warm Amber */
  --ch-parchment:        #FFF0DC;  /* Warm Parchment */
  --ch-cream:            #FFF8EE;  /* Luminous Cream */
  --ch-off-white:        #FFFDF5;  /* Off-White */

  /* Earth & Land. Australian Grounding */
  --ch-terracotta:       #7A3B1E;  /* Uluru terracotta */
  --ch-earth:            #5C2A00;  /* Deep Earth Brown */
  --ch-earth-text:       #3D1A00;  /* Body text on light bg */

  /* Chakra Accents. used sparingly */
  --ch-emerald:          #2ECC71;  /* Heart / nature / kids */
  --ch-celestial:        #1A3B8B;  /* SoulPath / cosmos */
  --ch-violet:           #9B59B6;  /* Crown / spiritual wisdom */

  /* Glow / translucent tints */
  --ch-gold-glow:        rgba(201, 149, 26, 0.5);
  --ch-gold-glow-soft:   rgba(201, 149, 26, 0.3);
  --ch-gold-border:      rgba(201, 149, 26, 0.4);
  --ch-cream-tint:       rgba(255, 240, 220, 0.08);
  --ch-cream-muted:      rgba(255, 248, 238, 0.4);

  /* ------------------------------------------------------------
     SEMANTIC COLORS
     ------------------------------------------------------------ */
  --bg-dark:             var(--ch-oxblood);
  --bg-deep:             var(--ch-night);
  --bg-light:            var(--ch-cream);
  --bg-parchment:        var(--ch-parchment);
  --bg-earth:            var(--ch-terracotta);

  --fg-on-dark:          var(--ch-cream);
  --fg-on-dark-muted:    var(--ch-parchment);
  --fg-on-light:         var(--ch-earth-text);
  --fg-on-light-muted:   var(--ch-earth);

  --accent:              var(--ch-red);
  --accent-warm:         var(--ch-gold);
  --accent-amber:        var(--ch-amber);

  --border-gold:         rgba(201, 149, 26, 0.4);
  --border-gold-strong:  var(--ch-gold);
  --border-faint:        rgba(201, 149, 26, 0.2);

  /* ------------------------------------------------------------
     TYPE FAMILIES
     ------------------------------------------------------------ */
  --font-hero:           'Montserrat', system-ui, -apple-system, sans-serif;
  --font-section:        'Montserrat', system-ui, -apple-system, sans-serif;
  --font-display:        'Poppins', system-ui, -apple-system, sans-serif;
  --font-accent:         'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:           'Roboto', system-ui, -apple-system, sans-serif;
  --font-quote:          'Poppins', system-ui, -apple-system, sans-serif;

  /* ------------------------------------------------------------
     SPACING. base unit 8px
     ------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  40px;
  --space-7:  56px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;
  --space-11: 120px;

  --section-pad-desktop: 120px;
  --section-pad-mobile:  64px;
  --content-max:         1280px;
  --card-pad:            40px;

  /* ------------------------------------------------------------
     RADII
     ------------------------------------------------------------ */
  --radius-none:  0;       /* Hero. sharp, powerful */
  --radius-sm:    4px;
  --radius-card:  8px;
  --radius-pill:  999px;

  /* ------------------------------------------------------------
     ELEVATION / GLOW (no harsh drop shadows. everything lit from within)
     ------------------------------------------------------------ */
  --glow-gold-sm:   0 0 12px rgba(201, 149, 26, 0.35);
  --glow-gold-md:   0 0 20px rgba(201, 149, 26, 0.5);
  --glow-gold-lg:   0 0 48px rgba(201, 149, 26, 0.45);
  --glow-ember:     0 0 32px rgba(224, 123, 42, 0.4);
  --glow-card:      0 0 0 1px var(--ch-gold), 0 0 24px rgba(201, 149, 26, 0.3);
  --glow-card-hover:0 0 0 1px var(--ch-gold), 0 0 40px rgba(201, 149, 26, 0.55);

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */
  --ease-warm:     cubic-bezier(0.22, 1, 0.36, 1);   /* slow-out, ceremonial */
  --ease-ember:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      180ms;
  --dur-base:      320ms;
  --dur-slow:      640ms;
}

/* ================================================================
   BASE / SEMANTIC TYPE RULES
   The page breathes downward. Massive → intimate.
   ================================================================ */

html, body {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero. Dragon King energy */
.ch-hero,
h1.ch-hero {
  font-family: var(--font-hero);
  font-weight: 800;
  font-size: clamp(52px, 9vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ch-cream);
}

/* Section headers. warm, editorial, ceremonial */
h2, .ch-h2 {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ch-gold);
  margin: 0;
}

h3, .ch-h3 {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ch-gold);
  margin: 0;
}

/* Sub-header / Accent. sacred, engraved */
.ch-eyebrow,
.ch-label,
nav, .ch-nav {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ch-gold);
}

.ch-eyebrow--amber { color: var(--ch-amber); }

/* Body. Lora, generous breathing room */
p, .ch-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ch-parchment);
  margin: 0 0 1.2em;
  text-wrap: pretty;
}

p em, .ch-body em {
  font-style: italic;
}

/* Pull quote. whispered truth spoken loudly */
.ch-quote, blockquote {
  font-family: var(--font-quote);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.35;
  color: var(--ch-gold);
  text-shadow: 0 0 24px rgba(201, 149, 26, 0.35);
  margin: 0;
}

/* Links */
a {
  color: var(--ch-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--border-gold);
  transition: color var(--dur-fast) var(--ease-warm),
              border-color var(--dur-fast) var(--ease-warm);
}
a:hover { color: var(--ch-amber); border-color: var(--ch-amber); }

/* Light-section overrides. apply .on-light to a parent */
.on-light {
  background: var(--bg-light);
  color: var(--fg-on-light);
}
.on-light h2, .on-light h3, .on-light .ch-h2, .on-light .ch-h3 {
  color: var(--ch-red);
}
.on-light p, .on-light .ch-body { color: var(--ch-earth-text); }
.on-light .ch-eyebrow, .on-light .ch-label { color: var(--ch-red); }