/* CityBit — Design Tokens
   Editorial Cinematheque aesthetic — warm dark, muted gold, film grain */

:root {
  /* ─── Colors ─────────────────────────────────────── */
  --bg:             #13100d;
  --bg-deep:        #0b0906;
  --surface:        #1c1815;
  --surface-2:      #272320;
  --surface-3:      #34302c;
  --surface-glass:  rgba(28, 24, 21, 0.72);

  --accent:         #d4a14a;
  --accent-hover:   #e8b35a;
  --accent-dim:     #8a6b30;
  --accent-glow:    rgba(212, 161, 74, 0.35);
  --accent-soft:    rgba(212, 161, 74, 0.12);

  --text:           #f5f0e8;
  --text-muted:     rgba(245, 240, 232, 0.62);
  --text-dim:       rgba(245, 240, 232, 0.35);
  --text-faint:     rgba(245, 240, 232, 0.18);

  --border:         rgba(245, 240, 232, 0.08);
  --border-strong:  rgba(245, 240, 232, 0.18);
  --overlay:        rgba(11, 9, 6, 0.88);
  --overlay-soft:   rgba(11, 9, 6, 0.55);

  --danger:         #d4605a;
  --success:        #7aa66e;

  /* ─── Typography ─────────────────────────────────── */
  --font-display:   "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:      "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:      ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-xs:   clamp(11px, 0.75vw, 12px);
  --fs-sm:   clamp(13px, 0.9vw, 14px);
  --fs-base: clamp(15px, 1vw, 16px);
  --fs-md:   clamp(17px, 1.15vw, 19px);
  --fs-lg:   clamp(21px, 1.5vw, 24px);
  --fs-xl:   clamp(28px, 2.2vw, 36px);
  --fs-2xl:  clamp(40px, 3.6vw, 58px);
  --fs-3xl:  clamp(52px, 5vw, 92px);
  --fs-hero: clamp(64px, 7vw, 128px);

  --lh-tight:   1.05;
  --lh-snug:    1.22;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;

  /* ─── Spacing (8pt grid) ─────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 112px;
  --space-11: 160px;

  /* ─── Radii ──────────────────────────────────────── */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ─── Shadows ────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 28px 72px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 20px 60px var(--accent-glow);
  --shadow-inset: inset 0 1px 0 rgba(245, 240, 232, 0.06);

  /* ─── Motion ─────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     150ms;
  --dur-normal:   260ms;
  --dur-slow:     440ms;
  --dur-hero:     800ms;

  /* ─── Layout ─────────────────────────────────────── */
  --container-max: 1680px;
  --header-height: 76px;
  --gutter-x:      clamp(20px, 4vw, 64px);
  --card-w:        clamp(150px, 14vw, 220px);
  --card-w-lg:     clamp(180px, 17vw, 260px);
  --focus-ring-w:  3px;

  /* ─── Z-index stack ──────────────────────────────── */
  --z-base:    0;
  --z-content: 10;
  --z-header:  100;
  --z-modal:   1000;
  --z-player:  2000;
  --z-toast:   3000;
}