/* =========================================================
   THERMAS DOS LARANJAIS — Eventos
   Design tokens (overrides + extensões do Design System)
   Marca: azul-marinho profundo + laranja-sol
   ========================================================= */

:root {
  /* ===== Paleta da marca Thermas ===== */
  --tl-navy-950: #07112a;
  --tl-navy-900: #0c1a3e;
  --tl-navy-800: #142850;   /* azul principal da logo */
  --tl-navy-700: #1d3a6e;
  --tl-navy-600: #2b5398;
  --tl-navy-500: #4a78c0;

  --tl-orange-800: #a04510;
  --tl-orange-700: #c25a14;
  --tl-orange-600: #e87723;   /* laranja-sol principal */
  --tl-orange-500: #f48a3a;
  --tl-orange-400: #ffa860;
  --tl-orange-300: #ffc794;

  --tl-sun: #ffc14a;          /* dourado quente, raio de sol */
  --tl-sky: #6ec5e0;          /* azul-piscina */
  --tl-foam: #d9efe6;          /* espuma */

  /* Neutros - papel quente, areia */
  --tl-paper: #fdfaf3;
  --tl-paper-warm: #f6ecda;
  --tl-bone: #ebe1cc;
  --tl-sand: #d9c9a8;

  --tl-ink-900: #121826;
  --tl-ink-800: #1c2436;
  --tl-ink-700: #2a3445;
  --tl-ink-500: #6a7385;
  --tl-ink-400: #8e96a6;
  --tl-ink-300: #c2c8d3;
  --tl-ink-200: #e2e4ea;
  --tl-ink-100: #f2f1ec;

  /* Sombras */
  --tl-shadow-sm: 0 1px 2px rgba(20, 40, 80, 0.10), 0 1px 1px rgba(20, 40, 80, 0.05);
  --tl-shadow-md: 0 10px 30px rgba(12, 26, 62, 0.12), 0 2px 6px rgba(12, 26, 62, 0.08);
  --tl-shadow-lg: 0 30px 70px rgba(12, 26, 62, 0.22), 0 6px 16px rgba(12, 26, 62, 0.10);
  --tl-shadow-orange: 0 14px 32px rgba(232, 119, 35, 0.32);

  /* Tipografia */
  --tl-font-display: 'Bricolage Grotesque', 'Archivo', 'Trebuchet MS', sans-serif;
  --tl-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tl-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --tl-container: 1280px;
  --tl-container-wide: 1440px;
  --tl-gutter: clamp(20px, 4vw, 56px);

  /* Raios - segura para tom premium-vibrante */
  --tl-radius-sm: 6px;
  --tl-radius-md: 12px;
  --tl-radius-lg: 22px;
  --tl-radius-pill: 999px;

  /* Variáveis customizáveis pelo painel Tweaks */
  --tl-primary: var(--tl-navy-800);
  --tl-accent: var(--tl-orange-600);
  --tl-paper-active: var(--tl-paper);
  --tl-hero-overlay: 0.65;
  --tl-radius-card: var(--tl-radius-lg);
}

/* ===== Mapeia para os tokens do design system base ===== */
:root {
  --navy-900: var(--tl-navy-900);
  --navy-800: var(--tl-navy-800);
  --navy-700: var(--tl-navy-700);
  --navy-600: var(--tl-navy-600);
  --navy-500: var(--tl-navy-500);

  --forest-900: var(--tl-orange-800);
  --forest-800: var(--tl-orange-700);
  --forest-700: var(--tl-orange-600);
  --forest-600: var(--tl-orange-500);
  --forest-500: var(--tl-orange-400);

  --paper: var(--tl-paper);
  --paper-warm: var(--tl-paper-warm);
  --bone: var(--tl-bone);
  --wood-light: var(--tl-sun);
  --wood: var(--tl-orange-700);
  --wood-dark: var(--tl-orange-800);

  --ink-900: var(--tl-ink-900);
  --ink-800: var(--tl-ink-800);
  --ink-700: var(--tl-ink-700);
  --ink-500: var(--tl-ink-500);
  --ink-400: var(--tl-ink-400);
  --ink-300: var(--tl-ink-300);
  --ink-200: var(--tl-ink-200);
  --ink-100: var(--tl-ink-100);

  --accent: var(--tl-orange-600);

  --font-display: var(--tl-font-display);
  --font-sans: var(--tl-font-display);
  --font-body: var(--tl-font-body);

  --container: var(--tl-container);
  --gutter: var(--tl-gutter);

  --shadow-sm: var(--tl-shadow-sm);
  --shadow-md: var(--tl-shadow-md);
  --shadow-lg: var(--tl-shadow-lg);
}