/* =============================================================
   Brave Life — Colors & Type
   PALETTE v2 (post-roundtable): values shifted off SaaS-default toward
   editorial / cultural — persimmon, petrol teal, aubergine, oxblood,
   aged brass, warm bone, on a warm tinted charcoal ground.
   Token NAMES are preserved (--bl-orange, --bl-red, --bl-purple) so
   downstream components keep working; only VALUES changed.
   ============================================================= */

/* ---------- Fonts ----------
   Kanit (display / headings / subheadings) + Manrope (body, eyebrow,
   caption, quote, body emphasis). Both are free from Google Fonts (OFL). */
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  /* =========================================================
     CORE BRAND HUES — five disciplined colors with strict roles.
     Every value pushed off the SaaS-default swatch toward
     editorial / cultural / earthy. See "Roles" map below.
     ========================================================= */

  /* Persimmon (was candy orange #E8652D) — brand soul / fire / movement */
  --bl-orange:          #D45A2C;   /* persimmon — logo, hero, podcast, fire moments */
  --bl-orange-light:    #E27A4E;   /* hover-lighten, tints */
  --bl-orange-dark:     #A8431F;   /* burnt-edge — hover on primary buttons */

  /* Petrol teal (was generic mid teal) — UI primary surfaces */
  --bl-teal:            #1B6B6B;   /* petrol — surfaces only, deeper, slightly toxic */
  --bl-teal-300:        #3DD0C5;   /* AA-safe text/button variant on dark */
  --bl-teal-deep:       #0F4844;   /* deepest petrol surface */

  /* Aubergine (was Easter-egg purple #5B2A86) — depth / worship / scripture */
  --bl-purple:          #4A2C5C;   /* bruised aubergine */
  --bl-purple-light:    --bl-purple-300; /* alias to AA-safe variant */
  --bl-purple-300:      #A084DC;   /* AA-safe text variant */
  --bl-purple-dark:     #321F40;   /* deepest aubergine */
  --bl-purple-plum:     #1F1428;   /* near-black aubergine, surface use */

  /* Oxblood (was alert red #C8321F) — altar / blood / cross — RARE (≤7 surfaces) */
  --bl-red:             #8B1E14;   /* oxblood / wine — pulls away from orange toward "blood" */
  --bl-red-300:         #D85A4A;   /* AA-safe text variant */
  --bl-red-dark:        #5A140D;   /* deepest oxblood — surface */
  --bl-red-ember:       #3D0E08;   /* near-black oxblood, glow base */

  /* Aged brass (NEW) — anointing / glory / grace note — RARE (≤3 surfaces) */
  --bl-brass:           #C9A227;   /* aged brass / sour gold — never highlighter yellow */
  --bl-brass-light:     #DDB94A;   /* hover / soft tint */
  --bl-brass-dark:      #8F7218;   /* deepest brass */

  /* =========================================================
     SURFACES — warm tinted charcoal (NOT pure black)
     Persimmon-tinted to feel "of-a-piece" with brand fire.
     ========================================================= */
  --bl-bg:              #1B1814;   /* warm tinted charcoal — body bg */
  --bl-bg-alt:          #14110E;   /* alternating sections */
  --bl-surface:         #26211C;   /* raised charcoal — cards, side-lit base */
  --bl-surface-2:       #2F2923;   /* hover / elevated card */
  --bl-charcoal:        #26211C;   /* alias for legacy refs */
  --bl-dark:            #14110E;   /* alias for legacy --bl-dark refs */
  --bl-black:           #1B1814;   /* alias — anything that said "black" now reads warm charcoal */

  /* Light-mode surfaces — warm bone, not pure white */
  --bl-white:           #FFFFFF;   /* still pure white where stark contrast needed */
  --bl-bone:            #F0E8DC;   /* warm bone — body text on dark, cream surfaces */
  --bl-cream:           #F0E8DC;   /* alias to bone */

  /* Brand — grays (warm-tinted neutrals) */
  --bl-gray-50:         #F0E8DC;   /* warm bone */
  --bl-gray-100:        #DBD3C5;   /* light borders */
  --bl-gray-200:        #C0B7A8;
  --bl-gray-300:        #9A9082;
  --bl-gray-400:        #7A7164;   /* muted text */
  --bl-gray-500:        #5C5448;
  --bl-gray-600:        #443E35;
  --bl-gray-700:        #322D27;
  --bl-gray-800:        #26211C;   /* alias --bl-charcoal */
  --bl-gray-900:        #1B1814;   /* alias --bl-bg */
  --bl-gray-950:        #100D0A;   /* deepest surface */
  --bl-gray:            #7A7164;
  --bl-gray-light:      #DBD3C5;
  --bl-gray-dark:       #443E35;

  /* =========================================================
     ALPHA SCALE (over warm charcoal)
     ========================================================= */
  --bl-white-a80:       rgba(240,232,220,0.80);
  --bl-white-a70:       rgba(240,232,220,0.78);  /* primary body on dark */
  --bl-white-a60:       rgba(240,232,220,0.66);  /* secondary body on dark */
  --bl-white-a50:       rgba(240,232,220,0.54);  /* subhead-muted */
  --bl-white-a40:       rgba(240,232,220,0.44);
  --bl-white-a30:       rgba(240,232,220,0.32);
  --bl-white-a20:       rgba(240,232,220,0.20);  /* strong borders */
  --bl-white-a10:       rgba(240,232,220,0.10);  /* standard borders */
  --bl-white-a05:       rgba(240,232,220,0.05);  /* card fill */

  /* Persimmon tints */
  --bl-orange-a30:      rgba(212,90,44,0.30);
  --bl-orange-a20:      rgba(212,90,44,0.20);
  --bl-orange-a05:      rgba(212,90,44,0.06);

  /* Oxblood tints */
  --bl-red-a30:         rgba(139,30,20,0.32);
  --bl-red-a20:         rgba(139,30,20,0.22);

  /* Aubergine tints */
  --bl-purple-a30:      rgba(74,44,92,0.34);
  --bl-purple-a20:      rgba(74,44,92,0.22);

  /* Petrol-teal tints */
  --bl-teal-a30:        rgba(27,107,107,0.34);
  --bl-teal-a20:        rgba(27,107,107,0.22);

  /* Brass tints */
  --bl-brass-a30:       rgba(201,162,39,0.30);
  --bl-brass-a20:       rgba(201,162,39,0.18);

  /* =========================================================
     SEMANTIC ROLE TOKENS — components reference these, not raw hues.
     Roles per roundtable:
       fire   → persimmon  (brand soul, hero, podcast, "Live Now")
       ui     → petrol teal (CTAs, links, focus, primary surfaces)
       depth  → aubergine  (scripture, worship, theology, deep callouts)
       altar  → oxblood    (altar calls, communion, salvation — RARE)
       glory  → brass      (anointing, healing, ordination — RARE)
     ========================================================= */
  --bg:                 var(--bl-bg);         /* page */
  --bg-alt:             var(--bl-bg-alt);     /* alternating sections */
  --bg-elev:            var(--bl-white-a05);  /* card surface */
  --bg-highlight:       var(--bl-orange-a05); /* featured card surface */

  --fg:                 var(--bl-bone);       /* primary text — warm bone, never pure white */
  --fg-muted:           var(--bl-white-a70);  /* body copy */
  --fg-subtle:          var(--bl-white-a60);  /* secondary body */
  --fg-faint:           var(--bl-white-a50);  /* subheads */
  --fg-whisper:         var(--bl-white-a40);  /* captions, legal */

  /* Co-equal pair: UI vs FIRE */
  --accent:             var(--bl-teal-300);   /* UI primary — links, CTAs, focus (AA-safe value) */
  --accent-surface:     var(--bl-teal);       /* UI primary on surfaces */
  --accent-hover:       var(--bl-teal-deep);
  --accent-soft:        var(--bl-teal-a20);
  --accent-border:      var(--bl-teal-a30);

  --fire:               var(--bl-orange);     /* brand soul — logo, hero, fire moments */
  --fire-hover:         var(--bl-orange-dark);
  --fire-soft:          var(--bl-orange-a20);
  --fire-border:        var(--bl-orange-a30);

  --depth:              var(--bl-purple-300); /* worship / scripture (text-safe) */
  --depth-surface:      var(--bl-purple);     /* aubergine surface */
  --altar:              var(--bl-red-300);    /* altar/blood — rare, text-safe */
  --altar-surface:      var(--bl-red);        /* oxblood surface */
  --glory:              var(--bl-brass);      /* anointing — rare grace note */

  --border:             var(--bl-white-a10);
  --border-strong:      var(--bl-white-a20);
  --border-accent:      var(--bl-orange-a30);

  /* =========================================================
     TYPOGRAPHY TOKENS — Kanit (display) + Manrope (body)
     ========================================================= */
  --font-display:       "Kanit", "Manrope", system-ui, sans-serif;
  --font-heading:       "Kanit", "Manrope", system-ui, sans-serif;
  --font-body:          "Manrope", system-ui, sans-serif;
  --font-accent:        "Manrope", system-ui, sans-serif;

  /* Weight scale */
  --fw-light:           300;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-extrabold:       800;
  --fw-black:           900;

  /* Size scale */
  --fs-xs:              0.75rem;    /* 12 */
  --fs-sm:              0.875rem;   /* 14 */
  --fs-base:            1rem;       /* 16 */
  --fs-md:              1.125rem;   /* 18 */
  --fs-lg:              1.25rem;    /* 20 */
  --fs-xl:              1.5rem;     /* 24 */
  --fs-2xl:             1.875rem;   /* 30 */
  --fs-3xl:             2.25rem;    /* 36 */
  --fs-4xl:             3rem;       /* 48 */
  --fs-5xl:             3.75rem;    /* 60 */
  --fs-6xl:             4.5rem;     /* 72 */

  /* Line-heights */
  --lh-tight:           1.1;
  --lh-snug:            1.25;
  --lh-normal:          1.5;
  --lh-relaxed:         1.6;
  --lh-loose:           1.75;

  /* Letter spacing */
  --ls-tight:           -0.02em;
  --ls-normal:          0;
  --ls-wide:            0.05em;
  --ls-widest:          0.15em;

  /* =========================================================
     SPACING / RADII / SHADOW / MOTION
     ========================================================= */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,.40);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 1px var(--bl-orange-a30), 0 8px 40px rgba(212,90,44,.25);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* Layout */
  --container-max: 72rem;
  --container-page: 80rem;
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   ============================================================= */
.bl-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.bl-h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.bl-h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  color: var(--fg);
}
.bl-h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.bl-h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.bl-quote {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-4xl));
  line-height: var(--lh-relaxed);
  color: var(--fg);
  font-style: normal;
}
.bl-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.bl-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.bl-body-emphasis {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}
.bl-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-subtle);
}
.bl-eyebrow {
  font-family: var(--font-accent);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--fire);          /* eyebrows = persimmon (brand voice) */
}
.bl-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  color: var(--fg-whisper);
}
.bl-button-label {
  font-family: var(--font-accent);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
}