/* ==========================================================================
   CodeFlow — Design Tokens  (v1 · Fase 1)
   A fonte da verdade visual. Importe este arquivo antes de tudo.
   Marca: clara + quente + chama. Editorial (Claude) com energia (Mistral).
   ========================================================================== */

:root {
  /* ---- Marca · Chama (assinatura) ------------------------------------ */
  --cf-flame-gradient: linear-gradient(135deg, #FFB000 0%, #FF5A00 55%, #E10600 100%);
  --cf-flame-gradient-h: linear-gradient(90deg, #FFB000 0%, #FF5A00 55%, #E10600 100%);
  --cf-amber-400:  #FFB000;  /* realce dourado */
  --cf-flame-400:  #FF7A2B;  /* accent em modo escuro */
  --cf-flame-500:  #FF5A00;  /* primária */
  --cf-flame-600:  #E7460A;  /* contraste em texto sobre claro */
  --cf-ember-700:  #E10600;  /* base quente / vermelho */
  --cf-clay-500:   #BB5734;  /* 2ª quente · links sobre creme */
  --cf-sage-500:   #7C8A6A;  /* apoio calmo (neutro+) */

  /* ---- Neutros quentes (modo claro) ---------------------------------- */
  --cf-paper:    #FAF7EF;  /* superfície elevada */
  --cf-cream:    #F6F1E7;  /* fundo base */
  --cf-sand:     #ECE3D2;  /* rebaixado */
  --cf-stone:    #D9C7A8;  /* hairline / borda */
  --cf-mocha:    #6B5F53;  /* texto suave */
  --cf-taupe:    #9A8E80;  /* texto sutil */
  --cf-ink:      #1F1A14;  /* texto principal / botão */
  --cf-graphite: #2A241E;

  /* ---- Modo escuro --------------------------------------------------- */
  --cf-carvao:   #15120F;  /* fundo */
  --cf-espresso: #1F1A16;  /* elevado */
  --cf-bark:     #2A241E;  /* borda */
  --cf-linen:    #FAF4EC;  /* texto */
  --cf-ash:      #A89E92;  /* texto suave */

  /* ---- Semânticas (afinadas ao quente) ------------------------------- */
  --cf-success:  #2F9E5E;
  --cf-warning:  #F5A623;
  --cf-error:    #E5484D;
  --cf-info:     #5B8DEF;
  --cf-link:     #BB5734;

  /* ---- Papéis (light por padrão) ------------------------------------- */
  --cf-bg:             var(--cf-cream);
  --cf-surface:        var(--cf-paper);
  --cf-surface-sunken: var(--cf-sand);
  --cf-border:         var(--cf-stone);
  --cf-text:           var(--cf-ink);
  --cf-text-muted:     var(--cf-mocha);
  --cf-accent:         var(--cf-flame-500);
  --cf-accent-strong:  var(--cf-flame-600);

  /* ---- Tipografia ---------------------------------------------------- */
  --cf-font-display: 'Space Grotesk', system-ui, sans-serif; /* wordmark, títulos, números */
  --cf-font-accent:  'Fraunces', Georgia, serif;             /* 1 palavra de destaque (itálico) */
  --cf-font-body:    'Inter', system-ui, sans-serif;         /* corpo, UI */
  --cf-font-mono:    'JetBrains Mono', ui-monospace, monospace; /* labels, código */

  --cf-size-dxl:    3.625rem; /* 58 · Display XL */
  --cf-size-d:      2.625rem; /* 42 · Display */
  --cf-size-h1:     2rem;     /* 32 */
  --cf-size-h2:     1.5625rem;/* 25 */
  --cf-size-h3:     1.25rem;  /* 20 */
  --cf-size-body-l: 1.125rem; /* 18 */
  --cf-size-body:   1rem;     /* 16 */
  --cf-size-sm:     0.875rem; /* 14 */
  --cf-size-label:  0.75rem;  /* 12 · mono uppercase */

  --cf-tracking-display: -0.035em;
  --cf-tracking-label:   0.15em;
  --cf-leading-tight:    1.05;
  --cf-leading-body:     1.6;

  /* ---- Raios --------------------------------------------------------- */
  --cf-radius-sm:   8px;
  --cf-radius-md:   12px;
  --cf-radius-lg:   16px;
  --cf-radius-xl:   22px;
  --cf-radius-pill: 999px;

  /* ---- Elevação (sombras quentes) ------------------------------------ */
  --cf-shadow-sm:    0 1px 2px rgba(31, 26, 20, .08);
  --cf-shadow-md:    0 8px 24px rgba(31, 26, 20, .10);
  --cf-shadow-lg:    0 24px 50px rgba(31, 26, 20, .16);
  --cf-shadow-flame: 0 10px 30px rgba(231, 70, 10, .35);

  /* ---- Espaçamento (base 4px) ---------------------------------------- */
  --cf-space-1: 4px;
  --cf-space-2: 8px;
  --cf-space-3: 12px;
  --cf-space-4: 16px;
  --cf-space-5: 24px;
  --cf-space-6: 32px;
  --cf-space-7: 48px;
  --cf-space-8: 64px;

  /* ---- Movimento ----------------------------------------------------- */
  --cf-ease: cubic-bezier(.2, .7, .2, 1);
  --cf-dur:  200ms;
}

/* ==== Modo escuro: troca só os papéis ===================================
   Use <html data-theme="dark"> ou .theme-dark num container.            */
[data-theme="dark"],
.theme-dark {
  --cf-bg:             var(--cf-carvao);
  --cf-surface:        var(--cf-espresso);
  --cf-surface-sunken: #191510;
  --cf-border:         var(--cf-bark);
  --cf-text:           var(--cf-linen);
  --cf-text-muted:     var(--cf-ash);
  --cf-accent:         var(--cf-flame-400);
  --cf-accent-strong:  var(--cf-flame-500);
}