/* ============ VARIABLES.CSS ============ */

/* --- Root Tokens --- */
:root {
  color-scheme: dark;

  /* Colors - EDIT ME */
  --color-bg: #0a0a0a;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #151515;
  --color-text: #f2ede4;
  --color-text-muted: #8e877d;
  --color-text-dim: #4b4742;
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-hover: rgba(255, 255, 255, 0.18);
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-heavy: rgba(0, 0, 0, 0.68);
  --color-accent-soft: #d6c0a2;

  /* Typography - EDIT ME */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", "Inter", sans-serif;
  --font-mono: "DM Sans", "Inter", sans-serif;

  /* Font Sizes - EDIT ME */
  --text-hero: clamp(64px, 11vw, 148px);
  --text-h1: clamp(48px, 7vw, 96px);
  --text-h2: clamp(34px, 5vw, 64px);
  --text-h3: clamp(24px, 3vw, 34px);
  --text-body-lg: clamp(18px, 1.8vw, 22px);
  --text-body: clamp(15px, 1.4vw, 18px);
  --text-small: 14px;
  --text-label: 11px;
  --text-nav: 13px;

  /* Spacing - EDIT ME */
  --section-y: clamp(80px, 10vw, 160px);
  --section-y-tight: clamp(56px, 7vw, 96px);
  --container-x: clamp(24px, 5vw, 80px);
  --max-width: 1280px;
  --container-narrow: min(860px, calc(100vw - 2 * var(--container-x)));
  --nav-height: 84px;
  --radius-sm: 3px;
  --radius-pill: 999px;
  --footer-watermark: clamp(48px, 9vw, 120px);

  /* Motion - EDIT ME */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.25s;
  --duration-base: 0.5s;
  --duration-slow: 0.8s;

  /* Z-index layers - EDIT ME */
  --z-base: 0;
  --z-card: 10;
  --z-nav: 100;
  --z-overlay: 1000;
  --z-transition: 9000;
  --z-cursor: 9999;
}