/* ============================================================================
   HOTSPACE — DESIGN SYSTEM (tokens)  ·  v0.2 — marca oficial
   ----------------------------------------------------------------------------
   Paleta oficial (extraída do logo): vermelho-brasa #DD0A00, grafite-azulado
   #141C22 e creme #FCF4EE, com o gradiente de chama radial grafite→vermelho.
   A metáfora de TEMPERATURA continua sendo a linguagem central (Gelo →
   Incandescente), agora ancorada no vermelho da marca. O petróleo/ardósia
   (família fria derivada do grafite) marca as zonas de segurança.

   Tipografia:
     Neue Montreal → títulos e corpo (Bold / Medium / Light / Regular)
     Desire Pro    → wordmark e overlines (serif de marca)
     Fraunces      → toques editoriais (reflexão / storytelling)
   ========================================================================== */

/* ---- Fontes próprias (self-hosted) --------------------------------------- */
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Desire Pro";src:url("../fonts/Desire.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}

/* ----------------------------------------------------------------------------
   1. PRIMITIVOS
   -------------------------------------------------------------------------- */
:root {
  /* Vermelho-brasa (marca / CTA) — do gradiente do logo */
  --red-50:  #FDECE9;
  --red-100: #FBD0CB;
  --red-200: #F5A69D;
  --red-300: #EE6B5C;
  --red-400: #E63A2A;
  --red-500: #DD0A00;  /* base da marca */
  --red-600: #B20D07;
  --red-700: #82120F;
  --red-800: #580002;
  --red-900: #3A0805;

  /* Grafite-azulado (o "space" / escuro / frio) — âncora da marca */
  --char-950: #0E141A;
  --char-900: #141C22;  /* base — texto e fundo escuro */
  --char-800: #1E2830;
  --char-700: #29343D;
  --char-600: #37454F;
  --char-500: #4A5A66;
  --char-400: #697B87;
  --char-300: #95A4AE;
  --char-200: #C3CDD3;
  --char-100: #E2E8EB;

  /* Petróleo / ardósia (zona de SEGURANÇA — família fria derivada do grafite) */
  --petrol-50:  #EAF1F3;
  --petrol-100: #D3E0E5;
  --petrol-200: #A7C1C9;
  --petrol-500: #2C4A59;
  --petrol-600: #213A46;
  --petrol-700: #182B34;

  /* Neutros quentes (a partir do creme) */
  --n-0:   #FFFFFF;
  --n-50:  #FCF4EE;  /* creme — fundo modo claro */
  --n-100: #F5E8DF;
  --n-150: #EEDFD4;
  --n-200: #E6D5C8;
  --n-300: #D5C1B2;
  --n-400: #B49F8F;
  --n-500: #8C7A6D;
  --n-600: #64544A;
  --n-700: #453A32;
  --n-900: #141C22;  /* tinta = grafite da marca */

  /* Escala de TEMPERATURA (o termômetro do relacionamento) --------------- */
  /* frio (ardósia) → incandescente (vermelho luminoso), ancorada na marca */
  --gelo:          #4E5F6B;  /* Gelo         — ardósia fria */
  --morno:         #8E4A3D;  /* Morno        — tijolo morno */
  --quente:        #C1140A;  /* Quente       — vermelho forte */
  --vulcanico:     #DD0A00;  /* Vulcânico    — vermelho da marca */
  --incandescente: #FF3D1A;  /* Incandescente— vermelho luminoso (pico) */

  /* Feedback / estados */
  --success-500: #2E9E5B;
  --success-50:  #E6F4EC;
  --warning-500: #C77A12;
  --danger-500:  #DD0A00;
  --info-500:    #2C4A59;

  /* ---- Tipografia (famílias) ---- */
  --font-display: "Neue Montreal", "Segoe UI", system-ui, sans-serif;  /* títulos */
  --font-body:    "Neue Montreal", "Segoe UI", system-ui, sans-serif;  /* corpo */
  --font-brand:   "Desire Pro", Georgia, "Times New Roman", serif;     /* wordmark + overline */
  --font-editorial: "Fraunces", Georgia, "Times New Roman", serif;     /* editorial / reflexão */

  /* ---- Escala tipográfica (~1.2) ---- */
  --fs-overline: 0.8125rem; /* 13px — Desire serif precisa de um respiro */
  --fs-caption:  0.8125rem; /* 13px */
  --fs-sm:       0.875rem;  /* 14px */
  --fs-body:     1rem;      /* 16px */
  --fs-lg:       1.125rem;  /* 18px */
  --fs-h4:       1.375rem;  /* 22px */
  --fs-h3:       1.75rem;   /* 28px */
  --fs-h2:       2.25rem;   /* 36px */
  --fs-h1:       3rem;      /* 48px */
  --fs-display:  3.75rem;   /* 60px */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 500;  /* Neue Montreal: usa Medium (evita faux-bold do 600) */
  --fw-bold:     700;
  --fw-extra:    700;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.14em;

  /* ---- Espaçamento (base 4px) ---- */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;  --sp-3:  0.75rem; --sp-4:  1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;  --sp-8:  2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-16: 4rem;    --sp-20: 5rem;

  /* ---- Raio ---- */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

  /* ---- Contêiner ---- */
  --container: 440px;
  --container-wide: 960px;

  /* ---- Transições ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms;

  /* ---- z-index ---- */
  --z-nav: 50; --z-sheet: 80; --z-toast: 100;
}

