/* ============================================================================
 * VSX DESIGN SYSTEM — CSS CUSTOM PROPERTIES
 * ============================================================================
 * Gerado a partir de tokens/tokens.yaml — NÃO editar valores aqui diretamente.
 * Consumo: <link rel="stylesheet" href="tokens.css"> nos 6 projetos vanilla
 * (Node/Express + FastAPI, sem build step) — ver ARCHITECTURE.md §2.2 Alvo A.
 *
 * Cor: hex primeiro (fallback universal), oklch() depois (moderno) — ver
 * ARCHITECTURE.md §2.5. Cascade simples, sem @supports, propositalmente.
 *
 * Tema: dark-only hoje (:root = tema dark). Estrutura preparada para futuro
 * tema light via [data-theme="light"] — bloco vazio abaixo, populado apenas
 * quando um segundo tema for necessário (ARCHITECTURE.md §2.1, "única camada
 * de tema — dark hoje, light no futuro").
 *
 * Tipografia: --font-family-base referencia 'Ranade', mas os arquivos físicos
 * da fonte e os @font-face vivem em ./fonts.css (não neste arquivo) — ver
 * ARCHITECTURE.md §2.6. @import abaixo é OBRIGATÓRIO: sem ele, Ranade nunca
 * carrega e todo o design system cai silenciosamente no fallback system-ui.
 * ============================================================================ */

/* @import removido: fonts.css entra por <link> proprio em cada pagina (ordem explicita). */

