/* Passage to India design tokens.
   The ONLY file allowed to hold raw colours, font stacks, easings and z-index numbers.
   `npm run lint:tokens` fails the build if any other stylesheet uses a raw value.
   Change the look of the whole site here. The living style guide at /style-guide/
   is generated from this file, so it always shows what is actually shipped. */

:root {
  /* ── Colour: palette (raw) ───────────────────────────────── */
  --palette-ink-900: #0B0A08;
  --palette-ink-800: #14120E;
  --palette-ink-700: #1E1A14;
  --palette-ivory-100: #F3EDE2;
  --palette-gold-500: #C9A24D;
  --palette-gold-300: #E2C275;
  --palette-crimson-700: #5E1A1A;
  --palette-coral-400: #D98B7C;

  /* ── Colour: semantic (use these in components) ──────────── */
  --color-bg: var(--palette-ink-900);
  --color-surface: var(--palette-ink-800);
  --color-surface-raised: var(--palette-ink-700);
  --color-text: var(--palette-ivory-100);
  --color-text-muted: rgb(243 237 226 / 0.7);
  --color-text-subtle: rgb(243 237 226 / 0.4);
  --color-line: rgb(243 237 226 / 0.15);
  --color-accent: var(--palette-gold-500);
  --color-accent-bright: var(--palette-gold-300);
  --color-on-accent: var(--palette-ink-900);
  --color-highlight: var(--palette-crimson-700);
  --color-danger: var(--palette-coral-400);
  --color-scrim-0: rgb(11 10 8 / 0);
  --color-scrim-10: rgb(11 10 8 / 0.1);
  --color-scrim-30: rgb(11 10 8 / 0.3);
  --color-scrim-50: rgb(11 10 8 / 0.5);
  --color-scrim-70: rgb(11 10 8 / 0.72);
  --color-scrim-85: rgb(11 10 8 / 0.85);
  --color-scrim-95: rgb(11 10 8 / 0.95);
  --color-loader-ghost: rgb(243 237 226 / 0.1);
  --color-glow: rgb(226 194 117 / 0.9);
  --shadow-text-on-image: 0 1px 2px rgb(0 0 0 / 0.55), 0 2px 28px rgb(0 0 0 / 0.6);   /* any text over a photo */
  --color-glow-soft: rgb(226 194 117 / 0.4);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --font-numeric: var(--font-body);   /* any number shown as content: stats, counts, steps, prices */
  --font-bbl: "Young Serif", "Cormorant Garamond", serif;   /* Bad Boy Labs footer credit only */
  /* Bad Boy Labs credit: one champagne-to-gold foil (no colour shift) with a soft moving shine. */
  --foil-top: #F6E7C1; --foil-mid: #E2C275; --foil-low: #A8843A; --foil-shine: rgb(255 251 240 / 0.95); --foil-clear: rgb(255 251 240 / 0);
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --fs-micro: 0.6875rem;                          /* 11px labels */
  --fs-label: 0.75rem;                            /* 12px eyebrow-free UI labels */
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1rem, 1.15vw, 1.15rem);
  --fs-lead-lg: clamp(1rem, 1.3vw, 1.2rem);
  --fs-h4: clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-h3: clamp(1.6rem, 2.4vw, 2.4rem);
  --fs-h2: clamp(2.6rem, 7vw, 5.5rem);
  --fs-h1: clamp(2.8rem, 8vw, 7.5rem);
  --fs-display: clamp(3.1rem, 11.5vw, 10rem);
  --fs-stat: clamp(3.4rem, 6vw, 5.5rem);

  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-body: 1.6;
  --tracking-display: -0.015em;
  --tracking-label: 0.16em;

  /* ── Space (4px base) ────────────────────────────────────── */
  --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: 96px;
  --space-section: clamp(88px, 12vw, 160px);
  --space-section-sm: clamp(64px, 8vw, 120px);
  --gutter: 20px;
  --max: 1440px;
  --measure: 52ch;
  --tap: 44px;
  /* Fat-finger sliders (bbl-design-defaults Forms): 56px hit strip, 14px track, 36px thumb; 60/16/40 on touch. */
  --slider-h: 56px;
  --slider-track: 14px;
  --slider-thumb: 36px;
  --control-h: 52px;

  /* ── Shape ───────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --border-hair: 1px solid var(--color-line);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-sheen: cubic-bezier(0.37, 0, 0.63, 1);   /* gentle sine: a light band glides, never flashes */
  --dur-fast: 0.3s;
  --dur-base: 0.5s;
  --dur-slow: 1s;
  --dur-slower: 1.4s;
  --dur-page: 0.7s;
  --dur-reveal: 0.4s;   /* opacity-only entrances, never longer */

  /* ── Layers ──────────────────────────────────────────────── */
  --z-base: 1;
  --z-raised: 5;
  --z-menu: 45;
  --z-nav: 50;
  --z-grain: 60;
  --z-cursor: 70;
  --z-overlay: 80;
  --z-loader: 100;
}
@media (pointer: coarse) { :root { --slider-h: 60px; --slider-track: 16px; --slider-thumb: 40px; } }

@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; } }