/* ----------------------------------------------------------------------------
   2. SEMÂNTICOS — MODO CLARO (padrão)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --bg:            var(--n-50);
  --bg-glow:       radial-gradient(1200px 620px at 50% -12%, #F8D9D2 0%, rgba(248,217,210,0) 62%);
  --surface:       var(--n-0);
  --surface-2:     var(--n-50);
  --surface-3:     var(--n-100);
  --surface-inset: var(--n-100);

  --text:          var(--n-900);
  --text-soft:     var(--char-600);
  --text-muted:    var(--char-400);
  --text-on-brand: #FFFFFF;
  --text-on-dark:  var(--n-50);

  --border:        var(--n-200);
  --border-soft:   var(--n-150);
  --border-strong: var(--n-300);

  --brand:         var(--red-500);
  --brand-hover:   var(--red-600);
  --brand-soft:    var(--red-50);
  --brand-border:  var(--red-100);
  --on-brand:      #FFFFFF;

  --secondary:     var(--red-700);
  --secondary-soft:#FBE7E3;

  --accent:        var(--incandescente);
  --accent-soft:   #FFE9E3;
  --accent-ink:    var(--red-600);

  /* Zona de SEGURANÇA (privacidade / consentimento / denúncia) */
  --security:      var(--petrol-500);
  --security-hover:var(--petrol-600);
  --security-soft: var(--petrol-50);
  --security-border:var(--petrol-100);
  --on-security:   #FFFFFF;

  --ring:          color-mix(in srgb, var(--brand) 40%, transparent);

  --shadow-sm:  0 1px 2px rgba(20,28,34,0.06), 0 1px 3px rgba(20,28,34,0.05);
  --shadow-md:  0 4px 10px rgba(20,28,34,0.08), 0 2px 6px rgba(20,28,34,0.05);
  --shadow-lg:  0 12px 28px rgba(20,28,34,0.12), 0 6px 12px rgba(20,28,34,0.07);
  --shadow-brand: 0 8px 24px rgba(221,10,0,0.30);

  --overlay: rgba(20,28,34,0.48);
}

