/* ============================================================
   POAP Studio — Colors & Type
   Source of truth for design tokens.
   Mirrors styles.css in the landing repo, with semantic
   helpers added on top.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@200..700&family=Manrope:wght@300..700&display=swap');

:root {
  /* ---------- Core neutrals ---------- */
  --black: #171717;          /* Primary background */
  --white: #FCFCFC;          /* Primary contrast / light sections */

  /* Warm stone grays — subtle amber undertone for cohesion */
  --gray-100: #F5F4F2;
  --gray-200: #E8E6E3;
  --gray-300: #D5D2CE;
  --gray-400: #A8A29D;
  --gray-500: #9A948F;
  --gray-600: #87827C;
  --gray-700: #403D39;
  --gray-800: #262422;
  --gray-900: #1A1918;

  /* ---------- Warm accent ---------- */
  --cream: #F0EBE4;          /* Highlights, glows, selection */

  /* ---------- Semantic foreground (dark theme default) ---------- */
  --fg-1: var(--white);      /* Primary text */
  --fg-2: var(--gray-300);   /* Secondary text */
  --fg-3: var(--gray-400);   /* Tertiary / supporting text, eyebrows */
  --fg-4: var(--gray-500);   /* Muted labels, captions */
  --fg-5: var(--gray-600);   /* Disabled / deepest mute */
  --fg-accent: var(--cream); /* Warm accent on dark */

  /* Semantic foreground (light theme — use inside .on-light blocks) */
  --fg-1-light: var(--black);
  --fg-2-light: var(--gray-700);
  --fg-3-light: var(--gray-600);
  --fg-4-light: var(--gray-500);

  /* ---------- Surfaces ---------- */
  --bg-1: var(--black);      /* Primary canvas */
  --bg-2: var(--gray-900);   /* Card / nested panel */
  --bg-3: var(--gray-800);   /* Hover / divider fill */
  --bg-light-1: var(--white);
  --bg-light-2: var(--gray-100);

  /* ---------- Lines & dividers ---------- */
  --line-1: var(--gray-800);
  --line-1-light: var(--gray-200);
  --line-strong: rgba(255,255,255,0.06);

  /* ---------- Translucent surfaces (for backdrop-blur chrome) ---------- */
  --glass-dark: rgba(23, 23, 23, 0.6);
  --glass-dark-strong: rgba(23, 23, 23, 0.75);
  --glass-light: rgba(240, 235, 228, 0.03);
  --chip: rgba(252, 252, 252, 0.12);
  --chip-strong: rgba(252, 252, 252, 0.18);

  /* ---------- Fonts ---------- */
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Easing ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:   cubic-bezier(0.33, 1, 0.68, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Radii ---------- */
  --radius-xs: 4px;    /* tiny chips */
  --radius-sm: 6px;    /* cards, media */
  --radius-md: 10px;   /* form inputs */
  --radius-lg: 16px;
  --radius-pill: 100px; /* buttons, nav pill, tags */
  --radius-full: 9999px;

  /* ---------- Spacing scale (4/8 base) ---------- */
  --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: 80px;
  --space-10: 120px;
  --space-11: 160px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 4px 24px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.50);
  --shadow-lift: 0 8px 40px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(240, 235, 228, 0.15);
  --shadow-cta-light: 0 20px 60px rgba(23,23,23,0.15);
  --glow-cream: 0 0 30px rgba(240, 235, 228, 0.25);
  --glow-cream-soft: 0 0 80px rgba(240, 235, 228, 0.15);

  /* ---------- Type scale (semantic) ---------- */
  /* Display — hero headlines */
  --display-xl: clamp(48px, 9vw, 180px); /* footer-giant style */
  --display-lg: clamp(40px, 6.2vw, 96px); /* hero headline */
  --display-md: clamp(40px, 6vw, 84px);   /* section title */
  --display-sm: clamp(40px, 6vw, 72px);   /* page hero title */

  /* Headings */
  --h1: clamp(32px, 4vw, 48px);
  --h2: clamp(28px, 3vw, 40px);
  --h3: 22px;
  --h4: 20px;
  --h5: 18px;

  /* Body */
  --body-lg: 16px;
  --body:    15px;
  --body-sm: 14px;
  --caption: 13px;
  --eyebrow: 11px;   /* all-caps label, 0.14em tracking */
  --micro:   10px;   /* uppercase chip tag */
}

/* ============================================================
   Semantic type helpers — apply directly to elements
   ============================================================ */

.ps-display-lg,
h1.ps-hero {
  font-family: var(--font-heading);
  font-size: var(--display-lg);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--fg-1);
}

.ps-display-lg em,
h1.ps-hero em {
  font-style: normal;
  font-weight: 600;
  text-shadow: var(--glow-cream-soft);
}

.ps-section-title,
h2.ps-section {
  font-family: var(--font-heading);
  font-size: var(--display-md);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg-1);
}

.ps-h2 {
  font-family: var(--font-heading);
  font-size: var(--h2);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--fg-1);
}

.ps-h3 {
  font-family: var(--font-heading);
  font-size: var(--h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg-1);
}

.ps-h4 {
  font-family: var(--font-heading);
  font-size: var(--h4);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.ps-body {
  font-family: var(--font-body);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--fg-3);
}

.ps-body-lg {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  font-weight: 400;
  line-height: 1.8;
  color: var(--fg-3);
}

.ps-caption {
  font-family: var(--font-body);
  font-size: var(--caption);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-4);
}

.ps-eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ps-micro-tag {
  font-family: var(--font-body);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ps-testimonial {
  font-family: var(--font-body);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--fg-1);
}

/* On-light inversion helper */
.on-light {
  --fg-1: var(--fg-1-light);
  --fg-2: var(--fg-2-light);
  --fg-3: var(--fg-3-light);
  --fg-4: var(--fg-4-light);
  --bg-1: var(--bg-light-1);
  --bg-2: var(--bg-light-2);
  --line-1: var(--line-1-light);
  background: var(--bg-light-1);
  color: var(--fg-1-light);
}