/*
 * Mang Bumbay — shared design tokens.
 * One source of truth for the palette, type roles, spacing, and elevation,
 * referenced by every page. Brand values come from CLAUDE.md (override when
 * real brand_assets/ land). Tailwind reads these via the config in tw-config.js.
 */
:root {
  /* Palette */
  --ink: #21161b;        /* deep charred aubergine — primary bg/anchor */
  --saffron: #e8a317;    /* turmeric/biryani gold — primary accent & CTAs */
  --chili: #9e2b25;      /* deep brick-chili — secondary, heat */
  --cardamom: #5b7a5a;   /* herb green — fresh accent, success */
  --parchment: #f3e9d2;  /* warm light surface for cards/menus */

  /* Type roles */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* Spacing scale (consistent tokens, not random Tailwind steps) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Elevation: base -> elevated -> floating (color-tinted, low opacity) */
  --shadow-elevated: 0 1px 2px rgba(33, 22, 27, 0.18),
                     0 6px 16px -8px rgba(33, 22, 27, 0.30);
  --shadow-floating: 0 4px 10px -2px rgba(33, 22, 27, 0.22),
                     0 18px 40px -12px rgba(33, 22, 27, 0.38);
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  line-height: 1.7;
  background: var(--ink);
  color: var(--parchment);
}
h1, h2, h3, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}
.font-mono, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Horizontal chip rails: scrollable but no visible scrollbar. */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Quality floor: visible keyboard focus + reduced motion. */
:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}