/* ----------------------------------------------------------------------------
   2b. SEMÂNTICOS — MODO ESCURO
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            var(--char-900);
    --bg-glow:       radial-gradient(1200px 620px at 50% -12%, rgba(221,10,0,0.20) 0%, rgba(221,10,0,0) 60%);
    --surface:       var(--char-800);
    --surface-2:     var(--char-700);
    --surface-3:     var(--char-600);
    --surface-inset: var(--char-950);

    --text:          var(--n-50);
    --text-soft:     #D7CEC7;
    --text-muted:    #93A0A8;
    --text-on-brand: #FFFFFF;
    --text-on-dark:  var(--n-50);

    --border:        rgba(252,244,238,0.12);
    --border-soft:   rgba(252,244,238,0.07);
    --border-strong: rgba(252,244,238,0.20);

    --brand:         #F5240F;
    --brand-hover:   #FF4230;
    --brand-soft:    rgba(221,10,0,0.20);
    --brand-border:  rgba(221,10,0,0.42);

    --secondary:     #E5473A;
    --secondary-soft:rgba(130,18,15,0.30);

    --accent:        #FF5A3C;
    --accent-soft:   rgba(255,61,26,0.18);
    --accent-ink:    #FF7057;

    --security:      #5E93A6;
    --security-hover:#7AADC0;
    --security-soft: rgba(44,74,89,0.34);
    --security-border:rgba(94,147,166,0.40);
    --on-security:   #08141A;

    --gelo:          #6F838F;

    --ring:          color-mix(in srgb, var(--brand) 55%, transparent);

    --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
    --shadow-md:  0 6px 16px rgba(0,0,0,0.45);
    --shadow-lg:  0 16px 40px rgba(0,0,0,0.55);
    --shadow-brand: 0 10px 30px rgba(221,10,0,0.42);

    --overlay: rgba(4,8,11,0.64);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--char-900);
  --bg-glow:       radial-gradient(1200px 620px at 50% -12%, rgba(221,10,0,0.20) 0%, rgba(221,10,0,0) 60%);
  --surface:       var(--char-800);
  --surface-2:     var(--char-700);
  --surface-3:     var(--char-600);
  --surface-inset: var(--char-950);

  --text:          var(--n-50);
  --text-soft:     #D7CEC7;
  --text-muted:    #93A0A8;
  --text-on-brand: #FFFFFF;
  --text-on-dark:  var(--n-50);

  --border:        rgba(252,244,238,0.12);
  --border-soft:   rgba(252,244,238,0.07);
  --border-strong: rgba(252,244,238,0.20);

  --brand:         #F5240F;
  --brand-hover:   #FF4230;
  --brand-soft:    rgba(221,10,0,0.20);
  --brand-border:  rgba(221,10,0,0.42);

  --secondary:     #E5473A;
  --secondary-soft:rgba(130,18,15,0.30);

  --accent:        #FF5A3C;
  --accent-soft:   rgba(255,61,26,0.18);
  --accent-ink:    #FF7057;

  --security:      #5E93A6;
  --security-hover:#7AADC0;
  --security-soft: rgba(44,74,89,0.34);
  --security-border:rgba(94,147,166,0.40);
  --on-security:   #08141A;

  --gelo:          #6F838F;

  --ring:          color-mix(in srgb, var(--brand) 55%, transparent);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 6px 16px rgba(0,0,0,0.45);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.55);
  --shadow-brand: 0 10px 30px rgba(221,10,0,0.42);

  --overlay: rgba(4,8,11,0.64);
}

/* ----------------------------------------------------------------------------
   RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-glow);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
h1 { font-weight: 500; }  /* Neue Montreal Medium */
h2 { font-weight: 700; }  /* Neue Montreal Bold */
h3 { font-weight: 300; }  /* Neue Montreal Light */
h4 { font-weight: 500; }  /* Neue Montreal Medium */

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-xs); }
::selection { background: var(--brand-soft); color: var(--text); }

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

/* ----------------------------------------------------------------------------
   UTILITÁRIOS DE TIPOGRAFIA
   -------------------------------------------------------------------------- */
.display    { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, var(--fs-display)); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.h1         { font-family: var(--font-display); font-size: clamp(2rem, 6vw, var(--fs-h1)); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.h2         { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, var(--fs-h2)); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.h3         { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 300; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.h4         { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-snug); }
.editorial  { font-family: var(--font-editorial); font-weight: 500; font-style: italic; letter-spacing: 0; }
.lead       { font-size: var(--fs-lg); color: var(--text-soft); line-height: var(--lh-relaxed); }
.body       { font-size: var(--fs-body); }
.small      { font-size: var(--fs-sm); }
.caption    { font-size: var(--fs-caption); color: var(--text-muted); }
.overline   { font-family: var(--font-brand); font-size: var(--fs-overline); font-weight: 400; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.muted      { color: var(--text-muted); }
.soft       { color: var(--text-soft); }
.text-brand { color: var(--brand); }
.text-security { color: var(--security); }
.text-center{ text-align: center; }
.text-balance { text-wrap: balance; }

/* gradiente de temperatura como texto (destaques da marca) */
.text-heat {
  background: linear-gradient(96deg, var(--quente) 0%, var(--vulcanico) 45%, var(--incandescente) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}