/* ==============================================================================
   DESIGN TOKENS — Wrong Web (Tachibana CSS Design System)
   Restrição Cromática Industrial, Anti-Halation & WCAG 2.1 AA
   ============================================================================== */

:root {
  color-scheme: dark;

  /* Superfícies Industriais Tachibana */
  --tc-bg-base: #0a0c10;
  --tc-bg-surface-1: #10141d;
  --tc-bg-surface-2: #161b26;
  --tc-bg-surface-3: #1d2433;
  --tc-bg-surface-hover: #222b3d;

  /* Divisores e Linhas Ortogonais de 1px */
  --tc-border-base: #232c3f;
  --tc-border-muted: #18202f;
  --tc-border-contrast: #374665;
  --tc-border-focus: #60a5fa;

  /* Contraste Textual em Conformidade com WCAG 2.1 AA */
  --tc-text-main: #f0f6fc;      /* Contraste 17.5:1 no fundo base */
  --tc-text-muted: #a3b3c2;     /* Contraste 9.1:1 no fundo */
  --tc-text-dim: #808c9c;       /* Contraste 5.7:1 no fundo */

  /* Cores Semânticas Desaturadas (Prevenção de Halation / Fadiga Visual) */
  --tc-amber: #e5a43b;
  --tc-amber-bg: rgba(229, 164, 59, 0.12);
  --tc-amber-border: rgba(229, 164, 59, 0.4);

  --tc-emerald: #34d399;
  --tc-emerald-bg: rgba(52, 211, 153, 0.12);
  --tc-emerald-border: rgba(52, 211, 153, 0.4);

  --tc-blue: #60a5fa;
  --tc-blue-bg: rgba(96, 165, 250, 0.12);
  --tc-blue-border: rgba(96, 165, 250, 0.4);

  --tc-red: #f87171;
  --tc-red-bg: rgba(248, 113, 113, 0.12);
  --tc-red-border: rgba(248, 113, 113, 0.4);

  /* Tipografia Híbrida */
  --tc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Geometria Rígida Estrita (Zero Border-Radius) */
  --radius-sm: 0px !important;
  --radius-md: 0px !important;
  --tc-radius: 0px !important;

  /* Escala de Espaçamento Técnico (base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Escala de Tipografia */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;

  /* Pesos de Fonte */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Transições rápidas e analógicas */
  --transition-fast: 0.12s ease;

  /* --- Tokens Semânticos Mapeados para o Tachibana --- */
  --bg-page: var(--tc-bg-base);
  --bg-surface: var(--tc-bg-surface-1);
  --bg-input: var(--tc-bg-surface-1);
  --bg-brand: var(--tc-amber);
  --bg-brand-hover: #f59e0b;
  --bg-overlay: rgba(255, 255, 255, 0.03);

  --text-primary: var(--tc-text-main);
  --text-secondary: var(--tc-text-muted);
  --text-tertiary: var(--tc-text-dim);
  --text-link: var(--tc-text-main);
  --text-link-hover: var(--tc-amber);
  --text-on-brand: #0a0c10;

  --border-primary: var(--tc-border-base);
  --border-strong: var(--tc-border-contrast);
  --border-muted: var(--tc-border-muted);

  --color-brand: var(--tc-amber);
  --color-brand-hover: #f59e0b;
  --color-danger: var(--tc-red);
  --color-danger-bg: var(--tc-red-bg);
  --color-danger-border: var(--tc-red-border);
  --color-success: var(--tc-emerald);
  --color-success-bg: var(--tc-emerald-bg);

  --vote-color: var(--tc-text-dim);
  --vote-color-hover: var(--tc-emerald);

  --focus-ring: var(--tc-border-focus);
}