/* ============================================================================
   FLAMEWORK Design System — tokens.css
   DERIVADO de tokens/tokens.json (mesma versao, mesmos valores). NAO editar a mao
   sem espelhar em tokens.json — tokens.json e a fonte unica de verdade.
   Versao: 3.2.0
   Essencia: CHAMA VIOLETA (Blazy) — transmutacao, purificacao, alquimia.
             Dark-first profundo · espectro violeta/rosa/laranja · glow de fogo.
   v3.0.0: tipografia REAL Blazy (Termina + Rotunda) embutida via
           design-system/fonts/fonts.css (@font-face). Importe fonts.css ANTES
           deste arquivo para que --g-font-display/--g-font-sans resolvam nas
           fontes reais (com fallback system-native).
   Camadas: global (--g-*) -> semantic (--c-*) -> component (--btn-*, --inp-*, ...)
   Consumido por: design-system/brandbook/index.html, design-system/showcase/index.html.
   ========================================================================== */

:root {
  /* ---- GLOBAL: cor — flame (espectro canonico da chama violeta Blazy) ---- */
  --g-flame-50:  #0000ff;
  --g-flame-100: #3b06f6;
  --g-flame-200: #580cf1;
  --g-flame-300: #7b11ec;
  --g-flame-400: #a015e6;
  --g-flame-500: #a015e6;
  --g-flame-600: #d51cde;
  --g-flame-700: #ec3aa8;
  --g-flame-800: #f96a6a;
  --g-flame-900: #fea806;

  /* ---- GLOBAL: cor — violeta (cor-mae do arquetipo) ---- */
  --g-violet-300: #a64df0;
  --g-violet-400: #8e2bea;
  --g-violet-500: #7b11ec;
  --g-violet-600: #580cf1;
  --g-violet-700: #4209c4;

  /* ---- GLOBAL: cor — magenta/rosa (segundo acento) ---- */
  --g-magenta-300: #e75ce6;
  --g-magenta-500: #d51cde;
  --g-magenta-700: #a015e6;

  /* ---- GLOBAL: cor — ember/laranja-brasa (topo da chama) ---- */
  --g-ember-300: #ffc44d;
  --g-ember-500: #fea806;
  --g-ember-700: #d6810a;

  /* ---- GLOBAL: cor — neutros (dark-first PROFUNDO, leve tinte violeta) ---- */
  --g-neutral-0:   #000000;
  --g-neutral-50:  #070510;
  --g-neutral-100: #0d0a18;
  --g-neutral-200: #141023;
  --g-neutral-300: #1d1730;
  --g-neutral-400: #2a2142;
  --g-neutral-500: #3a2f58;
  --g-neutral-600: #5a4d7a;
  --g-neutral-700: #8b80a6;
  --g-neutral-800: #c2bcd4;
  --g-neutral-900: #f2eef9;

  /* ---- GLOBAL: cor — estados ---- */
  --g-green-300: #7fe6b8;
  --g-green-500: #3ed598;
  --g-green-700: #26a874;
  --g-red-300:   #ff8da6;
  --g-red-500:   #ff4d6d;
  --g-red-700:   #cc2f4d;
  --g-amber-300: #ffc44d;
  --g-amber-500: #fea806;
  --g-amber-700: #d6810a;

  /* ---- GLOBAL: gradientes de chama (assinatura visual da marca) ---- */
  --g-grad-flame:            linear-gradient(180deg, #fea806 0%, #d51cde 35%, #a015e6 60%, #580cf1 100%);
  --g-grad-flame-horizontal: linear-gradient(90deg, #0000ff 0%, #580cf1 25%, #a015e6 50%, #d51cde 75%, #fea806 100%);
  --g-grad-flame-wordmark:   linear-gradient(135deg, #2e7bff 0%, #a015e6 45%, #d51cde 70%, #2e7bff 100%);
  --g-grad-ember-glow:       radial-gradient(120% 90% at 50% 120%, rgba(160,21,230,0.35), rgba(88,12,241,0.12) 45%, transparent 72%);
  --g-grad-violet-veil:      radial-gradient(90% 80% at 15% 0%, rgba(123,17,236,0.22), transparent 60%);

  /* ---- GLOBAL: tipografia — fontes REAIS Blazy embutidas (ver fonts/fonts.css) ----
     Termina (display) + Rotunda (corpo). Fallbacks system-native se o @font-face nao carregar. */
  --g-font-display: "Termina", "Eurostile", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
  --g-font-sans:    "Rotunda", "Avenir Next", "Segoe UI", -apple-system, Roboto, sans-serif;
  --g-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --g-size-xs:   11px;
  --g-size-sm:   12px;
  --g-size-base: 13px;
  --g-size-md:   14px;
  --g-size-lg:   18px;
  --g-size-xl:   20px;
  --g-size-2xl:  24px;
  --g-size-3xl:  34px;
  --g-size-4xl:  48px;
  --g-weight-light:   300;
  --g-weight-regular: 400;
  --g-weight-medium:  600;
  --g-weight-bold:    700;
  --g-lh-tight:  1.1;
  --g-lh-normal: 1.5;
  --g-ls-normal: 0;
  --g-ls-wide:   0.08em;
  --g-ls-wider:  0.2em;

  /* ---- GLOBAL: espacamento (4-48px, respiro generoso) ---- */
  --g-space-0:  0;
  --g-space-1:  4px;
  --g-space-2:  6px;
  --g-space-3:  8px;
  --g-space-4:  10px;
  --g-space-5:  14px;
  --g-space-6:  16px;
  --g-space-7:  20px;
  --g-space-8:  24px;
  --g-space-9:  32px;
  --g-space-10: 48px;

  /* ---- GLOBAL: raio ---- */
  --g-radius-sm:    6px;
  --g-radius-md:    8px;
  --g-radius-lg:    14px;
  --g-radius-pill:  10px;
  --g-radius-round: 999px;

  /* ---- GLOBAL: borda ---- */
  --g-border-thin: 1px;

  /* ---- GLOBAL: sombra/elevacao + glow de chama ---- */
  --g-shadow-none: none;
  --g-shadow-sm: 0 1px 2px rgba(0,0,0,0.50);
  --g-shadow-md: 0 2px 12px rgba(0,0,0,0.60);
  --g-shadow-lg: 0 8px 32px rgba(0,0,0,0.70);
  --g-shadow-glow-violet:  0 0 24px rgba(123,17,236,0.45);
  --g-shadow-glow-magenta: 0 0 24px rgba(213,28,222,0.40);
  --g-shadow-glow-soft:    0 0 16px rgba(160,21,230,0.30);

  /* ---- GLOBAL: breakpoints (referencia; nao usaveis em @media via var) ---- */
  --g-bp-sm: 640px;
  --g-bp-md: 900px;
  --g-bp-lg: 1280px;

  /* ---- GLOBAL: tamanho ---- */
  --g-container-max: 1280px;

  /* =========================================================================
     SEMANTIC (alias) — papeis apontando para globais. Chama violeta nomeada.
     ========================================================================= */
  --c-bg:               var(--g-neutral-0);
  --c-surface:          var(--g-neutral-100);
  --c-surface-sunken:   var(--g-neutral-50);
  --c-surface-hover:    var(--g-neutral-200);
  --c-surface-selected: var(--g-neutral-400);
  --c-fg:               var(--g-neutral-900);
  --c-fg-dim:           var(--g-neutral-700);
  --c-border:           var(--g-neutral-300);
  --c-accent:           var(--g-violet-500);
  --c-accent-hover:     var(--g-violet-400);
  --c-accent-2:         var(--g-magenta-500);
  --c-accent-3:         var(--g-ember-500);
  --c-on-accent:        var(--g-neutral-900);
  --c-success:          var(--g-green-500);
  --c-error:            var(--g-red-500);
  --c-warning:          var(--g-amber-500);
  --c-focus-ring:       var(--g-magenta-500);

  --c-grad-flame:      var(--g-grad-flame);
  --c-grad-flame-text: var(--g-grad-flame-wordmark);
  --c-grad-glow:       var(--g-grad-ember-glow);
  --c-grad-veil:       var(--g-grad-violet-veil);

  --c-font-display: var(--g-font-display);
  --c-font-body:    var(--g-font-sans);
  --c-font-code:    var(--g-font-mono);
  --c-size-body:    var(--g-size-md);
  --c-size-detail:  var(--g-size-base);
  --c-size-caption: var(--g-size-sm);
  --c-size-heading: var(--g-size-lg);
  --c-size-display: var(--g-size-3xl);
  --c-weight-body:     var(--g-weight-regular);
  --c-weight-emphasis: var(--g-weight-medium);
  /* Peso do WORDMARK (logo FL[chama-A]MEWORK). Termina Demi (600), NAO Heavy (800):
     a massa da haste das letras casa com a massa da perna da chama (razao ~1.0),
     espelhando a harmonia da marca-mae Blazy (BLAZY_Principal: leg/stem ~= 1.0,
     stem/cap ~= 0.171). Heavy (800) deixava as letras grossas demais e a chama
     parecia fina por contraste. Medido via Playwright no brandbook renderizado. */
  --c-weight-logo:     var(--g-weight-medium);

  --c-elev-glow: var(--g-shadow-glow-violet);

  /* =========================================================================
     COMPONENT — so quando necessario (anti-proliferation).
     ========================================================================= */
  --btn-bg:        var(--c-accent);
  --btn-bg-hover:  var(--c-accent-hover);
  --btn-fg:        var(--c-on-accent);
  --btn-radius:    var(--g-radius-sm);
  --btn-pad-y:     var(--g-space-2);
  --btn-pad-x:     var(--g-space-5);
  --btn-weight:    var(--g-weight-medium);
  --btn-glow:      var(--g-shadow-glow-soft);

  --inp-bg:      var(--c-surface-sunken);
  --inp-fg:      var(--c-fg);
  --inp-border:  var(--c-border);
  --inp-radius:  var(--g-radius-sm);
  --inp-pad-y:   var(--g-space-2);
  --inp-pad-x:   var(--g-space-4);

  --card-bg:      var(--c-surface);
  --card-border:  var(--c-border);
  --card-radius:  var(--g-radius-md);
  --card-pad-y:   var(--g-space-5);
  --card-pad-x:   var(--g-space-6);

  --pill-radius: var(--g-radius-pill);
  --pill-pad-y:  1px;
  --pill-pad-x:  var(--g-space-3);
  --pill-size:   var(--g-size-xs);
}