/* ============================================================
   UniPaith Design Tokens
   Source of truth: leozhu0621-web/unipaith-landing-page
   - Fonts: Lora (serif, headings) + Inter (sans, body)
   - Palette: fog · steel · ocean · navy · gold
   ============================================================ */

/* -------- Webfonts: Lora + Inter from Google Fonts -------- */
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Inter:wght@400;500;600;700;800;900&family=Caveat:wght@500;600;700&display=swap");

:root {
  /* ---- Brand palette (full scales) ---- */
  /* Fog — warm off-whites for light section backgrounds */
  --fog-50:  #FEFDFB;
  --fog-100: #FDFCF8;
  --fog-200: #F5F3EC;

  /* Steel — cool slate mid-tones, dividers, muted copy */
  --steel-300: #8A96A8;
  --steel-400: #6B7A90;
  --steel-500: #4D5F78;
  --steel-600: #3D4E65;
  --steel-700: #2D3D52;

  /* Ocean — cobalt accent, links, primary actions on light */
  --ocean-300: #5A8FE0;
  --ocean-400: #447ED9;
  --ocean-500: #2E6DD4;
  --ocean-600: #2558AA;
  --ocean-700: #1C4480;

  /* Navy — midnight dark-mode surfaces, hero/footer bg, primary text */
  --navy-300: #1A3050;
  --navy-400: #132443;
  --navy-500: #0C1C35;
  --navy-600: #09152A;
  --navy-700: #060E1F;
  --navy-800: #040A15;
  --navy-900: #02050B;

  /* Gold — sunlit-yellow CTAs, highlights, key moments */
  --gold-300: #FFF04D;
  --gold-400: #FFEA1A;
  --gold-500: #FFE500;
  --gold-600: #D9C300;
  --gold-700: #B3A000;

  /* ---- Semantic tokens (light theme — matches src/index.css) ---- */
  --background: #FEFDFB;              /* warm white (HSL 43 50% 98%) */
  --foreground: #0C1C35;              /* navy-500 (HSL 213 65% 13%) */

  --card: #FFFFFF;
  --card-foreground: #0C1C35;

  --primary: #0C1C35;                 /* navy-500 */
  --primary-foreground: #FEFDFB;

  --secondary: #2E6DD4;               /* ocean-500 */
  --secondary-foreground: #FEFDFB;

  --accent: #FFE500;                  /* gold-500 */
  --accent-foreground: #0C1C35;

  --muted: #ECE8DC;                   /* warm grey */
  --muted-foreground: #5A6B80;

  --destructive: #EF4444;
  --destructive-foreground: #FFFFFF;

  --border: #E8E3D4;                  /* warm warm-white border */
  --input: #E8E3D4;
  --ring: #2E6DD4;                    /* ocean focus ring */

  /* Shadows — subtle on light, luminous gold for CTA */
  --shadow-xs: 0 1px 2px rgba(12, 28, 53, 0.04);
  --shadow-sm: 0 1px 3px rgba(12, 28, 53, 0.06), 0 1px 2px rgba(12, 28, 53, 0.04);
  --shadow-md: 0 4px 12px rgba(12, 28, 53, 0.08);
  --shadow-lg: 0 8px 25px -5px rgba(12, 28, 53, 0.10);
  --shadow-2xl: 0 25px 50px -12px rgba(12, 28, 53, 0.25);
  --shadow-glow-gold: 0 0 24px rgba(255, 229, 0, 0.35);
  --shadow-glow-gold-strong: 0 0 20px rgba(255, 229, 0, 0.40);

  /* Radii — shadcn default (--radius = 0.75rem = 12px) */
  --radius-sm: 0.5rem;   /* 8px */
  --radius:    0.75rem;  /* 12px — default for cards/inputs */
  --radius-md: 0.875rem; /* 14px */
  --radius-lg: 1rem;     /* 16px */
  --radius-xl: 1.25rem;  /* 20px */
  --radius-2xl: 1.5rem;  /* 24px — hero cards, big buttons */
  --radius-full: 9999px;

  /* Spacing (Tailwind scale, used by source) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;

  /* ---- Typography ---- */
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-med: 300ms;
  --dur-slow: 700ms;
}

/* ---- Dark section token overrides (used on navy hero/footer/dark CTAs) ---- */
.unipaith-dark,
[data-unipaith-theme="dark"] {
  --background: #0C1C35;
  --foreground: #FDFCF8;
  --card: #132443;
  --card-foreground: #FDFCF8;
  --primary: #2E6DD4;
  --primary-foreground: #FFFFFF;
  --secondary: #5A8FE0;
  --accent: #FFE500;
  --accent-foreground: #0C1C35;
  --muted: #132443;
  --muted-foreground: #8A96A8;
  --border: rgba(253, 252, 248, 0.15);
  --ring: #2E6DD4;
}

/* ============================================================
   Base type — matches src/index.css behavior
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--foreground);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
}

/* Display — massive hero headline (Hero "Everyone's Private College Advisor") */
.up-display,
h1.up-display {
  font-size: clamp(3rem, 6vw + 1rem, 4.5rem); /* 48 → 72 */
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* h1 / section-title — e.g. "Admissions is broken" */
.up-h1, h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);    /* 32 → 48 */
  line-height: 1.05;
  font-weight: 700;
}

/* h2 — e.g. "Built for both sides of admissions" */
.up-h2, h2 {
  font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem); /* 28 → 36 */
  line-height: 1.15;
  font-weight: 700;
}

/* h3 — card titles, walkthrough step titles */
.up-h3, h3 {
  font-size: clamp(1.25rem, 0.5vw + 1rem, 1.5rem); /* 20 → 24 */
  line-height: 1.25;
  font-weight: 700;
}

h4 { font-size: 1.125rem; font-weight: 600; }

/* Lede — the tagline sitting under every h2 */
.up-lede {
  font-family: var(--font-body);
  color: var(--muted-foreground);
  font-size: 1.125rem; /* 18 */
  line-height: 1.6;
  font-weight: 400;
  max-width: 36rem;
}

/* Body */
p, .up-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--foreground);
}
.up-body-muted { color: var(--muted-foreground); }

/* Small + eyebrow (used for "FOR STUDENTS" / "POWERED BY AI" pills) */
.up-eyebrow {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ocean-500);
}
.up-small {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Scroll-to-explore chrome text */
.up-caps {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* Numbers — Lora always (stat counters, match scores) */
.up-stat {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.25rem, 2vw + 1rem, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

code, pre, .up-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}