/* @layer-wrapped:tokens */
@layer tokens {
/* ============================================================
   NETZOR DESIGN SYSTEM — TOKENS
   ============================================================
   v2.0 — 2026-05-02
   Source of truth para cores, tipografia, espaçamento, raios,
   sombras, motion, z-index e breakpoints do Netzor.

   Convenções:
   - --nz-*           → tokens crus (escalas brutas, não renomear)
   - --color-*-N      → escala semântica por papel (50..900)
   - --color-X        → papel semântico final (consumido por componentes)
   - --space-N        → escala de espaçamento (8-point grid)
   - --radius-*       → escala de raios
   - --shadow-*       → escala de sombras
   - --duration-*     → durações de transição
   - --ease-*         → curvas de easing
   - --z-*            → camadas de stacking
   - --breakpoint-*   → larguras de viewport (referência)

   Backward-compat: TODOS os tokens da v1 estão preservados.
   ============================================================ */

:root {
  color-scheme: light;

  /* ============================================================
     RAW PALETTES — não renomear, mantém compatibilidade
     ============================================================ */
  --nz-navy-950: #07111f;
  --nz-navy-900: #0b1628;
  --nz-navy-850: #0e1a2d;
  --nz-navy-800: #111f35;
  --nz-navy-700: #183052;

  --nz-blue-800: #0f3194;
  --nz-blue-700: #123fb7;
  --nz-blue-650: #1851dc;
  --nz-blue-600: #1f5eff;
  --nz-blue-500: #3387ff;
  --nz-cyan-500: #36bfff;
  --nz-cyan-400: #5ed7ff;

  --nz-ice-25: #fbfdff;
  --nz-ice-50: #f5f8fc;
  --nz-ice-100: #edf4fb;
  --nz-ice-150: #e7eff8;
  --nz-ice-200: #d8e4f2;

  --nz-neutral-50: #f8fafc;
  --nz-neutral-100: #f1f5f9;
  --nz-neutral-200: #e2e8f0;
  --nz-neutral-300: #cbd5e1;
  --nz-neutral-400: #94a3b8;
  --nz-neutral-500: #64748b;
  --nz-neutral-600: #475569;
  --nz-neutral-700: #334155;
  --nz-neutral-800: #1e293b;
  --nz-neutral-900: #0f172a;

  /* Legacy semantic flat (mantém para compat) */
  --nz-success: #17a672;
  --nz-success-soft: #e9fbf4;
  --nz-warning: #c98318;
  --nz-warning-soft: #fff5df;
  --nz-danger: #d4475c;
  --nz-danger-soft: #fff0f3;

  /* ============================================================
     SEMANTIC PALETTES — escalas 50..900 por papel
     Use color-*-700/800 para texto em fundo claro (AA garantido).
     Use color-*-500 como base do papel (botões, badges, acentos).
     Use color-*-50/100 para fundos suaves.
     ============================================================ */

  /* Primary — azul Netzor */
  --color-primary-50:  #eef4ff;
  --color-primary-100: #d9e6ff;
  --color-primary-200: #b3ccff;
  --color-primary-300: #80a8ff;
  --color-primary-400: #4d83ff;
  --color-primary-500: #1f5eff;
  --color-primary-600: #1851dc;
  --color-primary-700: #123fb7;
  --color-primary-800: #0f3194;
  --color-primary-900: #0a2370;
  --color-primary-fg:  #ffffff;

  /* Secondary — ciano Netzor (uso em destaques/acentos) */
  --color-secondary-50:  #ecfaff;
  --color-secondary-100: #cdf2ff;
  --color-secondary-200: #9be4ff;
  --color-secondary-300: #5ed7ff;
  --color-secondary-400: #36bfff;
  --color-secondary-500: #1aa3e8;
  --color-secondary-600: #0f86c2;
  --color-secondary-700: #0c699a;
  --color-secondary-800: #094e73;
  --color-secondary-900: #06354f;
  --color-secondary-fg:  #ffffff;

  /* Success — verde */
  --color-success-50:  #e9fbf4;
  --color-success-100: #c8f4dd;
  --color-success-200: #95e8c1;
  --color-success-300: #5cd6a1;
  --color-success-400: #2fbf86;
  --color-success-500: #17a672;
  --color-success-600: #128a5e;
  --color-success-700: #0e6f4b;
  --color-success-800: #0a543a;
  --color-success-900: #073d2a;
  --color-success-fg:  #ffffff;

  /* Warning — âmbar */
  --color-warning-50:  #fff8e7;
  --color-warning-100: #ffeec1;
  --color-warning-200: #ffdc8c;
  --color-warning-300: #ffc758;
  --color-warning-400: #f0a82d;
  --color-warning-500: #c98318;
  --color-warning-600: #a86b14;
  --color-warning-700: #875510;
  --color-warning-800: #66400c;
  --color-warning-900: #4a2e08;
  --color-warning-fg:  #ffffff;

  /* Danger — rosa/vermelho */
  --color-danger-50:  #fff0f3;
  --color-danger-100: #ffd9e1;
  --color-danger-200: #ffb3c2;
  --color-danger-300: #ff8499;
  --color-danger-400: #ec6477;
  --color-danger-500: #d4475c;
  --color-danger-600: #b8344a;
  --color-danger-700: #962839;
  --color-danger-800: #731e2a;
  --color-danger-900: #50141d;
  --color-danger-fg:  #ffffff;

  /* Info — ciano informacional (alias da secondary) */
  --color-info-50:  var(--color-secondary-50);
  --color-info-100: var(--color-secondary-100);
  --color-info-200: var(--color-secondary-200);
  --color-info-300: var(--color-secondary-300);
  --color-info-400: var(--color-secondary-400);
  --color-info-500: var(--color-secondary-500);
  --color-info-600: var(--color-secondary-600);
  --color-info-700: var(--color-secondary-700);
  --color-info-800: var(--color-secondary-800);
  --color-info-900: var(--color-secondary-900);
  --color-info-fg:  var(--color-secondary-fg);

  /* Neutral — alias de --nz-neutral-* */
  --color-neutral-50:  var(--nz-neutral-50);
  --color-neutral-100: var(--nz-neutral-100);
  --color-neutral-200: var(--nz-neutral-200);
  --color-neutral-300: var(--nz-neutral-300);
  --color-neutral-400: var(--nz-neutral-400);
  --color-neutral-500: var(--nz-neutral-500);
  --color-neutral-600: var(--nz-neutral-600);
  --color-neutral-700: var(--nz-neutral-700);
  --color-neutral-800: var(--nz-neutral-800);
  --color-neutral-900: var(--nz-neutral-900);

  /* ============================================================
     SEMANTIC ROLES — high-level, consumidos pelos componentes
     ============================================================ */

  /* Primary */
  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-active: var(--color-primary-700);
  --color-primary-soft: var(--color-primary-50);
  --color-primary-soft-hover: var(--color-primary-100);
  --color-primary-text: var(--color-primary-700);

  /* Success */
  --color-success: var(--color-success-500);
  --color-success-hover: var(--color-success-600);
  --color-success-active: var(--color-success-700);
  --color-success-soft: var(--color-success-50);
  --color-success-text: var(--color-success-700);

  /* Warning */
  --color-warning: var(--color-warning-500);
  --color-warning-hover: var(--color-warning-600);
  --color-warning-active: var(--color-warning-700);
  --color-warning-soft: var(--color-warning-50);
  --color-warning-text: var(--color-warning-700);

  /* Danger */
  --color-danger: var(--color-danger-500);
  --color-danger-hover: var(--color-danger-600);
  --color-danger-active: var(--color-danger-700);
  --color-danger-soft: var(--color-danger-50);
  --color-danger-text: var(--color-danger-700);

  /* Info */
  --color-info: var(--color-info-500);
  --color-info-hover: var(--color-info-600);
  --color-info-active: var(--color-info-700);
  --color-info-soft: var(--color-info-50);
  --color-info-text: var(--color-info-700);

  /* Surface */
  --color-bg: var(--nz-ice-50);
  --color-surface: rgba(255, 255, 255, 0.94);
  --color-surface-solid: #ffffff;
  --color-surface-muted: var(--nz-ice-100);
  --color-surface-raised: #ffffff;
  --color-surface-overlay: rgba(15, 23, 42, 0.55);
  --color-surface-inverse: var(--nz-navy-950);

  /* Border */
  --color-border: var(--nz-ice-200);
  --color-border-strong: var(--nz-neutral-300);
  --color-border-subtle: var(--nz-ice-150);
  --color-border-focus: var(--color-primary);

  /* Text */
  --color-text: #101828;
  --color-text-soft: #66758a;
  --color-text-muted: #7b8aa0;
  --color-text-disabled: #a3b0c4;
  --color-text-inverse: #ffffff;
  --color-text-on-primary: #ffffff;
  --color-text-link: var(--color-primary);
  --color-text-link-hover: var(--color-primary-hover);

  /* Navigation */
  --color-nav: var(--nz-navy-950);
  --color-nav-soft: var(--nz-navy-900);
  --color-nav-text: rgba(255, 255, 255, 0.92);
  --color-nav-text-muted: rgba(255, 255, 255, 0.55);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: "Space Grotesk", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Font sizes (rem-based, 1rem = 16px) */
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1rem;      /* alias */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */
  --font-size-5xl:  3rem;      /* 48px */

  /* Font weights */
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;
  --font-weight-black:      900;

  /* Line heights */
  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose:   1.85;

  /* Letter spacing */
  --letter-spacing-tighter: -0.04em;
  --letter-spacing-tight:   -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-wider:   0.08em;
  --letter-spacing-widest:  0.12em;

  /* ============================================================
     SPACING — 8-point grid
     ============================================================ */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-7:  1.75rem;  /* 28px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ============================================================
     RADII
     ============================================================ */
  --radius-none:   0;
  --radius-xs:     6px;
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     18px;
  --radius-xl:     24px;
  --radius-2xl:    32px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ============================================================
     SHADOWS — escala progressiva (light mode)
     ============================================================ */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(7, 17, 31, 0.04);
  --shadow-sm:    0 2px 4px rgba(7, 17, 31, 0.05), 0 1px 2px rgba(7, 17, 31, 0.04);
  --shadow-md:    0 6px 14px rgba(7, 17, 31, 0.06), 0 2px 4px rgba(7, 17, 31, 0.04);
  --shadow-lg:    0 12px 28px rgba(7, 17, 31, 0.08), 0 4px 8px rgba(7, 17, 31, 0.04);
  --shadow-xl:    0 20px 48px rgba(7, 17, 31, 0.12), 0 6px 12px rgba(7, 17, 31, 0.05);
  --shadow-2xl:   0 32px 64px rgba(7, 17, 31, 0.18);
  --shadow-inner: inset 0 1px 2px rgba(7, 17, 31, 0.06);

  /* Focus ring shadows (semantic) */
  --shadow-focus:         0 0 0 3px rgba(31, 94, 255, 0.20);
  --shadow-focus-success: 0 0 0 3px rgba(23, 166, 114, 0.20);
  --shadow-focus-warning: 0 0 0 3px rgba(201, 131, 24, 0.20);
  --shadow-focus-danger:  0 0 0 3px rgba(212, 71, 92, 0.20);

  /* ============================================================
     MOTION — durações + easings
     ============================================================ */
  --duration-instant: 80ms;
  --duration-short:   160ms;
  --duration-medium:  220ms;
  --duration-long:    320ms;
  --duration-slow:    480ms;

  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);
  --ease-sharp:       cubic-bezier(0.4, 0, 0.6, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Composições prontas */
  --transition-fast:   var(--duration-short) var(--ease-standard);
  --transition-medium: var(--duration-medium) var(--ease-standard);
  --transition-slow:   var(--duration-long) var(--ease-decelerate);

  /* Legacy aliases */
  --nz-transition-fast:   var(--transition-fast);
  --nz-transition-medium: var(--transition-medium);

  /* ============================================================
     Z-INDEX — escala de stacking
     ============================================================ */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  800;
  --z-modal:    1000;
  --z-popover:  1100;
  --z-toast:    1200;
  --z-tooltip:  1400;

  /* ============================================================
     BREAKPOINTS — referência (CSS não suporta var em @media,
     mas centraliza valor para consulta via JS)
     ============================================================ */
  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;

  /* ============================================================
     NEUTRAL ADAPTIVE TOKENS — para tags, ícones neutros, avatares
     (resolvem problema de --color-neutral-* não adaptar em dark)
     ============================================================ */
  --color-neutral-bg:        var(--color-neutral-100);
  --color-neutral-bg-strong: var(--color-neutral-200);
  --color-neutral-fg:        var(--color-neutral-700);
  --color-neutral-fg-soft:   var(--color-neutral-600);

  /* ============================================================
     LEGACY INTENSITY — preservado para compat
     (sobrescritos no dark mode logo abaixo)
     ============================================================ */
  --nz-intensity-light-border: rgba(31, 94, 255, 0.10);
  --nz-intensity-light-focus:  0 0 0 3px rgba(51, 135, 255, 0.10);
  --nz-intensity-light-shadow: 0 10px 28px rgba(7, 17, 31, 0.045);

  --nz-intensity-medium-border: rgba(94, 215, 255, 0.18);
  --nz-intensity-medium-glow:   0 12px 28px rgba(31, 94, 255, 0.14);
  --nz-intensity-medium-signal: linear-gradient(180deg, var(--nz-cyan-400), var(--nz-blue-600));

  --nz-intensity-strong-border: rgba(94, 215, 255, 0.28);
  --nz-intensity-strong-glow:   0 16px 38px rgba(31, 94, 255, 0.20);
  --nz-intensity-strong-signal: linear-gradient(135deg, var(--nz-blue-800), var(--nz-blue-600) 58%, var(--nz-cyan-400));

  --nz-accent-line: linear-gradient(135deg, var(--nz-blue-600), var(--nz-cyan-400));

  /* ============================================================
     GRADIENTS — para "dark hero" pattern (admin operational headers)
     ============================================================ */
  --gradient-hero-accent: linear-gradient(135deg, var(--nz-neutral-900), var(--nz-neutral-800));
  --color-hero-accent-text: #f8fafc;
  --color-hero-accent-text-soft: rgba(226, 232, 240, 0.84);
  --shadow-hero-accent: 0 18px 40px rgba(15, 23, 42, 0.16);
}

/* ============================================================
   THEME: NETZOR (default light, explícito)
   ============================================================ */
[data-theme-mode="netzor"] {
  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-soft: var(--color-primary-50);
  --color-bg: var(--nz-ice-50);
  --color-surface: rgba(255, 255, 255, 0.94);
  --color-surface-solid: #ffffff;
  --color-surface-muted: var(--nz-ice-100);
  --color-border: var(--nz-ice-200);
  --color-text: #101828;
  --color-text-soft: #66758a;
  --color-nav: var(--nz-navy-950);
}

/* ============================================================
   THEME: DARK — paridade total
   ============================================================ */
[data-theme-mode="dark"] {
  color-scheme: dark;

  /* Surface */
  --color-bg: #07111f;
  --color-surface: rgba(17, 31, 53, 0.94);
  --color-surface-solid: #111f35;
  --color-surface-muted: #0e1a2d;
  --color-surface-raised: #15263f;
  --color-surface-overlay: rgba(0, 0, 0, 0.65);
  --color-surface-inverse: #ffffff;

  /* Border */
  --color-border: rgba(148, 163, 184, 0.18);
  --color-border-strong: rgba(148, 163, 184, 0.32);
  --color-border-subtle: rgba(148, 163, 184, 0.10);
  --color-border-focus: var(--color-primary-400);

  /* Text */
  --color-text: #f8fbff;
  --color-text-soft: #b4c4d8;
  --color-text-muted: #8fa3bb;
  --color-text-disabled: #5e6e85;
  --color-text-inverse: #0f172a;
  --color-text-on-primary: #ffffff;
  --color-text-link: var(--color-primary-300);
  --color-text-link-hover: var(--color-primary-200);

  /* Navigation */
  --color-nav: #030a14;
  --color-nav-soft: #07111f;
  --color-nav-text: rgba(255, 255, 255, 0.92);
  --color-nav-text-muted: rgba(255, 255, 255, 0.55);

  /* Primary — usa shade mais clara para contraste */
  --color-primary: var(--color-primary-400);
  --color-primary-hover: var(--color-primary-300);
  --color-primary-active: var(--color-primary-200);
  --color-primary-soft: rgba(31, 94, 255, 0.18);
  --color-primary-soft-hover: rgba(31, 94, 255, 0.26);
  --color-primary-text: var(--color-primary-300);

  /* Success */
  --color-success: var(--color-success-400);
  --color-success-hover: var(--color-success-300);
  --color-success-soft: rgba(23, 166, 114, 0.16);
  --color-success-text: var(--color-success-300);

  /* Warning */
  --color-warning: var(--color-warning-400);
  --color-warning-hover: var(--color-warning-300);
  --color-warning-soft: rgba(201, 131, 24, 0.16);
  --color-warning-text: var(--color-warning-300);

  /* Danger */
  --color-danger: var(--color-danger-400);
  --color-danger-hover: var(--color-danger-300);
  --color-danger-soft: rgba(212, 71, 92, 0.16);
  --color-danger-text: var(--color-danger-300);

  /* Info */
  --color-info: var(--color-info-400);
  --color-info-hover: var(--color-info-300);
  --color-info-soft: rgba(54, 191, 255, 0.16);
  --color-info-text: var(--color-info-300);

  /* Shadows mais densas no dark */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 6px 14px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg:  0 12px 28px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30);
  --shadow-xl:  0 20px 48px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.35);
  --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.60);
  --shadow-focus: 0 0 0 3px rgba(77, 131, 255, 0.40);

  /* Neutral adaptativo */
  --color-neutral-bg:        rgba(148, 163, 184, 0.12);
  --color-neutral-bg-strong: rgba(148, 163, 184, 0.20);
  --color-neutral-fg:        var(--color-neutral-300);
  --color-neutral-fg-soft:   var(--color-neutral-400);

  /* Legacy intensity tokens — overrides dark */
  --nz-intensity-light-border: rgba(94, 215, 255, 0.16);
  --nz-intensity-light-focus:  0 0 0 3px rgba(77, 131, 255, 0.30);
  --nz-intensity-light-shadow: 0 10px 28px rgba(0, 0, 0, 0.40);

  /* Hero accent: gradiente mais claro em dark para manter hierarquia
     (body já é dark — hero precisa ser ligeiramente mais claro ou o pattern some) */
  --gradient-hero-accent: linear-gradient(135deg, var(--nz-navy-700), var(--nz-neutral-700));
  --color-hero-accent-text: #f8fbff;
  --color-hero-accent-text-soft: rgba(226, 232, 240, 0.84);
  --shadow-hero-accent: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   THEME: LIGHT — variante de alto contraste
   ============================================================ */
