/* ============================================================
   Jacob Tapp Creations — Design System tokens
   Fonts (Google CDN) + two-mode colour palette + fluid type +
   spacing / radii / shadows / motion. Consumed by every page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  /* ---- Shared base ------------------------------------------------ */
  --cream:           #FDF6E8;   /* dominant warm canvas */
  --white:           #FFFFFF;   /* cards / surfaces */

  /* ---- Mode A · Daylight primaries -------------------------------- */
  --sky-blue:        #2E7BD6;   /* primary brand */
  --sunny-gold:      #F7C948;   /* secondary highlight */
  --sunset-orange:   #F0892F;   /* THE call-to-action colour */
  --sunset-orange-deep: #D9701B; /* CTA hover / pressed */

  /* ---- Mode A · Sprinkled accents (small use only) ---------------- */
  --coral-red:       #D9533B;   /* Uluru coral-red, sparing */
  --aurora-purple:   #7E5BC2;
  --dreaming-teal:   #2FB59B;
  --crystal-pink:    #E06AA8;

  /* ---- Mode B · Starlight / Sacred -------------------------------- */
  --night-blue:      #16235C;   /* deep night-sky base */
  --twilight-indigo: #2A1E5C;   /* gradient partner */
  --heavenly-gold:   #F2C75B;   /* headings + accents on dark */
  --starlight-cream: #FDF6E8;   /* body text on dark */
  --night-blue-700:  #1E2E6E;   /* raised dark surface */
  --night-glow:      rgba(242, 199, 91, 0.16); /* soft gold star glow */
  --night-haze:      rgba(126, 91, 194, 0.22); /* faint purple haze */

  /* ---- Text ------------------------------------------------------- */
  --ink-brown:       #3A2A1A;   /* body on light/cream */
  --ink-brown-soft:  #6A5640;   /* muted captions on light */
  --ink-brown-faint: #A8967E;   /* hairline / disabled on light */

  /* ---- Tints (cards, fills, hovers) ------------------------------- */
  --cream-deep:      #F6EAD0;   /* cream pressed / section break */
  --sky-blue-tint:   #E7F0FB;   /* blue wash chips / hovers */
  --gold-tint:       #FCF1D2;   /* gold wash */
  --teal-tint:       #E1F5F0;
  --pink-tint:       #FBE8F2;
  --purple-tint:     #EEE8F8;

  /* ================================================================
     SEMANTIC ALIASES — design against these, not raw values
     ================================================================ */

  /* Surfaces & backgrounds (light / Mode A is the default) */
  --bg-canvas:        var(--cream);
  --bg-canvas-deep:   var(--cream-deep);
  --surface-card:     var(--white);
  --surface-sunk:     var(--cream-deep);

  /* Brand + call to action */
  --brand-primary:    var(--sky-blue);
  --brand-secondary:  var(--sunny-gold);
  --cta:              var(--sunset-orange);
  --cta-hover:        var(--sunset-orange-deep);
  --cta-text:         var(--white);

  /* Text on light */
  --text-body:        var(--ink-brown);
  --text-heading:     var(--ink-brown);
  --text-muted:       var(--ink-brown-soft);
  --text-faint:       var(--ink-brown-faint);
  --text-on-brand:    var(--white);
  --text-link:        var(--sky-blue);

  /* Borders / lines */
  --border-soft:      rgba(58, 42, 26, 0.10);
  --border-strong:    rgba(58, 42, 26, 0.18);
  --border-gold:      rgba(242, 199, 91, 0.55);

  /* Decorative accents (small sprinkles only) */
  --accent-coral:     var(--coral-red);
  --accent-purple:    var(--aurora-purple);
  --accent-teal:      var(--dreaming-teal);
  --accent-pink:      var(--crystal-pink);
  --accent-gold:      var(--sunny-gold);

  /* Focus ring */
  --focus-ring:       rgba(46, 123, 214, 0.45);

  /* ---- Families -------------------------------------------------- */
  --font-serif:   'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-display: 'Quicksand', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, sans-serif;
  --font-hand:    'Caveat', 'Bradley Hand', cursive;

  /* ---- Weights --------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ---- Fluid type scale (clamp: min · vw · max) ------------------ */
  --text-display:  clamp(2.75rem, calc(1.6rem + 5.5vw), 5.5rem);  /* hero serif */
  --text-h1:       clamp(2.1rem, calc(1.4rem + 3.2vw), 3.5rem);
  --text-h2:       clamp(1.6rem, calc(1.2rem + 1.8vw), 2.4rem);
  --text-h3:       clamp(1.3rem, calc(1.1rem + 0.9vw), 1.7rem);
  --text-h4:       1.25rem;
  --text-lg:       1.125rem;
  --text-base:     1rem;        /* 16px body floor */
  --text-sm:       0.875rem;
  --text-xs:       0.75rem;
  --text-hand:     clamp(1.5rem, calc(1.1rem + 1.4vw), 2.25rem); /* handwritten accent */

  /* ---- Line heights ---------------------------------------------- */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  /* ---- Letter spacing -------------------------------------------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.18em;   /* uppercase eyebrows / labels */

  /* ---- Spacing scale (4px base) ---------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 7rem;      /* section rhythm */

  /* ---- Layout ---------------------------------------------------- */
  --container:        1180px;
  --container-narrow: 760px;
  --gutter:           clamp(1.25rem, 4vw, 3rem);

  /* ---- Radii — generous & rounded (storybook softness) ----------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;   /* default card */
  --radius-lg:   24px;   /* feature cards, hero panels */
  --radius-xl:   32px;
  --radius-pill: 999px;  /* buttons, chips, badges */
  --radius-blob: 48% 52% 60% 40% / 55% 45% 55% 45%; /* organic decor */

  /* ---- Shadows — soft warm-brown elevation, never harsh black ---- */
  --shadow-xs:  0 1px 2px rgba(58, 42, 26, 0.06);
  --shadow-sm:  0 2px 8px rgba(58, 42, 26, 0.08);
  --shadow-md:  0 8px 24px rgba(58, 42, 26, 0.10);
  --shadow-lg:  0 18px 48px rgba(58, 42, 26, 0.14);
  --shadow-cta: 0 8px 20px rgba(240, 137, 47, 0.34);   /* sunset glow under CTA */
  --shadow-gold:0 10px 36px rgba(242, 199, 91, 0.30);  /* gold glow on dark */

  /* ---- Borders --------------------------------------------------- */
  --border-width: 1px;
  --border-width-bold: 2px;

  /* ---- Motion — gentle, warm, a touch of bounce ------------------ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
}

/* ---- Element defaults -------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings default to the joyful rounded display face.
   Add class .serif to make any heading the sacred serif. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--text-heading);
  margin: 0;
}

.serif        { font-family: var(--font-serif); font-weight: var(--weight-600, 600); }
.font-serif   { font-family: var(--font-serif); }
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-hand    { font-family: var(--font-hand); }

/* Uppercase eyebrow / kicker label */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* Handwritten magical accent */
.handwritten {
  font-family: var(--font-hand);
  font-size: var(--text-hand);
  line-height: 1.1;
}

