/* =====================================================================
   DEEPAVALI DESIGN SYSTEM — tokens
   One source of truth for the website. The Remotion films mirror these
   values in video/src/tokens.ts. Documentation: DESIGN.md
   ===================================================================== */

@font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Yatra One'; src: url('../fonts/yatra-deva.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; font-display: swap; }
@font-face { font-family: 'Yatra One'; src: url('../fonts/yatra-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Tiro Devanagari Hindi'; src: url('../fonts/tiro-deva.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; font-display: swap; }
@font-face { font-family: 'Tiro Devanagari Hindi'; src: url('../fonts/tiro-latin.woff2') format('woff2'); font-display: swap; }

:root {
  color-scheme: dark;

  /* ---- Color: night (surfaces) ---- */
  --c-night: #07040f;          /* page */
  --c-dusk: #120a24;           /* raised surface */
  --c-plum: #2a0f3a;           /* accent surface */
  --c-maroon: #4a1024;         /* warm surface */
  --c-earth: #3a1a10;          /* clay / rangoli floor */

  /* ---- Color: light (brand) ---- */
  --c-gold: #f5c76a;
  --c-gold-light: #ffe6a8;
  --c-gold-deep: #b8862f;
  --c-saffron: #ff9933;
  --c-marigold: #ffb627;
  --c-kumkum: #d7263d;
  --c-rose: #ff6fa8;
  --c-peacock: #14a3a8;
  --c-leaf: #3f9d4a;
  --c-cream: #fff4dc;

  /* ---- Color: semantic ---- */
  --text: var(--c-cream);
  --text-soft: rgba(255, 244, 220, 0.76);
  --text-faint: rgba(255, 244, 220, 0.56);
  --line: rgba(245, 199, 106, 0.22);
  --line-strong: rgba(245, 199, 106, 0.5);
  --surface: rgba(18, 10, 36, 0.66);
  --surface-strong: rgba(18, 10, 36, 0.88);
  --focus: var(--c-marigold);
  --gold-gradient: linear-gradient(100deg, #b8862f 0%, #ffe6a8 22%, #f5c76a 40%, #fff8e1 50%, #f5c76a 60%, #c4882a 80%, #ffe6a8 100%);

  /* ---- Typography ---- */
  --f-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-deva: 'Yatra One', 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif;
  --f-deva-text: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif;
  --f-ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-xs: 0.78rem;
  --t-sm: 0.92rem;
  --t-md: 1.18rem;
  --t-lg: 1.42rem;
  --t-xl: clamp(1.7rem, 3.2vw, 2.4rem);
  --t-2xl: clamp(2.3rem, 5.6vw, 4.2rem);
  --t-hero: clamp(3.2rem, 13vw, 10rem);
  --lh-tight: 1.05;
  --lh-body: 1.55;
  --track-label: 0.28em;

  /* ---- Space (4px base, roughly ×1.5) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2.25rem;
  --s-7: 3.5rem;
  --s-8: 5rem;
  --s-9: 8rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 38rem;
  --wide: 76rem;

  /* ---- Shape ---- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;
  --b-hair: 1px solid var(--line);

  /* ---- Elevation = light (things glow rather than cast shadows) ---- */
  --glow-1: 0 0 0 1px var(--line), 0 8px 30px rgba(0, 0, 0, 0.35);
  --glow-2: 0 0 24px rgba(255, 170, 60, 0.28), 0 0 0 1px var(--line-strong);
  --glow-3: 0 0 60px rgba(255, 150, 40, 0.4), 0 0 0 1px var(--c-gold);
  --text-glow: 0 0 18px rgba(255, 170, 70, 0.55);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 180ms;
  --d-base: 420ms;
  --d-slow: 900ms;
  --d-cinema: 1800ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
    --d-cinema: 1ms;
  }
}