/* ============================================================
 * TEDDY DS — TOKENS
 * Fonte única de variáveis. Não usar valores literais em outros
 * arquivos CSS — sempre referenciar tokens daqui.
 *
 * Aliases retrocompatíveis no fim do arquivo mantêm os nomes
 * antigos (`--teddy-orange`, `--bg`, `--shadow`...) funcionando
 * enquanto o resto do CSS é migrado.
 * ============================================================ */

:root {

  /* ── 1. CORES — BRAND ─────────────────────────────────────── */
  --color-brand:       #eb6625;
  --color-brand-dark:  #c94f17;
  --color-brand-soft:  #fff1ea;
  --color-brand-ink:   #ffffff;            /* texto sobre brand */

  /* ── 2. CORES — NEUTROS ───────────────────────────────────── */
  --color-bg:          #f8fafc;            /* fundo da página */
  --color-surface:     #ffffff;            /* fundo de cards */
  --color-surface-2:   #f1f5f9;            /* fundo sutil (ex: input) */
  --color-text:        #0f172a;            /* texto principal */
  --color-text-soft:   #64748b;            /* texto secundário */
  --color-text-mute:   #94a3b8;            /* texto desabilitado / placeholder */
  --color-border:      rgba(0, 0, 0, 0.06);
  --color-border-strong: #e2e8f0;

  /* Tons escuros (para hero / login overlay) */
  --color-dark:        #0f172a;
  --color-dark-2:      #1e293b;

  /* ── 3. CORES — SEMÂNTICAS ────────────────────────────────── */
  --color-success:     #10b981;
  --color-success-bg:  rgba(16, 185, 129, 0.10);
  --color-success-ink: #166534;
  --color-warning:     #f59e0b;
  --color-warning-bg:  rgba(245, 158, 11, 0.10);
  --color-error:       #ef4444;
  --color-error-bg:    rgba(239, 68, 68, 0.10);
  --color-info:        #3b82f6;
  --color-info-bg:     rgba(59, 130, 246, 0.10);

  /* Cores adicionais usadas em tags (timeline, social, etc) */
  --color-blue:        #0284c7;
  --color-blue-bg:     #e0f2fe;
  --color-green:       #059669;
  --color-green-bg:    #d1fae5;
  --color-gray-bg:     #f1f5f9;
  --color-gray-ink:    #64748b;

  /* ── 4. TIPOGRAFIA ────────────────────────────────────────── */
  --font-sans: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --font-size-xs:    11px;   /* labels minúsculos */
  --font-size-sm:    13px;   /* secundário */
  --font-size-base:  14px;   /* corpo */
  --font-size-md:    16px;   /* lead */
  --font-size-lg:    18px;   /* h4 */
  --font-size-xl:    22px;   /* h3 */
  --font-size-2xl:   28px;   /* h2 */
  --font-size-3xl:   36px;   /* hero / valor de stat */
  --font-size-4xl:   42px;   /* page title */
  --font-size-5xl:   48px;   /* hero h2 */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --font-weight-extra:   800;
  --font-weight-black:   900;

  --line-height-tight:   1.2;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight: -0.05em;
  --letter-spacing-snug:  -0.02em;
  --letter-spacing-wide:  0.1em;
  --letter-spacing-wider: 0.15em;

  /* ── 5. ESPAÇAMENTO (escala 4px) ──────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;

  /* ── 6. RADIUS ────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* ── 7. SHADOWS ───────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-card:  0 15px 40px -10px rgba(0, 0, 0, 0.06);
  --shadow-brand: 0 10px 20px rgba(235, 102, 37, 0.20);
  --shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.15);

  /* ── 8. TRANSIÇÕES ────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decel:    cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast:  var(--duration-fast)  var(--easing-standard);
  --transition-base:  var(--duration-base)  var(--easing-standard);
  --transition-slow:  var(--duration-slow)  var(--easing-decel);

  /* ── 9. Z-INDEX (escala definida) ─────────────────────────── */
  --z-base:      1;
  --z-elevated:  10;
  --z-sticky:    90;
  --z-dropdown:  100;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     900;
  --z-tooltip:   1000;

  /* ── 10. BREAKPOINTS (referência — usar em @media) ────────── */
  /* Mobile:  < 640px
     Tablet:  640px – 1024px
     Desktop: > 1024px
     Wide:    > 1280px
     -- não há tokens CSS pra media queries, usar valores literais. */
}

/* ============================================================
 * ALIAS RETROCOMPATÍVEL
 * Mantém os nomes antigos funcionando enquanto migramos.
 * NOVOS componentes devem usar os tokens semânticos acima.
 * ============================================================ */
:root {
  /* Cores brand */
  --teddy-orange:       var(--color-brand);
  --teddy-orange-dark:  var(--color-brand-dark);
  --teddy-orange-soft:  var(--color-brand-soft);

  /* Neutros */
  --bg:        var(--color-bg);
  --surface:   var(--color-surface);
  --text:      var(--color-text);
  --text-soft: var(--color-text-soft);
  --border:    var(--color-border);

  /* Semânticas */
  --success:    var(--color-success);
  --success-bg: var(--color-success-bg);
  --warning:    var(--color-warning);
  --warning-bg: var(--color-warning-bg);
  --error:      var(--color-error);
  --error-bg:   var(--color-error-bg);
  --danger:     var(--color-error);
  --info:       var(--color-info);
  --info-bg:    var(--color-info-bg);

  /* Shadow legado (--shadow era o `--shadow-card` antigo) */
  --shadow: var(--shadow-card);

  /* Transição legada (era `0.4s cubic-bezier(0.16, 1, 0.3, 1)`) */
  --transition: var(--transition-slow);
}