:root {
  /* -------------------- CORE — color -------------------- */
  --color-navy-750: #1C2248; /* fallback */
  --color-navy-750: oklch(26.9% 0.0705 274); /* modern */
  --color-navy-800: #141838; /* fallback */
  --color-navy-800: oklch(22.5% 0.0616 275); /* modern */
  --color-navy-850: #0F1330; /* fallback */
  --color-navy-850: oklch(20.2% 0.0574 274.2); /* modern */
  --color-navy-900: #0B0E24; /* fallback */
  --color-navy-900: oklch(17.5% 0.0453 274.9); /* modern */
  --color-navy-950: #06081A; /* fallback */
  --color-navy-950: oklch(14.4% 0.0391 274.6); /* modern */
  --color-blue-600: #1432F5; /* fallback */
  --color-blue-600: oklch(47.5% 0.2792 265.5); /* modern */
  --color-blue-700: #0F26CC; /* fallback */
  --color-blue-700: oklch(41.2% 0.2446 265.6); /* modern */
  --color-blue-400: #7587FD; /* fallback */
  --color-blue-400: oklch(66.6% 0.1743 274.2); /* modern */
  --color-green-500: #10B981; /* fallback */
  --color-green-500: oklch(69.6% 0.1491 162.5); /* modern */
  --color-red-500: #EF4444; /* fallback */
  --color-red-500: oklch(63.7% 0.2078 25.3); /* modern */
  --color-amber-500: #F59E0B; /* fallback */
  --color-amber-500: oklch(76.9% 0.1647 70.1); /* modern */
  --color-pink-500: #EC4899; /* fallback */
  --color-pink-500: oklch(65.6% 0.2118 354.3); /* modern */
  --color-ink-100: #F0F4FF; /* fallback */
  --color-ink-100: oklch(96.7% 0.0153 270); /* modern */
  --color-ink-400: #8899CC; /* fallback */
  --color-ink-400: oklch(68.9% 0.0779 270); /* modern */
  --color-ink-600: #4A5580; /* fallback */
  --color-ink-600: oklch(45.9% 0.0717 272.4); /* modern */
  --color-black: #000000; /* fallback */
  --color-black: oklch(0% 0 0); /* modern */
  --color-white: #FFFFFF; /* fallback */
  --color-white: oklch(100% 0 89.9); /* modern */

  /* -------------------- CORE — spacing -------------------- */
  --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-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-1-5: 6px;
  --space-2-5: 10px;
  --space-3-5: 14px;

  /* -------------------- CORE — typography -------------------- */
  --font-family-base: Ranade, system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-size-75: 0.5625rem; /* 9px */
  --font-size-100: 0.6875rem; /* 11px */
  --font-size-150: 0.75rem; /* 12px */
  --font-size-200: 0.8125rem; /* 13px */
  --font-size-250: 0.875rem; /* 14px */
  --font-size-300: 1rem; /* 16px */
  --font-size-350: 1.125rem; /* 18px */
  --font-size-400: 1.25rem; /* 20px */
  --font-size-450: 1.375rem; /* 22px */
  --font-size-500: 1.5rem; /* 24px */
  --font-size-600: 1.75rem; /* 28px */
  --font-size-700: 2rem; /* 32px */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* -------------------- CORE — radius -------------------- */
  --radius-100: 8px;
  --radius-200: 14px;
  --radius-pill: 999px;

  /* -------------------- CORE — shadow -------------------- */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 16px 48px rgba(0, 0, 0, 0.5);

  /* -------------------- CORE — z-index -------------------- */
  --z-0: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 500;

  /* -------------------- CORE — breakpoint (referência — media queries não podem usar var()) -------------------- */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;

  /* -------------------- CORE — motion -------------------- */
  --duration-fast: 200ms;
  --duration-slow: 1000ms;
  --easing-default: ease;

  /* ============================================================
   * SEMANTIC — intenção de uso (única camada de tema)
   * ============================================================ */

  /* -------------------- SEMANTIC — color -------------------- */
  --color-bg-canvas: #06081A; /* fallback */
  --color-bg-canvas: oklch(14.4% 0.0391 274.6); /* modern */
  --color-bg-surface: #0B0E24; /* fallback */
  --color-bg-surface: oklch(17.5% 0.0453 274.9); /* modern */
  --color-bg-surface-alt: #0F1330; /* fallback */
  --color-bg-surface-alt: oklch(20.2% 0.0574 274.2); /* modern */
  --color-bg-surface-hover: #141838; /* fallback */
  --color-bg-surface-hover: oklch(22.5% 0.0616 275); /* modern */
  --color-border-default: #1C2248; /* fallback */
  --color-border-default: oklch(26.9% 0.0705 274); /* modern */
  --color-accent-default: #1432F5; /* fallback */
  --color-accent-default: oklch(47.5% 0.2792 265.5); /* modern */
  --color-accent-hover: #0F26CC; /* fallback */
  --color-accent-hover: oklch(41.2% 0.2446 265.6); /* modern */
  --color-accent-tint: rgba(20, 50, 245, 0.12); /* fallback */
  --color-accent-tint: oklch(47.5% 0.2792 265.5 / 0.12); /* modern */
  /* --color-accent-on-dark (v0.1.1): accent em papel de PRIMEIRO PLANO (texto/ícone/borda/preenchimento
     gráfico) contra os 4 fundos escuros da marca — usar em vez de --color-accent-default sempre que a cor
     for texto/ícone/indicador não-textual (alert info, badge Beta, progress fill, toast border-left info).
     --color-accent-default segue correto como fundo SÓLIDO de botão. Ver quality/A11Y-AUDIT.md V5/V9 e
     ARCHITECTURE.md §7. Validado: 5.45:1-6.28:1 contra os 4 fundos (passa 4.5:1 texto e 3:1 não-texto). */
  --color-accent-on-dark: #7587FD; /* fallback */
  --color-accent-on-dark: oklch(66.6% 0.1743 274.2); /* modern */
  /* --color-focus-ring (v0.1.1): cor dedicada e neutra do anel/outline de foco visível — substitui
     --color-accent-tint (1.06:1, invisível) e --color-accent-default (2.30-2.65:1, insuficiente) em TODOS
     os seletores :focus-visible/outline de foco. Ver quality/A11Y-AUDIT.md V1/V3 e ARCHITECTURE.md §7.
     Validado: 17.25:1-19.86:1 contra os 4 fundos. */
  --color-focus-ring: #FFFFFF; /* fallback */
  --color-focus-ring: oklch(100% 0 89.9); /* modern */
  --color-status-success: #10B981; /* fallback */
  --color-status-success: oklch(69.6% 0.1491 162.5); /* modern */
  --color-status-error: #EF4444; /* fallback */
  --color-status-error: oklch(63.7% 0.2078 25.3); /* modern */
  --color-status-warning: #F59E0B; /* fallback */
  --color-status-warning: oklch(76.9% 0.1647 70.1); /* modern */
  --color-status-highlight: #EC4899; /* fallback */
  --color-status-highlight: oklch(65.6% 0.2118 354.3); /* modern */
  --color-text-primary: #F0F4FF; /* fallback */
  --color-text-primary: oklch(96.7% 0.0153 270); /* modern */
  --color-text-secondary: #8899CC; /* fallback */
  --color-text-secondary: oklch(68.9% 0.0779 270); /* modern */
  --color-text-tertiary: #4A5580; /* fallback */
  --color-text-tertiary: oklch(45.9% 0.0717 272.4); /* modern */

  /* -------------------- SEMANTIC — typography -------------------- */
  --typography-body-font-family: var(--font-family-base);
  --typography-body-font-size: var(--font-size-250);
  --typography-body-font-weight: var(--font-weight-regular);
  --typography-body-line-height: var(--line-height-normal);
  --typography-body-sm-font-family: var(--font-family-base);
  --typography-body-sm-font-size: var(--font-size-200);
  --typography-body-sm-font-weight: var(--font-weight-regular);
  --typography-body-sm-line-height: var(--line-height-normal);
  --typography-label-font-family: var(--font-family-base);
  --typography-label-font-size: var(--font-size-150);
  --typography-label-font-weight: var(--font-weight-medium);
  --typography-label-line-height: var(--line-height-normal);
  --typography-heading-md-font-family: var(--font-family-base);
  --typography-heading-md-font-size: var(--font-size-400);
  --typography-heading-md-font-weight: var(--font-weight-bold);
  --typography-heading-md-line-height: var(--line-height-tight);
  --typography-heading-lg-font-family: var(--font-family-base);
  --typography-heading-lg-font-size: var(--font-size-500);
  --typography-heading-lg-font-weight: var(--font-weight-bold);
  --typography-heading-lg-line-height: var(--line-height-tight);
  --typography-kpi-value-font-family: var(--font-family-base);
  --typography-kpi-value-font-size: var(--font-size-700);
  --typography-kpi-value-font-weight: var(--font-weight-bold);
  --typography-kpi-value-line-height: var(--line-height-tight);

  /* -------------------- SEMANTIC — radius -------------------- */
  --radius-default: var(--radius-200);
  --radius-sm: var(--radius-100);

  /* -------------------- SEMANTIC — motion -------------------- */
  --transition-default: var(--duration-fast) var(--easing-default); /* 0.2s ease */

  /* -------------------- SEMANTIC — layout -------------------- */
  --layout-sidebar-width: 220px;
  --layout-topbar-height: 57px;
}

/* ============================================================================
 * FUTURO TEMA LIGHT (placeholder — ver ARCHITECTURE.md §2.1)
 * Nenhum projeto VSX auditado usa tema light hoje (dark-only confirmado nos
 * 6 audits). Bloco populado apenas quando houver demanda real de produto.
 * ============================================================================ */
/*
[data-theme="light"] {
  // --color-bg-canvas: ...;
}
*/