/* ==========================================================================
   LIVE THE LIFE — Design Tokens
   Fundações de design derivadas da identidade visual da marca.
   Como usar: importe este arquivo e consuma as variáveis via var(--token).
     <link rel="stylesheet" href="live-the-life-tokens.css">
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. COR — Primária da marca (Laranja pôr-do-sol)
     ------------------------------------------------------------------------ */
  --brand-50: #FEF3EA;
  --brand-100: #FCE0CB;
  --brand-200: #F9C29B;
  --brand-300: #F79E62;
  --brand-400: #F57C2F;
  --brand-500: #F26011;  /* Cor-núcleo da marca */
  --brand-600: #D14E10;  /* Tom institucional */
  --brand-700: #A83E10;
  --brand-800: #86220E;
  --brand-900: #5C180A;

  /* Aliases semânticos da primária */
  --color-primary:        var(--brand-500);
  --color-primary-hover:  var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-primary-subtle: var(--brand-50);
  --color-on-primary:     #FFFFFF;

  /* ------------------------------------------------------------------------
     2. COR — Neutros (Cinza-navy)
     ------------------------------------------------------------------------ */
  --neutral-0: #FFFFFF;
  --neutral-50: #F8FAFB;
  --neutral-100: #F1F4F6;
  --neutral-200: #E3E8EC;
  --neutral-300: #CBD3DA;
  --neutral-400: #9AA7B2;
  --neutral-500: #6E7E8B;
  --neutral-600: #51606D;
  --neutral-700: #394855;
  --neutral-800: #1E2C3A;
  --neutral-900: #0C1824;

  /* Tons exatos da logo (fidelidade de marca) */
  --brand-ink:      #0C1824; /* faixa do wordmark no brasão */
  --brand-ink-soft: #5B6B7A; /* texto de apoio */

  /* ------------------------------------------------------------------------
     2b. COR — Dourado (acento)
     ------------------------------------------------------------------------ */
  --gold-50: #FCF8EC;
  --gold-100: #F8EECF;
  --gold-200: #F2DEA4;
  --gold-300: #EDCD77;
  --gold-400: #E8B331;  /* Acento-núcleo */
  --gold-500: #D9A125;
  --gold-600: #B8871D;
  --gold-700: #926B16;
  --gold-800: #6C4F10;
  --gold-900: #48350A;
  --color-accent: var(--gold-500);
  --color-on-accent: #0C1824;

  /* ------------------------------------------------------------------------
     3. COR — Papéis de aplicação (tema claro)
     ------------------------------------------------------------------------ */
  --color-bg:            var(--neutral-0);
  --color-surface:       var(--neutral-0);
  --color-surface-alt:   var(--neutral-50);
  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-heading:       var(--brand-ink);
  --color-text:          var(--neutral-900);
  --color-text-muted:    var(--neutral-600);
  --color-text-subtle:   var(--neutral-500);

  /* ------------------------------------------------------------------------
     4. COR — Semânticas (feedback)
     ------------------------------------------------------------------------ */
  --success-50:  #E7F6EF;  --success-500: #1FA971;  --success-700: #167951;
  --warning-50:  #FCF3E0;  --warning-500: #E8A317;  --warning-700: #A77510;
  --danger-50:  #FBE8EA;  --danger-500: #DC3546;  --danger-700: #9E2632;
  --info-50:  #E7F0FB;  --info-500: #2F72D9;  --info-700: #21529C;

  /* ------------------------------------------------------------------------
     5. GRADIENTE — Assinatura da marca
     ------------------------------------------------------------------------ */
  --gradient-brand:      linear-gradient(135deg, #86220E 0%, #D14E10 45%, #F57C2F 100%);
  --gradient-brand-soft: linear-gradient(135deg,#FEF3EA 0%,#FCE0CB 100%);

  /* ------------------------------------------------------------------------
     6. TIPOGRAFIA
     ------------------------------------------------------------------------ */
  --font-display: "Oswald","Arial Narrow","Segoe UI",system-ui,sans-serif; /* títulos */
  --font-body:    "Inter","Segoe UI",system-ui,sans-serif;      /* texto / UI */
  --font-mono:    "JetBrains Mono",ui-monospace,"Courier New",monospace;

  /* Escala tipográfica (modular ~1.2) */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */

  /* Pesos */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Altura de linha */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Espaçamento entre letras */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* ------------------------------------------------------------------------
     7. ESPAÇAMENTO (escala base 4px)
     ------------------------------------------------------------------------ */
  --space-0:  0;
  --space-1: 0.25rem; /* 4px  */
  --space-2: 0.5rem; /* 8px  */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* ------------------------------------------------------------------------
     8. RAIO DE BORDA
     ------------------------------------------------------------------------ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:   24px;
  --radius-full:   9999px;

  /* ------------------------------------------------------------------------
     9. SOMBRAS / ELEVAÇÃO (tingidas da marca)
     ------------------------------------------------------------------------ */
  --shadow-sm:    0 1px 2px rgba(12,24,36, 0.08);
  --shadow-md:    0 4px 12px rgba(12,24,36, 0.10);
  --shadow-lg:    0 10px 24px rgba(12,24,36, 0.12);
  --shadow-xl:    0 20px 40px rgba(12,24,36, 0.16);
  --shadow-brand: 0 8px 24px rgba(209,78,16, 0.35); /* realce da marca */

  /* ------------------------------------------------------------------------
     10. LAYOUT & MOVIMENTO
     ------------------------------------------------------------------------ */
  --container-max: 1120px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  120ms;
  --duration-base:  200ms;
}

/* ==========================================================================
   TEMA ESCURO — inverte os papéis mantendo a identidade da marca.
   Ative pelo sistema (prefers-color-scheme) ou manualmente com
   [data-theme="dark"] no <html>.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      --color-bg:            #070E16;
      --color-surface:       #09131C;
      --color-surface-alt:   #0C1824;
      --color-border:        #1E2C3A;
      --color-border-strong: #394855;
      --color-heading:       #F8FAFB;
      --color-text:          #F1F4F6;
      --color-text-muted:    #9AA7B2;
      --color-text-subtle:   #6E7E8B;
      --color-primary:       var(--brand-400);
      --color-primary-hover: var(--brand-300);
  }
}

[data-theme="dark"] {
  --color-bg:      #070E16;
  --color-surface:     #09131C;
  --color-surface-alt:   #0C1824;
  --color-border:    #1E2C3A;
  --color-border-strong: #394855;
  --color-heading:     #F8FAFB;
  --color-text:      #F1F4F6;
  --color-text-muted:  #9AA7B2;
  --color-text-subtle:   #6E7E8B;
  --color-primary:     var(--brand-400);
  --color-primary-hover: var(--brand-300);
}