/* ================================================================
   Bliss Events — Design Tokens (single source of truth)
   ----------------------------------------------------------------
   Self-hosted @font-face declarations + the :root token system,
   shared by the whole site AND the self-contained quiz page.

   Load this file BEFORE styles.css (and before the quiz's inline
   <style>) on every page. Edit brand colors, the type scale,
   spacing, and Bliss White here, in ONE place.

   Font src paths are RELATIVE to this stylesheet (../assets/fonts/...).
   CSS url() resolves against the stylesheet's own location, not the
   page, so these work from any page depth AND any server root, including
   a local preview served from a sub-path or file://. Do NOT switch these
   to root-absolute /assets/...; that 404s whenever the site is not served
   from the web root, which made the hero font render heavy in local review.
================================================================ */

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/PlayfairDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/PlayfairDisplay-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ────────────────────────────────────────────────────────────
   Design Tokens
   Bliss Events brand colors + bn-foundation spacing/type scale
──────────────────────────────────────────────────────────── */

:root {

  /* ─── Bliss Events Brand Colors ─────────────────── */

  /* Primary palette */
  --bliss-cream:      #FEF1E5;   /* Primary background */
  --bliss-evergreen:  #035332;   /* Headers, nav, accent, links */
  --bliss-charcoal:   #33302E;   /* Body copy */
  --bliss-blush:      #FBC8B3;   /* Sticky nav background, nav hover */

  /* Supporting accents */
  --bliss-rose:       #F05A4E;   /* Micro-accent: mintrose heart icon only */
  --bliss-garnet:     #892E25;   /* Emotional depth: Why Bliss bg, testimonials pull quote, FAQ hover, nav hover */
  --bliss-mint:       #BFE2C9;   /* Controlled accent: mintrose heart icon only */
  --bliss-iris:       #96ADD9;   /* Reserved: no current placement */

  /* ─── Surface & hairline neutrals ─────────────────────────
     Paper / Bliss White: the warm off-white surface, a hair lighter
     than Cream. ONE canonical value (#FFF9F1) shared by the site
     form fields, the photo-credit card, the quiz card surface
     (via --surface), and the date-picker panel, so they cannot drift.
     #FFF9F1 is the same color the surface previously expressed as
     oklch(0.985 0.012 78); unifying the notation shifts nothing.
     Hairline: the faint evergreen edge used on understated controls
     (matches the trust-chip pill border, Evergreen at 18%). */
  --bliss-paper:      #FFF9F1;                      /* Bliss White (warm off-white surface) */
  --bliss-hairline:   oklch(0.30 0.09 155 / 0.18);  /* Evergreen 18% understated border */

  /* ─── Section color tokens ─────────────────────────────── */
  /*     To revert a section's color: update only its token.  */

  /* Why Bliss Events (Garnet exception, see bliss-visual-identity-system.md §Garnet Exception) */
  --bliss-why-bliss-bg:      var(--bliss-garnet);
  --bliss-why-bliss-text:    var(--bliss-cream);

  /* Final CTA */
  --bliss-cta-bg:            var(--bliss-cream);
  --bliss-cta-heading:       var(--bliss-evergreen);
  --bliss-cta-body:          var(--bliss-charcoal);
  --bliss-cta-btn-bg:        var(--bliss-evergreen);
  --bliss-cta-btn-text:      var(--bliss-cream);
  --bliss-cta-btn-border:    var(--bliss-evergreen);
  --bliss-cta-btn-bg-hover:  oklch(from var(--bliss-evergreen) calc(l - 0.06) c h);
  --bliss-cta-link:          var(--bliss-evergreen);
  --bliss-cta-link-hover:    var(--bliss-garnet);
  --bliss-cta-focus:         var(--bliss-evergreen);

  /* Cookie notice */
  --bliss-cookie-bg:         var(--bliss-paper);   /* Bliss White: lighter than the cream page, so the bar reads as its own surface */
  --bliss-cookie-border:     oklch(0.30 0.09 155 / 0.2);  /* Evergreen at 20% (the date-picker border matches this value) */
  --bliss-cookie-accent:     var(--bliss-garnet);  /* Warm Garnet top accent, for visibility against the cream page */
  --bliss-cookie-text:       var(--bliss-charcoal);
  --bliss-cookie-btn-bg:     var(--bliss-evergreen);
  --bliss-cookie-btn-text:   var(--bliss-cream);
  --bliss-cookie-btn-hover:  var(--bliss-blush);
  --bliss-cookie-link:       var(--bliss-evergreen);
  --bliss-cookie-link-hover: var(--bliss-garnet);
  --bliss-cookie-focus:      var(--bliss-evergreen);

  /* Sticky header: nav link hover in scrolled (Blush) state */
  --bliss-header-hover:      var(--bliss-garnet);

  /* Hero-specific surface */
  --hero-text:        #FEF1E5;   /* Cream over photography */
  --hero-btn-bg:      #035332;   /* Evergreen button */
  --hero-btn-bg-hover: #02371f;  /* Darker evergreen on hover */
  --hero-btn-text:    #FEF1E5;   /* Cream button label */

  /* Image placeholder backgrounds (removed when real images are provided) */
  --hero-placeholder-1: oklch(0.28 0.07 155);   /* Deep forest */
  --hero-placeholder-2: oklch(0.32 0.04 75);    /* Warm dark */
  --hero-placeholder-3: oklch(0.25 0.05 200);   /* Dark slate */
  --intro-placeholder:  oklch(0.85 0.03 80);    /* Warm neutral */

  /* ─── Semantic mappings (bn-foundation compatible) ── */
  --bn-bg:            var(--bliss-cream);
  --bn-acc:           var(--bliss-evergreen);
  --bn-text:          var(--bliss-charcoal);

  /* ─── Radius ────────────────────────────────────── */
  --bn-radius-sm:   4px;
  --bn-radius-md:   8px;
  --bn-radius-full: 9999px;

  /* ─── Z-index layers (no magic numbers) ─────────── */
  --z-base:   0;
  --z-card:   10;
  --z-banner: 50;    /* Cookie notice: above page, below nav overlay */
  --z-nav:    100;
  --z-debug:  9999;

  /* ─── Transitions ────────────────────────────────── */
  --bn-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --hero-fade:     2500ms cubic-bezier(0.4, 0, 0.6, 1);  /* The crossfade curve */

  /* ─── Focus ring ─────────────────────────────────── */
  --bn-focus-ring:   2px solid var(--bliss-evergreen);
  --bn-focus-offset: 2px;

  /* ─── Spacing scale (4px base) ───────────────────── */
  --space-1:  0.25rem;    /*  4px */
  --space-2:  0.5rem;     /*  8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */

  /* ─── Fluid type scale ───────────────────────────── */
  /* Mobile min → Desktop max via clamp */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.63vw, 1.375rem);
  --text-xl:   clamp(1.25rem,  1.05rem + 1vw,    1.75rem);
  --text-2xl:  clamp(1.5rem,   1.2rem  + 1.5vw,  2.25rem);
  /* --text-3xl: page-title scale, one step above 2xl (used by legal page titles) */
  --text-3xl:  clamp(1.875rem, 1.3rem  + 2.5vw,  2.75rem);

  /* Hero display: 36px mobile → 4.5rem (72px) desktop */
  --text-hero: clamp(2.25rem, 1.5rem + 3.75vw, 4.5rem);

  /* H1: 28px mobile → 48px desktop */
  --text-h1: clamp(1.75rem, 1.2rem + 2.75vw, 3rem);

  /* H2: 22px mobile → 36px desktop (per bliss-visual-identity-system.md) */
  --text-h2: clamp(1.375rem, 1rem + 1.875vw, 2.25rem);

  /* ─── Line height ────────────────────────────────── */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.65;
  /* --leading-loose: extended reading rhythm for legal-page body prose */
  --leading-loose:  1.8;

  /* ─── Section rhythm ─────────────────────────────── */
  /* Fluid: ~56px mobile → ~96px desktop */
  --section-pad: clamp(3.5rem, 6vw, 6rem);

  /* ─── Content container ──────────────────────────── */
  --content-max: 1320px;
}