/**
 * WEVEX Design System — tokens oficiais (Brand Book v1.0)
 * Fonte da verdade. Nenhuma tela nova fora destes tokens.
 */
:root {
  /* Brand */
  --wx-black: #05070d;
  --wx-ink: #0b1220;
  --wx-blue: #1b6bff;
  --wx-blue-deep: #0a3d99;
  --wx-blue-soft: color-mix(in srgb, var(--wx-blue) 12%, white);
  --wx-green: #22c55e;
  --wx-green-bright: #3dff9a;
  --wx-green-soft: color-mix(in srgb, var(--wx-green) 12%, white);

  /* Neutrals (light UI) */
  --wx-white: #ffffff;
  --wx-bg: #f6f7fb;
  --wx-surface: #ffffff;
  --wx-surface-2: #eef1f7;
  --wx-surface-raised: #ffffff;
  --wx-border: #e2e6ef;
  --wx-border-strong: #c9d0dd;
  --wx-text-primary: #101828;
  --wx-text-secondary: #344054;
  --wx-text-muted: #667085;
  --wx-muted: #667085;
  --wx-disabled: #98a2b3;

  /* Dark surfaces */
  --wx-dark-bg: #05070d;
  --wx-dark-surface: #0e1422;
  --wx-dark-surface-raised: #141c2c;
  --wx-dark-border: #1c2436;
  --wx-dark-border-strong: #344057;
  --wx-dark-text: #e8ecf5;
  --wx-dark-muted: #93a0b8;

  /* Semantic */
  --wx-success: #16a34a;
  --wx-warning: #d97706;
  --wx-danger: #dc2626;
  --wx-info: #2563eb;

  /* Typography */
  --wx-font-display: "Plus Jakarta Sans", "Sora", system-ui, sans-serif;
  --wx-font-ui: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
  --wx-text-xs: 0.75rem;
  --wx-text-sm: 0.875rem;
  --wx-text-md: 1rem;
  --wx-text-lg: 1.25rem;
  --wx-text-xl: 1.75rem;
  --wx-text-2xl: 2.25rem;
  --wx-text-3xl: 3rem;
  --wx-weight-regular: 400;
  --wx-weight-medium: 500;
  --wx-weight-semibold: 600;
  --wx-weight-bold: 700;
  --wx-weight-extrabold: 800;
  --wx-leading-tight: 1.15;
  --wx-leading-snug: 1.35;
  --wx-leading-normal: 1.5;

  /* Space (4px base) */
  --wx-space-1: 0.25rem;
  --wx-space-2: 0.5rem;
  --wx-space-3: 0.75rem;
  --wx-space-4: 1rem;
  --wx-space-5: 1.5rem;
  --wx-space-6: 2rem;
  --wx-space-7: 3rem;
  --wx-space-8: 4rem;
  --wx-space-9: 6rem;

  /* Radius */
  --wx-radius-sm: 8px;
  --wx-radius-md: 12px;
  --wx-radius-lg: 16px;
  --wx-radius-xl: 24px;
  --wx-radius-full: 999px;

  /* Elevation — use sparingly */
  --wx-shadow: 0 8px 24px rgba(5, 7, 13, 0.08);
  --wx-shadow-sm: 0 1px 3px rgba(5, 7, 13, 0.08);
  --wx-shadow-lg: 0 20px 48px rgba(5, 7, 13, 0.14);

  /* Layering */
  --wx-z-base: 0;
  --wx-z-sticky: 20;
  --wx-z-overlay: 60;
  --wx-z-modal: 80;
  --wx-z-toast: 100;

  /* Motion */
  --wx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --wx-duration-fast: 150ms;
  --wx-duration: 220ms;

  /* Touch */
  --wx-touch: 48px;
  --wx-touch-min: 44px;

  /* Layout */
  --wx-container: 1120px;
  --wx-container-wide: 1440px;
  --wx-container-narrow: 760px;
  --wx-bp-sm: 480px;
  --wx-bp-md: 768px;
  --wx-bp-lg: 1024px;
  --wx-bp-xl: 1280px;

  /* Semantic aliases for components */
  --wx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--wx-blue) 35%, transparent);
  --wx-action: var(--wx-blue);
  --wx-action-hover: var(--wx-blue-deep);
  --wx-background: var(--wx-bg);
  --wx-primary: var(--wx-action);
  --wx-primary-hover: var(--wx-action-hover);

  /* Density contract. Override through .wx-density-* only. */
  --wx-density-space: var(--wx-space-4);
  --wx-density-control: var(--wx-touch);
  --wx-density-card-padding: var(--wx-space-5);
  --wx-density-row: 3.25rem;
}

.wx-theme-dark {
  --wx-background: var(--wx-dark-bg);
  --wx-surface: var(--wx-dark-surface);
  --wx-surface-raised: var(--wx-dark-surface-raised);
  --wx-border: var(--wx-dark-border);
  --wx-border-strong: var(--wx-dark-border-strong);
  --wx-text-primary: var(--wx-dark-text);
  --wx-text-secondary: #c1cad9;
  --wx-text-muted: var(--wx-dark-muted);
}

.wx-density-comfortable {
  --wx-density-space: var(--wx-space-5);
  --wx-density-control: 3rem;
  --wx-density-card-padding: var(--wx-space-5);
  --wx-density-row: 3.5rem;
}

.wx-density-compact {
  --wx-density-space: var(--wx-space-3);
  --wx-density-control: 2.75rem;
  --wx-density-card-padding: var(--wx-space-4);
  --wx-density-row: 2.875rem;
}

.wx-density-operational {
  --wx-density-space: var(--wx-space-2);
  --wx-density-control: 2.75rem;
  --wx-density-card-padding: var(--wx-space-3);
  --wx-density-row: 2.75rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wx-duration-fast: 0ms;
    --wx-duration: 0ms;
  }
}
