/* =========================================================
   Letícia Souza — Design Tokens
   Colors + Typography
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,600&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Primary — Purple */
  --purple-950: #150827;
  --purple-900: #1F0E3A;
  --purple-800: #2D1454;
  --purple-700: #401E78;
  --purple-600: #5A2BA8;
  --purple-500: #7B3FE4;
  --purple-400: #9D6BFF;
  --purple-300: #C5A6FF;
  --purple-200: #E2D4FF;
  --purple-100: #F2EBFF;

  /* Accent — Magenta / Pink */
  --pink-700:  #8E1A5C;
  --pink-600:  #C42A85;
  --pink-500:  #E5398F;
  --pink-400:  #F25BA3;
  --pink-300:  #FF8FBE;
  --pink-200:  #FFB8D4;
  --pink-100:  #FFE3EE;

  /* Highlight — Gold */
  --gold-700:  #8C6A12;
  --gold-600:  #C99919;
  --gold-500:  #E8B739;
  --gold-400:  #F2CB5C;
  --gold-300:  #F8DC85;
  --gold-200:  #FBEAB0;
  --gold-100:  #FEF6DC;

  /* Neutrals */
  --ink-1000:  #0A0414;
  --ink-900:   #15091E;
  --ink-800:   #221432;
  --ink-700:   #3A2B4D;
  --ink-600:   #574668;
  --ink-500:   #786988;
  --ink-400:   #9C8FAB;
  --ink-300:   #C2B8CD;
  --ink-200:   #E0D9E8;
  --ink-100:   #F1ECF5;
  --ink-50:    #FAF7FC;
  --white:     #FFFFFF;

  /* Semantic surfaces */
  --bg:              var(--purple-950);
  --bg-elevated:     var(--purple-900);
  --bg-card:         rgba(255,255,255,0.04);
  --bg-card-hover:   rgba(255,255,255,0.07);
  --surface-light:   var(--ink-50);
  --surface-paper:   var(--white);

  /* Semantic foreground */
  --fg:              var(--ink-50);
  --fg-muted:        rgba(255,255,255,0.72);
  --fg-subtle:       rgba(255,255,255,0.55);
  --fg-faint:        rgba(255,255,255,0.32);
  --fg-on-light:     var(--ink-900);
  --fg-on-light-muted: var(--ink-600);
  --fg-on-gold:      var(--ink-1000);

  /* Brand accents */
  --brand:           var(--purple-500);
  --brand-deep:      var(--purple-700);
  --brand-bright:    var(--pink-500);
  --brand-shine:     var(--gold-500);
  --cta:             var(--gold-500);
  --cta-hover:       var(--gold-400);
  --cta-press:       var(--gold-600);
  --whatsapp:        #25D366;
  --whatsapp-hover:  #20BD5A;

  /* Borders */
  --border-faint:    rgba(255,255,255,0.08);
  --border-soft:     rgba(255,255,255,0.14);
  --border-strong:   rgba(255,255,255,0.28);
  --border-gold:     rgba(232,183,57,0.55);

  /* Gradients */
  --grad-stage:      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(229,57,143,0.45) 0%, rgba(123,63,228,0.25) 35%, rgba(21,8,39,0) 75%);
  --grad-spotlight:  radial-gradient(circle at 50% 0%, rgba(248,220,133,0.35) 0%, rgba(229,57,143,0.20) 30%, transparent 70%);
  --grad-brand:      linear-gradient(135deg, var(--purple-600) 0%, var(--pink-500) 60%, var(--gold-500) 100%);
  --grad-brand-soft: linear-gradient(135deg, var(--purple-700) 0%, var(--pink-600) 100%);
  --grad-gold:       linear-gradient(180deg, var(--gold-400) 0%, var(--gold-600) 100%);
  --grad-gold-shine: linear-gradient(135deg, #FBEAB0 0%, var(--gold-500) 45%, var(--gold-700) 100%);
  --grad-night:      linear-gradient(180deg, var(--purple-950) 0%, var(--purple-800) 100%);
  --grad-protect-top: linear-gradient(180deg, rgba(10,4,20,0.85) 0%, rgba(10,4,20,0) 100%);
  --grad-protect-btm: linear-gradient(0deg, rgba(10,4,20,0.95) 0%, rgba(10,4,20,0) 100%);

  /* Typography */
  --font-display:    'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:       'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-display:      clamp(3.25rem, 9vw, 6.5rem);
  --fs-h1:           clamp(2.25rem, 6vw, 3.75rem);
  --fs-h2:           clamp(1.75rem, 4.5vw, 2.5rem);
  --fs-h3:           1.5rem;
  --fs-h4:           1.25rem;
  --fs-lead:         1.125rem;
  --fs-body:         1rem;
  --fs-small:        0.875rem;
  --fs-micro:        0.75rem;
  --fs-eyebrow:      0.8125rem;

  --lh-tight:        1.05;
  --lh-snug:         1.2;
  --lh-normal:       1.5;
  --lh-loose:        1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.18em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Spacing */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* Radii */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:  0 24px 60px rgba(0,0,0,0.55);
  --shadow-xl:  0 40px 100px rgba(0,0,0,0.65);
  --glow-pink:  0 0 40px rgba(229,57,143,0.45);
  --glow-gold:  0 0 32px rgba(232,183,57,0.55);
  --glow-purple:0 0 60px rgba(123,63,228,0.45);
  --shadow-cta: 0 14px 40px -10px rgba(232,183,57,0.65), 0 6px 18px rgba(232,183,57,0.30);

  /* Blur */
  --blur-sm: blur(8px);
  --blur-md: blur(20px);
  --blur-lg: blur(48px);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   480ms;

  /* Layout */
  --container-max: 1240px;
  --container-tight: 920px;
  --gutter:    24px;
  --gutter-lg: 48px;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-400);
}

.text-gradient-gold {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}