[data-theme-mode="light"] {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-solid: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-text-soft: #64748b;
}

/* ============================================================
   THEME: CUSTOM — overrides por tenant
   ============================================================ */
[data-theme-mode="custom"] {
  --color-primary: var(--custom-primary, var(--color-primary-500));
  --color-primary-hover: var(--custom-primary-hover, var(--color-primary-600));
  --color-bg: var(--custom-dashboard-bg, var(--nz-ice-50));
  --color-surface-muted: var(--custom-home-panel-bg-color, var(--nz-ice-100));
}

/* ============================================================
   AUTO DARK — preferência do sistema (opt-in)
   Aplica somente quando o elemento tem [data-theme-auto="true"]
   ============================================================ */
@media (prefers-color-scheme: dark) {
  [data-theme-auto="true"]:not([data-theme-mode]) {
    color-scheme: dark;
    --color-bg: #07111f;
    --color-surface: rgba(17, 31, 53, 0.94);
    --color-surface-solid: #111f35;
    --color-surface-muted: #0e1a2d;
    --color-border: rgba(148, 163, 184, 0.18);
    --color-text: #f8fbff;
    --color-text-soft: #b4c4d8;
    --color-nav: #030a14;
  }
}

/* ============================================================
   REDUCED MOTION — respeita preferência de acessibilidade
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-short:   0ms;
    --duration-medium:  0ms;
    --duration-long:    0ms;
    --duration-slow:    0ms;
  }
}

}