/* ThaiDai Design System — Premium Concierge
 * Based on /Users/macbook/Downloads/design_handoff_thaidai/tokens.css
 * Self-hosted fonts (latin + cyrillic subsets) live in /static/fonts/
 * Note: Fraunces does not ship cyrillic glyphs upstream; we layer Lora as
 * a cyrillic display fallback so the editorial-serif character is preserved.
 */

/* Cyrillic unicode-range covers Russian, Ukrainian, Belarusian and key extras. */
/* ───── Manrope (UI body) ───── */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/static/fonts/manrope-cyrillic-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/manrope-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/static/fonts/manrope-cyrillic-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/manrope-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/static/fonts/manrope-cyrillic-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/manrope-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/static/fonts/manrope-cyrillic-700-normal.woff2') format('woff2');
}

/* ───── Fraunces (display, latin only — cyrillic falls through to Lora) ───── */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin-500-italic.woff2') format('woff2');
}

/* ───── Lora (display fallback for cyrillic — same family alias as Fraunces) ─────
 * Trick: declare under the same family name "Fraunces" but with cyrillic
 * unicode-range. Browser will reach for Lora when rendering cyrillic chars,
 * keeping the editorial-serif vibe consistent across the alphabet.
 */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/static/fonts/lora-cyrillic-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/static/fonts/lora-cyrillic-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/static/fonts/lora-cyrillic-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/static/fonts/lora-cyrillic-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/static/fonts/lora-cyrillic-500-italic.woff2') format('woff2');
}

/* ───── JetBrains Mono (prices, IDs) ───── */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/static/fonts/jetbrains-mono-cyrillic-500-normal.woff2') format('woff2');
}

/* ───── Tokens — Dark (default) ───── */
:root {
  /* Brand: Deep Navy Night + Gold */
  --td-bg:           #0a1426;
  --td-bg-elev:      #0f1d33;
  --td-surface:      #142847;
  --td-surface-2:    #1b3358;
  --td-line:         rgba(212,164,55,0.18);
  --td-line-soft:    rgba(255,255,255,0.06);
  --td-text:         #e8edf5;
  --td-text-dim:     #94a8c2;
  --td-text-mute:    #6d8095;

  --td-gold:         #d4a437;
  --td-gold-soft:    #e8c46a;
  --td-gold-deep:    #a87f1f;
  --td-gold-glow:    rgba(212,164,55,0.32);

  --td-blue:         #4fa0db;
  --td-cyan:         #5cd1e8;
  --td-magenta:      #d96fb8;

  --td-accent:       var(--td-gold);
  --td-accent-soft:  var(--td-gold-soft);

  --td-success:      #6dd49a;
  --td-danger:       #ff6b7a;

  --td-radius-sm:    6px;
  --td-radius:       12px;
  --td-radius-lg:    18px;
  --td-radius-xl:    24px;

  --td-shadow-sm:    0 1px 2px rgba(0,0,0,.2);
  --td-shadow:       0 8px 28px rgba(0,0,0,.32);
  --td-shadow-gold:  0 0 0 1px rgba(212,164,55,.3), 0 6px 20px rgba(212,164,55,.18);

  --td-font-display: 'Fraunces', 'Times New Roman', serif;
  --td-font-ui:      'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --td-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --td-density:      14px;
  --td-card-radius:  14px;

  --td-screen-pad:   22px;
  --td-anim-fast:    150ms;
  --td-anim:         360ms;
  --td-anim-slide:   cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ───── Tokens — Light ───── */
[data-theme="light"] {
  --td-bg:           #f6f1e6;
  --td-bg-elev:      #fbf7ed;
  --td-surface:      #ffffff;
  --td-surface-2:    #f0e8d4;
  --td-line:         rgba(168,127,31,0.22);
  --td-line-soft:    rgba(20,40,71,0.08);
  --td-text:         #14213d;
  --td-text-dim:     #4a5b78;
  --td-text-mute:    #7a8aa3;
  --td-gold-glow:    rgba(168,127,31,0.18);
  --td-shadow:       0 8px 28px rgba(20,40,71,.12);
  --td-shadow-gold:  0 0 0 1px rgba(168,127,31,.3), 0 6px 20px rgba(168,127,31,.18);
}

/* ───── Reset & base ───── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--td-bg);
  color: var(--td-text);
  font-family: var(--td-font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}