/* Kamargo — cinematic black + liquid glass */

:root {
  --bg: #07070a;
  --scene:
    radial-gradient(980px 620px at 8% -14%, rgba(212, 168, 96, 0.18), transparent 58%),
    radial-gradient(820px 540px at 96% 6%, rgba(90, 80, 160, 0.20), transparent 56%),
    radial-gradient(720px 520px at 78% 110%, rgba(40, 70, 110, 0.22), transparent 52%),
    radial-gradient(640px 420px at -8% 78%, rgba(120, 50, 30, 0.14), transparent 50%),
    #07070a;
  --bg-elev: #101014;
  --bg-card: rgba(18, 18, 22, 0.42);
  --paper: #0c0c10;

  --ink: #f4efe6;
  --ink-2: rgba(244, 239, 230, 0.68);
  --ink-3: rgba(244, 239, 230, 0.42);
  --ink-4: rgba(244, 239, 230, 0.20);

  --gold: #d4b483;
  --gold-2: #ead9b4;
  --gold-dim: rgba(212, 180, 131, 0.16);
  --gold-line: rgba(212, 180, 131, 0.38);

  --ok: #8fcdad;
  --warn: #e0b36a;
  --danger: #e07a5f;

  --glass: linear-gradient(165deg,
    rgba(255,255,255,0.16) 0%,
    rgba(255,255,255,0.05) 42%,
    rgba(255,255,255,0.10) 100%);
  --glass-strong: linear-gradient(165deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.14) 100%);
  --glass-fill: rgba(16, 16, 20, 0.38);
  --glass-fill-2: rgba(14, 14, 18, 0.62);
  --stroke: rgba(255, 255, 255, 0.16);
  --stroke-2: rgba(255, 255, 255, 0.26);
  --ink-stroke: rgba(255,255,255,0.14);
  --highlight: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.35);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 10px 32px rgba(0, 0, 0, 0.32);

  --blur: blur(28px) saturate(1.55) brightness(1.08);
  --blur-lg: blur(44px) saturate(1.7) brightness(1.1);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --font-logo: "Exo 2", "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Syne", "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Outfit", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  --fs-h1: clamp(28px, 3vw, 40px);
  --fs-h2: 22px;
  --fs-card: 15px;
  --fs-body: 15px;
  --fs-micro: 11px;
  --fs-price: 17px;

  --nav-h: 72px;
  --drawer-w: 440px;
  --grid-gap: 18px;
  --well-pad: 4px;
  --ease: cubic-bezier(.22,.8,.24,1);
  --t: 180ms;
  --pad: 16px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t: 1ms; }
}