/* ==========================================================================
   AUTHIFY — Design Tokens
   Single source of truth for color, type, spacing, motion.
   Derived from Design Kit/Brand (Champagne Gold + White/Dark) and the
   Liquid Glass UI reference (blur, radius, shadow, easing scale).
   ========================================================================== */

:root{
  /* ---- Typography -------------------------------------------------- */
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --text-4xl: clamp(2.75rem, 1.8rem + 3.8vw, 5.25rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  --tracking-tight: -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.14em;

  /* ---- Spacing scale ------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --container-w: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius --------------------------------------------------------*/
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ---- Motion --------------------------------------------------------*/
  --ease-glass: cubic-bezier(0.22, 0.68, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 180ms;
  --dur-mid: 360ms;
  --dur-slow: 720ms;

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

  --z-nav: 100;
  --z-mega: 90;
  --z-overlay: 200;
}

/* ==========================================================================
   Light theme (default) — bright, open, minimal, premium
   ========================================================================== */
:root,
[data-theme="light"]{
  --color-bg: #ffffff;
  --color-bg-elevated: #faf9f7;
  --color-bg-sunken: #f3f1ec;

  --color-text: #16140f;
  --color-text-muted: rgba(22, 20, 15, 0.64);
  --color-text-subtle: rgba(22, 20, 15, 0.42);

  --color-border: rgba(22, 20, 15, 0.1);
  --color-border-strong: rgba(22, 20, 15, 0.18);

  --gold-50: #fbf3e4;
  --gold-200: #f0d9af;
  --gold-400: #c9a876;
  --gold-500: #ad8858;
  --gold-600: #8d6c43;
  --gold-contrast: #16140f;

  --glass-surface: rgba(255, 255, 255, 0.55);
  --glass-surface-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(22, 20, 15, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.9);

  --shadow-glass: 0 1px 1px rgba(22,20,15,0.03), 0 8px 24px rgba(22,20,15,0.06), 0 24px 48px -12px rgba(22,20,15,0.08);
  --shadow-float: 0 20px 60px -16px rgba(22,20,15,0.16), 0 4px 16px rgba(22,20,15,0.06);
  --shadow-gold: 0 8px 30px -8px rgba(173,136,88,0.35);

  --scrim: rgba(255,255,255,0.72);

  color-scheme: light;
}

[data-theme="dark"]{
  --color-bg: #08090b;
  --color-bg-elevated: #101215;
  --color-bg-sunken: #000000;

  --color-text: #f6f3ec;
  --color-text-muted: rgba(246, 243, 236, 0.66);
  --color-text-subtle: rgba(246, 243, 236, 0.44);

  --color-border: rgba(246, 243, 236, 0.12);
  --color-border-strong: rgba(246, 243, 236, 0.22);

  --gold-50: #2a2113;
  --gold-200: #7a6138;
  --gold-400: #d8b888;
  --gold-500: #e6cc9f;
  --gold-600: #f0d9af;
  --gold-contrast: #16140f;

  --glass-surface: rgba(255, 255, 255, 0.05);
  --glass-surface-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.24);

  --shadow-glass: 0 1px 1px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.35), 0 24px 60px -12px rgba(0,0,0,0.55);
  --shadow-float: 0 24px 70px -16px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.3);
  --shadow-gold: 0 8px 30px -8px rgba(216,184,136,0.28);

  --scrim: rgba(8,9,11,0.72);

  color-scheme: dark;
}

/* Smooth cross‑theme transition */
html.theme-ready body,
html.theme-ready *{
  transition: background-color var(--dur-mid) var(--ease-smooth),
              border-color var(--dur-mid) var(--ease-smooth),
              color var(--dur-mid) var(--ease-smooth);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}