/* ================================================================
   MODE B — STARLIGHT / SACRED
   Re-points the semantic aliases to the dark palette so components
   inside automatically adapt.
   ================================================================ */
.mode-starlight,
[data-mode="starlight"] {
  --bg-canvas:        var(--night-blue);
  --bg-canvas-deep:   var(--twilight-indigo);
  --surface-card:     var(--night-blue-700);
  --surface-sunk:     var(--twilight-indigo);

  --brand-primary:    var(--heavenly-gold);
  --brand-secondary:  var(--sunny-gold);
  --cta:              var(--heavenly-gold);   /* gold CTA on dark */
  --cta-hover:        #E8B945;
  --cta-text:         var(--night-blue);

  --text-body:        var(--starlight-cream);
  --text-heading:     var(--heavenly-gold);
  --text-muted:       rgba(253, 246, 232, 0.74);
  --text-faint:       rgba(253, 246, 232, 0.45);
  --text-on-brand:    var(--night-blue);
  --text-link:        var(--heavenly-gold);

  --border-soft:      rgba(242, 199, 91, 0.18);
  --border-strong:    rgba(242, 199, 91, 0.34);
  --border-gold:      rgba(242, 199, 91, 0.55);

  --focus-ring:       rgba(242, 199, 91, 0.55);
}