@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* ============================================================
   DESIGN TOKENS — Top Two Vision Review
   Source of truth for all visual constants.
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --bg: #f8fafc;
  --surface: #ffffff;
  --fg: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --accent: #0d9488;
  --black: #020617;
  --link: #0f766e;
  --dark-surface: #1e293b;

  /* ── Derived / Contextual Colors ── */
  --glass: color-mix(in oklch, var(--surface) 78%, transparent);
  --glass-dark: color-mix(in oklch, var(--dark-surface) 70%, transparent);
  --soft: color-mix(in oklch, var(--accent) 11%, transparent);
  --soft-strong: color-mix(in oklch, var(--accent) 22%, transparent);
  --lift: color-mix(in oklch, var(--fg) 10%, transparent);
  --warn: color-mix(in oklch, var(--fg) 12%, var(--accent));

  /* ── Typography ── */
  --font-display: "Lora", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;

  /* ── Type Scale (fluid) ── */
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: clamp(1.0625rem, 1.3vw, 1.1875rem);
  --text-md: 0.8125rem;
  --text-lg: 0.9375rem;
  --text-xl: 1rem;
  --text-2xl: clamp(1.1875rem, 2vw, 1.5rem);
  --text-3xl: clamp(1.375rem, 2.1vw, 1.75rem);
  --text-4xl: clamp(1.5rem, 2.2vw, 2rem);
  --text-5xl: clamp(1.625rem, 3.3vw, 2.625rem);
  --text-6xl: clamp(2.125rem, 4.6vw, 3.625rem);
  --text-7xl: clamp(2.75rem, 7.2vw, 5.75rem);

  /* ── Spacing Scale ── */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 18px;
  --space-xl: 22px;
  --space-2xl: 28px;
  --space-3xl: 34px;
  --space-4xl: clamp(36px, 6vw, 88px);
  --space-section: clamp(64px, 9vw, 124px);

  /* ── Border Radius ── */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 22px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-4xl: 34px;
  --radius-5xl: 36px;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-sm: 0 12px 34px var(--lift);
  --shadow-md: 0 16px 50px color-mix(in oklch, var(--fg) 8%, transparent);
  --shadow-lg: 0 24px 70px var(--lift);
  --shadow-xl: 0 28px 90px var(--lift);
  --shadow-2xl: 0 34px 110px color-mix(in oklch, var(--fg) 13%, transparent);
  --shadow-hero: 0 44px 130px color-mix(in oklch, var(--black) 62%, transparent);
  --shadow-accent: 0 10px 28px color-mix(in oklch, var(--accent) 26%, transparent);
  --shadow-accent-hover: 0 14px 34px color-mix(in oklch, var(--accent) 34%, transparent);

  /* ── Motion ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.35s;
  --duration-normal: 0.45s;
  --duration-slow: 0.55s;
  --duration-reveal: 0.7s;

  /* ── Layout ── */
  --container-max: 1180px;
  --container-padding: 40px;
  --nav-height: 64px;
  --scroll-offset: 86px;
}