/* ==========================================================================
   DESIGN TOKENS — Ahmad Safdar Digital Hub
   Palette: deep black + gold/bronze, editorial-luxury direction.
   Signature idea unchanged: glass + water motifs drawn from Ahmad's own
   alpine-lake photos — now rendered in warm gold light instead of cool tech blue.
   ========================================================================== */

:root {
  /* ---- Dark theme (default) ---- */
  --bg: #0a0806;
  --surface: #120e0a;
  --surface-2: #17130d;
  --surface-3: #211a11;
  --glass-fill: rgba(212, 175, 106, 0.045);
  --glass-fill-strong: rgba(212, 175, 106, 0.085);
  --glass-border: rgba(212, 175, 106, 0.16);
  --ink: #f6efe1;
  --ink-soft: #d7c8ac;
  --mist: #9c8d72;
  --line: rgba(212, 175, 106, 0.12);

  /* gold / bronze system — replaces the old azure/cyan/violet trio */
  --gold: #cda15b;
  --gold-bright: #f0cd8d;
  --bronze: #8a5a2c;
  --bronze-deep: #5e3c1c;

  /* kept as aliases so existing component/JS references keep working */
  --azure: var(--bronze);
  --azure-soft: var(--gold);
  --cyan: var(--gold-bright);
  --violet: var(--bronze);
  --violet-deep: var(--bronze-deep);

  --grad-signature: linear-gradient(135deg, var(--bronze) 0%, var(--gold) 55%, var(--gold-bright) 100%);
  --grad-radial-glow: radial-gradient(circle, rgba(240, 205, 141, 0.28), transparent 70%);
  --grad-surface: linear-gradient(180deg, rgba(212,175,106,0.05), rgba(212,175,106,0.01));

  --shadow-soft: 0 10px 40px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 60px rgba(205, 161, 91, 0.14);

  /* ---- Type ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --fs-sm: clamp(0.88rem, 0.84rem + 0.2vw, 0.98rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-md: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-lg: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-xl: clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
  --fs-2xl: clamp(2.8rem, 2.1rem + 3.5vw, 5rem);
  --fs-3xl: clamp(3.4rem, 2.4rem + 5vw, 7.2rem);

  /* ---- Space ---- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-sm: 1rem;
  --sp-md: 1.75rem;
  --sp-lg: 3rem;
  --sp-xl: 5rem;
  --sp-2xl: 8rem;
  --sp-3xl: 12rem;

  --container: 1280px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;
}

/* ---- Light theme override ---- */
[data-theme="light"] {
  --bg: #faf6ee;
  --surface: #ffffff;
  --surface-2: #f3ecdc;
  --surface-3: #ece1c9;
  --glass-fill: rgba(90, 60, 20, 0.035);
  --glass-fill-strong: rgba(90, 60, 20, 0.06);
  --glass-border: rgba(90, 60, 20, 0.14);
  --ink: #241b0e;
  --ink-soft: #4a3b23;
  --mist: #7a6a4c;
  --line: rgba(90, 60, 20, 0.14);

  --gold: #a97a2e;
  --gold-bright: #c99a45;
  --bronze: #6e4620;
  --bronze-deep: #4a2f15;

  --azure: var(--bronze);
  --azure-soft: var(--gold);
  --cyan: var(--gold-bright);
  --violet: var(--bronze);
  --violet-deep: var(--bronze-deep);

  --shadow-soft: 0 10px 40px rgba(60, 40, 10, 0.10);
  --shadow-glow: 0 0 60px rgba(169, 122, 46, 0.10);
}