/* ==========================================================================
   EMBER DESIGN SYSTEM v1.3 — TOKENS + RESET
   Camada 1 (primitivos) e camada 2 (semânticos). Componentes consomem apenas
   a camada 2. O tema escuro remapeia somente a camada 2.
   ========================================================================== */
/* ==========================================================================
   EMBER DESIGN SYSTEM v1.3 — TOKENS
   Camada 1: primitivos (valores crus, nunca usados direto em componentes)
   Camada 2: semânticos (o que os componentes consomem)
   ========================================================================== */

:root {
  /* ---- Primitivos: marca -------------------------------------------- */
  --flame-50:  #FFF1F6;
  --flame-100: #FFDDE9;
  --flame-200: #FFB9D0;
  --flame-300: #FF8BB1;
  --flame-400: #FD5A92;
  --flame-500: #FD297B;   /* cor-âncora da marca */
  --flame-600: #E5126A;
  --flame-700: #BC0B57;
  --flame-800: #920944;
  --flame-900: #6B0733;

  --gold-100:  #FFE4E0;
  --gold-300:  #FFA79E;
  --gold-500:  #FF655B;
  --gold-700:  #D8382D;

  --amber-100: #FFF0D1;
  --amber-300: #FFCE6B;
  --amber-500: #FFA400;
  --amber-700: #B87500;

  /* ---- Primitivos: neutros (cinza com traço quente, alinhado à marca) */
  --n-0:   #FFFFFF;
  --n-25:  #FCFBFB;
  --n-50:  #F8F7F7;
  --n-100: #F1F0F0;
  --n-150: #E8E6E7;
  --n-200: #DCDADB;
  --n-300: #C4C1C3;
  --n-400: #9E9A9D;
  --n-500: #787477;
  --n-600: #565356;
  --n-700: #3D3B3E;
  --n-800: #2A282B;
  --n-850: #1F1E21;
  --n-900: #171618;
  --n-950: #0F0E10;

  /* ---- Primitivos: utilitários --------------------------------------- */
  --green-500: #12996B;
  --green-100: #DCF5EA;
  --blue-500:  #1D74E0;
  --blue-100:  #DEECFD;
  --red-500:   #D92C2C;
  --red-100:   #FCE4E4;
  --amber-ui:  #B87500;

  /* ---- Semânticos: superfície ---------------------------------------- */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-sunk:  var(--n-100);
  --surface-inset: var(--n-25);
  --surface-invert:var(--n-900);

  /* ---- Semânticos: texto --------------------------------------------- */
  --ink:        var(--n-900);   /* título e corpo */
  --ink-muted:  var(--n-600);   /* apoio, resumo, meta */
  --ink-subtle: var(--n-500);   /* legenda, timestamp */
  --ink-invert: var(--n-0);
  --ink-brand:  var(--flame-600);

  /* ---- Semânticos: linha --------------------------------------------- */
  --line:        var(--n-150);
  --line-strong: var(--n-300);
  --line-brand:  var(--flame-200);

  /* ---- Semânticos: ação ---------------------------------------------- */
  --action:        var(--flame-500);   /* acento: borda, indicador, seleção */
  --action-hover:  var(--flame-600);
  --action-press:  var(--flame-700);
  /* Preenchimento sólido que recebe texto branco em qualquer corpo (>= 4,5:1) */
  --action-solid:       var(--flame-600);
  --action-solid-hover: var(--flame-700);
  --action-solid-press: var(--flame-800);
  --on-action:          #FFFFFF;
  --action-soft:   var(--flame-50);
  --action-ring:   rgba(253, 41, 123, .28);
  --focus-ring:    var(--flame-600);

  /* ---- Semânticos: estado -------------------------------------------- */
  --ok:      var(--green-500);   --ok-soft:   var(--green-100);
  --info:    var(--blue-500);    --info-soft: var(--blue-100);
  --warn:    var(--amber-ui);    --warn-soft: var(--amber-100);
  --danger:  var(--red-500);     --danger-soft: var(--red-100);

  /* ---- Gradiente de marca (uso restrito — ver 01.5) ------------------- */
  --brand-gradient: linear-gradient(103deg, #FD297B 0%, #FF655B 54%, #FFA400 100%);
  /* Versão para superfície que carrega texto ou ícone branco */
  --brand-gradient-strong: linear-gradient(103deg, #E5126A 0%, #C9402F 52%, #9E6400 100%);
  --brand-gradient-soft: linear-gradient(103deg, rgba(253,41,123,.10) 0%, rgba(255,101,91,.10) 54%, rgba(255,164,0,.10) 100%);

  /* ---- Tipografia ----------------------------------------------------- */
  --font-ui:     'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-read:   'Literata', Georgia, 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display:   clamp(2.75rem, 1.6rem + 4.4vw, 4.25rem);
  --t-h1:        clamp(2.1rem, 1.5rem + 2.4vw, 3rem);
  --t-h2:        clamp(1.55rem, 1.25rem + 1.1vw, 2rem);
  --t-h3:        1.3125rem;
  --t-h4:        1.0625rem;
  --t-body-lg:   1.1875rem;
  --t-body:      1rem;
  --t-sm:        .875rem;
  --t-xs:        .8125rem;
  --t-2xs:       .75rem;

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-read:   1.72;   /* corpo serifado longo */

  --tr-tight: -.022em;
  --tr-snug:  -.012em;
  --tr-normal: 0;
  --tr-wide:  .01em;

  /* ---- Espaçamento (base 4 / ritmo 8) --------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 112px;

  /* ---- Raio (hierarquia por peso do elemento) ------------------------- */
  --r-xs:   4px;    /* tag, badge, marcador */
  --r-sm:   8px;    /* campo, botão retangular, thumbnail */
  --r-md:   12px;   /* card de lista, alerta */
  --r-lg:   18px;   /* card em destaque, painel */
  --r-xl:   28px;   /* hero, modal */
  --r-pill: 999px;  /* botão de ação, chip */

  /* ---- Elevação (sombra fria + halo curto; nunca sombra colorida) ----- */
  --e-0: none;
  --e-1: 0 1px 2px rgba(15,14,16,.05), 0 1px 1px rgba(15,14,16,.03);
  --e-2: 0 2px 4px rgba(15,14,16,.05), 0 6px 14px rgba(15,14,16,.05);
  --e-3: 0 4px 8px rgba(15,14,16,.06), 0 14px 32px rgba(15,14,16,.08);
  --e-4: 0 8px 16px rgba(15,14,16,.08), 0 28px 64px rgba(15,14,16,.14);
  --e-brand: 0 6px 18px rgba(253,41,123,.26);

  /* ---- Layout ---------------------------------------------------------- */
  --w-prose:  68ch;    /* medida de leitura do corpo serifado */
  --w-narrow: 720px;
  --w-content:1080px;
  --w-wide:   1320px;
  --rail:     236px;   /* índice lateral do documento */
  --header-h: 60px;

  /* ---- Movimento -------------------------------------------------------- */
  --d-instant: 90ms;
  --d-fast:    150ms;
  --d-base:    220ms;
  --d-slow:    340ms;
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-entrance: cubic-bezier(.16,.84,.44,1);

  --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500;
}

/* ---- Tema escuro: só remapeia semânticos, nunca primitivos ------------- */
[data-theme="dark"] {
  --bg:            var(--n-950);
  --surface:       var(--n-900);
  --surface-sunk:  var(--n-850);
  --surface-inset: #141315;
  --surface-invert:var(--n-0);

  --ink:        #F4F3F3;
  --ink-muted:  #A9A5A8;
  --ink-subtle: #858184;
  --ink-invert: var(--n-950);
  --ink-brand:  var(--flame-300);

  --line:        #2C2A2D;
  --line-strong: #423F43;
  --line-brand:  rgba(253,41,123,.35);

  --action:       var(--flame-500);
  --action-hover: var(--flame-400);
  --action-press: var(--flame-300);
  --action-soft:  rgba(253,41,123,.14);
  --focus-ring:   var(--flame-300);

  --ok-soft: rgba(18,153,107,.16);
  --info-soft: rgba(29,116,224,.16);
  --warn-soft: rgba(255,164,0,.14);
  --danger-soft: rgba(217,44,44,.16);
  --ok:   #35C58F;
  --info: #63A6FF;
  --warn: var(--amber-300);
  --danger: #FF6B6B;

  --e-1: 0 1px 2px rgba(0,0,0,.5);
  --e-2: 0 2px 6px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.35);
  --e-3: 0 6px 14px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.45);
  --e-4: 0 10px 22px rgba(0,0,0,.55), 0 32px 70px rgba(0,0,0,.6);
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}
::selection { background: var(--flame-200); color: var(--n-900); }
/* Anel de foco legível sobre superfícies escuras dentro do tema claro */
.foot :focus-visible, .bulk-bar :focus-visible, .toast :focus-visible,
.surface-invert :focus-visible { outline-color: var(--flame-300); }
.foot-light :focus-visible { outline-color: var(--focus-ring); }
.card-cover :focus-visible { outline-color: #fff; }
/* Área clicável de um cartão inteiro, mantendo um único link acessível */
.stretched-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
[data-theme="dark"] ::selection { background: var(--flame-700); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flag-live i, .typing i, .skeleton::after, .btn-loading::after { animation: none !important; opacity: 1; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}