/* ============================================================
   PASTEL DAWN — Colors & Type tokens
   Dawn breaking over plum: warm, premium, engineered.
   Fonts loaded from Google Fonts CDN below. For production,
   self-host Space Grotesk + Manrope and remove the @import.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Base plum (surfaces, deepest to lighter) ---- */
  --plum-900: #140B26;   /* deepest, near-black plum */
  --plum-800: #1A1030;   /* darker plum (gradient end) */
  --plum-700: #28183B;   /* deep plum (gradient start / base bg) */
  --plum-600: #34204B;   /* raised surface */
  --plum-500: #43295E;   /* hover surface / borders */
  --plum-400: #573872;   /* subtle line on dark */

  /* ---- Dawn accents (warm light rising) ---- */
  --coral:        #F8978D;  /* primary accent */
  --coral-deep:   #F0746C;  /* coral pressed / sun core */
  --apricot:      #FCC9A2;  /* warm mid */
  --peach:        #F6B7A9;  /* soft coral-peach */
  --cream:        #FCD9CB;  /* lightest warm */
  --mauve:        #C79BB4;  /* rose-mauve bridge tone (logo gradient mid) */

  /* ---- Text ---- */
  --fg-1: #F8ECE8;   /* primary warm off-white */
  --fg-2: #D6C2C9;   /* secondary muted mauve */
  --fg-3: #9E8A99;   /* tertiary / disabled */
  --fg-on-light: #28183B; /* text on warm/light surfaces */

  /* ---- Semantic surfaces ---- */
  --bg:          var(--plum-700);
  --bg-deep:     var(--plum-800);
  --surface:     var(--plum-600);
  --surface-2:   var(--plum-500);
  --border:      rgba(248,236,232,0.10);
  --border-strong: rgba(248,236,232,0.18);
  --on-glass:    rgba(248,236,232,0.06);

  /* ---- Brand gradients ---- */
  --grad-dawn:   linear-gradient(135deg, #F8978D 0%, #FCC9A2 100%);
  --grad-sun:    radial-gradient(circle at 50% 100%, #F0746C 0%, #F8978D 30%, #FCC9A2 60%, #F6B7A9 100%);
  --grad-logo:   linear-gradient(180deg, #FCC9A2 0%, #F8978D 45%, #C79BB4 100%);
  --grad-text:   linear-gradient(100deg, #FCD9CB 0%, #F8978D 50%, #C79BB4 100%);
  --grad-plum:   linear-gradient(180deg, #28183B 0%, #1A1030 100%);

  /* ---- Glow (the breathing sun) ---- */
  --glow-coral:  rgba(248,151,141,0.45);
  --glow-apricot: rgba(252,201,162,0.35);

  /* ---- Typography families ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* ---- Type scale (fluid where useful) ---- */
  --t-display: clamp(2.75rem, 1.2rem + 5.4vw, 5.5rem);   /* hero headline */
  --t-h1: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --t-h2: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --t-h3: 1.5rem;
  --t-h4: 1.25rem;
  --t-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);  /* subtitle / lead body */
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-eyebrow: 0.8125rem;   /* labels / overline */

  /* ---- Line heights ---- */
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.62;

  /* ---- Tracking ---- */
  --tr-display: -0.02em;
  --tr-eyebrow: 0.22em;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Spacing scale (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---- Shadows / elevation ---- */
  --sh-sm: 0 1px 2px rgba(10,5,20,0.30);
  --sh-md: 0 8px 24px rgba(10,5,20,0.40);
  --sh-lg: 0 24px 60px rgba(10,5,20,0.55);
  --sh-glow: 0 12px 40px rgba(248,151,141,0.28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
}

/* ============================================================
   Base element styling (semantic defaults)
   ============================================================ */
.pd-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
}
h1, .pd-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
h2, .pd-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
h3, .pd-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--fg-1);
}
.pd-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--coral);
}
.pd-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
p, .pd-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.pd-small {
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-3);
}

/* Gradient text helper */
.pd-grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}