/* ==========================================================================
   ZapNotei Design System — Colors & Typography
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------- */
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Root tokens (light mode) ------------------------------------------ */
:root {
  /* Font families */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Lato', system-ui, sans-serif;

  /* Primary — Deep Forest */
  --primary: #1B4332;
  --primary-variant: #2D6A4F;
  --primary-light: #52B788;

  /* Accent — Lime */
  --accent: #D4F458;
  --accent-hover: #C4E43E;
  --accent-muted: #E8F7A3;

  /* Primary scale (green) */
  --green-50: #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --green-900: #14532D;

  /* Lime scale */
  --lime-50: #F7FEE7;
  --lime-100: #ECFCCB;
  --lime-200: #D9F99D;
  --lime-300: #BEF264;
  --lime-400: #A3E635;
  --lime-500: #84CC16;
  --lime-600: #65A30D;
  --lime-700: #4D7C0F;

  /* Surfaces */
  --bg-surface: #F5F7F5;
  --bg-card: #FFFFFF;
  --bg-elevated: #FAFBFA;
  --bg-dark: #0D1F14;

  /* Text */
  --text-primary: #1A2421;
  --text-secondary: #5A6B62;
  --text-tertiary: #8E9B92;
  --text-on-dark: #F5F7F5;
  --text-on-dark-secondary: #C8D1CB;
  --text-on-accent: #1A2421;

  /* Borders */
  --border-subtle: #EDF1EE;
  --border-default: #E0E6E2;
  --border-hover: #C8D1CB;
  --border-input: #D5DCD7;
  --border-focus: #1B4332;

  /* Semantic states */
  --error: #E84C3D;
  --success: #2DA562;
  --warning: #F5A623;
  --info: #3B82F6;
  --error-bg: rgba(232, 76, 61, 0.08);
  --success-bg: rgba(45, 165, 98, 0.08);
  --warning-bg: rgba(245, 166, 35, 0.08);
  --info-bg: rgba(59, 130, 246, 0.08);

  /* Opacity utilities */
  --primary-8: rgba(27, 67, 50, 0.08);
  --primary-15: rgba(27, 67, 50, 0.15);
  --accent-8: rgba(212, 244, 88, 0.08);
  --accent-15: rgba(212, 244, 88, 0.15);
  --white-5: rgba(255, 255, 255, 0.05);
  --white-10: rgba(255, 255, 255, 0.10);
  --white-20: rgba(255, 255, 255, 0.20);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-80: rgba(255, 255, 255, 0.80);

  /* ==========================================================================
     Gradients & Patterns
     --------------------------------------------------------------------------
     Each hero-style background is a composite of:
       1. A stars overlay (4-pointed stars in soft green; drawn on top)
       2. A gradient base layer (deep green, 135°)
     Tokens are composed so changing one token updates every usage site.
     ========================================================================== */

  /* --- Base gradients (color only, no pattern) --- */
  --gradient-hero-card: linear-gradient(135deg, #1B4332 0%, #2D6A4F 100%);
  --gradient-accent-cta: linear-gradient(135deg, #D4F458 0%, #C4E43E 100%);
  --gradient-overlay-dark: linear-gradient(180deg, transparent 0%, rgba(13, 31, 20, 0.6) 100%);

  /* Hero atmosphere layer — 3 camadas decorativas em verde apagado (#52B788).
     L1 · curvas orgânicas fluidas (stroke 1, opacity 0.10–0.12)
     L2 · estrelas de 4 pontas · tamanhos 8/12/16/20px (opacity 0.15–0.25)
     L3 · semi-círculo concêntrico tracejado saindo do canto (opacity 0.12)
     Regra: nada passa de 0.25. Usuário percebe atmosfera, não elementos.
     Sobre o gradient deep green, isso cria profundidade quase imperceptível. */
  --pattern-stars: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='240' viewBox='0 0 400 240' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%2352B788' stroke-width='1'><path d='M -20 190 Q 80 140 170 175 T 360 160 T 440 130' stroke-opacity='0.11'/><path d='M -10 70 Q 70 30 150 55 T 300 40 T 430 70' stroke-opacity='0.10'/><path d='M 60 230 Q 140 180 220 220 T 400 205' stroke-opacity='0.08'/></g><g fill='none' stroke='%2352B788' stroke-width='1' stroke-dasharray='3 4' stroke-opacity='0.13'><circle cx='400' cy='240' r='120'/><circle cx='400' cy='240' r='88'/><circle cx='400' cy='240' r='56'/></g><g fill='%2352B788'><path d='M 88 68 L 91 78 L 101 81 L 91 84 L 88 94 L 85 84 L 75 81 L 85 78 Z' fill-opacity='0.22'/><path d='M 294 48 L 296 55 L 303 57 L 296 59 L 294 66 L 292 59 L 285 57 L 292 55 Z' fill-opacity='0.18'/><path d='M 168 172 L 169 176 L 173 177 L 169 178 L 168 182 L 167 178 L 163 177 L 167 176 Z' fill-opacity='0.15'/><path d='M 228 108 L 230 114.5 L 236.5 116 L 230 117.5 L 228 124 L 226 117.5 L 219.5 116 L 226 114.5 Z' fill-opacity='0.20'/></g></svg>");

  /* --- Composite hero backgrounds ---
     Layer order: atmosphere layers (top), gradient (bottom). */
  --bg-hero: var(--pattern-stars) center / cover no-repeat,
             var(--gradient-hero-card);

  /* --- Semantic surface aliases (use these in components) ---
     These map the composite hero bg to specific product contexts so
     designers/devs can retune individual use cases without touching the rest. */
  --bg-balance-card: var(--bg-hero);           /* Client Portal · balance card */
  --bg-subscription-card: var(--bg-hero);      /* Client Portal · subscription card */
  --bg-landing-hero: var(--bg-hero);           /* Landing · hero phone/visual */
  --bg-landing-cta: var(--bg-hero);            /* Landing · full-bleed CTA section */
  --bg-pricing-featured: var(--bg-hero);       /* Landing · popular pricing card */
  --bg-kpi-hero: var(--bg-hero);               /* Admin · hero KPI (MRR) */

  /* Radius */
  --radius-xs: 4px;          /* uso: code chips, inline kbd, micro-cantos */
  --radius-sm: 6px;
  --radius-sm-plus: 8px;     /* uso: nav links, sidenav rows, badges-pill mid */
  --radius-md: 12px;
  --radius-md-plus: 14px;    /* uso: squircle logo (icon container 14px) */
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Spacing scale */
  --space-2: 2px;            /* uso: micro divisores, dot spacing */
  --space-4: 4px;
  --space-6: 6px;            /* uso: chip dots, fine padding interno */
  --space-8: 8px;
  --space-10: 10px;          /* uso: sidenav row padding lateral */
  --space-12: 12px;
  --space-14: 14px;          /* uso: card padding inner, tab padding lateral */
  --space-16: 16px;
  --space-18: 18px;          /* uso: input padding lateral, btn-lg */
  --space-20: 20px;
  --space-22: 22px;          /* uso: pattern-spec inner */
  --space-24: 24px;
  --space-28: 28px;          /* uso: hero-meta gap, btn-lg-pill */
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;          /* uso: section bottom-margin styleguide */
  --space-80: 80px;
  --space-96: 96px;          /* uso: main bottom-padding */
  --space-120: 120px;

  /* Shadows (light) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.10);

  /* Transitions */
  --transition-micro: 120ms ease-out;   /* uso: sidenav hover, link hover */
  --transition-fast: 150ms ease-out;
  --transition-default: 200ms ease;
  --transition-smooth: 300ms ease-out;
  --transition-slow: 500ms ease-in-out;
  --transition-toggle: 180ms ease;      /* uso: toggle thumb slide */
  --skeleton-pulse: 2000ms;             /* uso: skeleton long pulse */
  --badge-pulse-duration: 800ms;        /* uso: realtime/live badges pulse */

  /* Auxiliary lime/purple scales (extensions) */
  --lime-800: #3F6212;
  --lime-900: #365314;
  --purple-300: #C4B5FD;
  --purple-400: #A78BFA;
  --purple-500: #8B5CF6;
  --purple-600: #9333EA;

  /* Component-specific */
  --code-radius: 4px;                   /* uso: <code> inline em prose */
  --warning-fg-on-bg: #C67C00;          /* uso: warning text sobre warning-bg */

  /* Containers */
  --container-app: 1280px;
  --container-marketing: 1440px;
  --container-narrow: 720px;

  /* ==========================================================================
     StatusBadge tokens — single source of truth (light)
     --------------------------------------------------------------------------
     Convention: --badge-{group}-{variant}-{bg|fg}.
     Pairs verified for WCAG AA (≥4.5:1 text on bg) and AAA (≥7:1) where noted.
     Variants reuse the semantic palette (success/warning/error/info) and
     scales (green/lime/blue/purple/neutral) — no new hues introduced.
     ========================================================================== */

  /* Auxiliary scales for tipo-NF (only place tipo-NF needs blue/purple) */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-700: #1D4ED8;
  --purple-50:  #FAF5FF;
  --purple-100: #F3E8FF;
  --purple-700: #6D28D9;

  /* Neutral scale (for rascunho/cancelada/funcionário/lgpd) */
  --neutral-100: #F1F4F2;
  --neutral-200: #E4EAE6;
  --neutral-500: #5A6B62;
  --neutral-700: #2A332E;

  /* 1 · NF Status (5) */
  --badge-rascunho-bg:    var(--neutral-200);
  --badge-rascunho-fg:    var(--neutral-700);
  --badge-processando-bg: rgba(59, 130, 246, 0.10);
  --badge-processando-fg: #1D4ED8;
  --badge-autorizada-bg:  rgba(45, 165, 98, 0.12);
  --badge-autorizada-fg:  #1A7A47;
  --badge-rejeitada-bg:   rgba(232, 76, 61, 0.12);
  --badge-rejeitada-fg:   #B01A0F;
  --badge-cancelada-bg:   var(--neutral-100);
  --badge-cancelada-fg:   var(--neutral-500);

  /* 2 · Ambiente fiscal (2) */
  --badge-prod-bg:    rgba(45, 165, 98, 0.12);
  --badge-prod-fg:    #1A7A47;
  --badge-homolog-bg: rgba(245, 166, 35, 0.16);
  --badge-homolog-fg: #8C5A00;

  /* 3 · MFA (2) */
  --badge-mfa-on-bg:  rgba(45, 165, 98, 0.12);
  --badge-mfa-on-fg:  #1A7A47;
  --badge-mfa-off-bg: rgba(245, 166, 35, 0.16);
  --badge-mfa-off-fg: #8C5A00;

  /* 4 · Certificado A1 (3 níveis) */
  --badge-a1-30d-bg:     rgba(245, 166, 35, 0.14);
  --badge-a1-30d-fg:     #8C5A00;
  --badge-a1-7d-bg:      rgba(234, 120, 26, 0.18);
  --badge-a1-7d-fg:      #A33C00;
  --badge-a1-expired-bg: rgba(232, 76, 61, 0.12);
  --badge-a1-expired-fg: #B01A0F;

  /* 5 · Subscription (3) */
  --badge-subscription-trial-bg:   rgba(59, 130, 246, 0.10);
  --badge-subscription-trial-fg:   #1D4ED8;
  --badge-subscription-pastdue-bg: rgba(232, 76, 61, 0.12);
  --badge-subscription-pastdue-fg: #B01A0F;
  --badge-subscription-blocked-bg: #2A332E;
  --badge-subscription-blocked-fg: #FFC4BD;

  /* 6 · Tipo NF (2) */
  --badge-tipo-nfse-bg: var(--blue-100);
  --badge-tipo-nfse-fg: var(--blue-700);
  --badge-tipo-nfe-bg:  var(--purple-100);
  --badge-tipo-nfe-fg:  var(--purple-700);

  /* 7 · Realtime (3) */
  --badge-realtime-connected-bg:    rgba(45, 165, 98, 0.12);
  --badge-realtime-connected-fg:    #1A7A47;
  --badge-realtime-reconnecting-bg: rgba(245, 166, 35, 0.16);
  --badge-realtime-reconnecting-fg: #8C5A00;
  --badge-realtime-offline-bg:      var(--neutral-100);
  --badge-realtime-offline-fg:      var(--neutral-500);

  /* 8 · Permissão usuário (2) */
  --badge-role-admin-bg:        rgba(27, 67, 50, 0.10);
  --badge-role-admin-fg:        #1B4332;
  --badge-role-funcionario-bg:  var(--neutral-100);
  --badge-role-funcionario-fg:  var(--neutral-700);

  /* 9 · LGPD (1) */
  --badge-lgpd-bg: var(--neutral-100);
  --badge-lgpd-fg: var(--neutral-700);

  /* Banner Impersonation (não-pill) */
  --bg-impersonation:        #4C1D95; /* purple-900, alta saturação proposital */
  --bg-impersonation-stripe: rgba(255, 255, 255, 0.08);
  --fg-impersonation:        #FFFFFF;

  /* ==========================================================================
     Component-7-pack tokens — LIGHT
     Toast / Banner / DiscardModal / EmptyState / ErrorPage / Switcher / Header
     ========================================================================== */
  /* Toast */
  --toast-success-bg: #ECFDF3; --toast-success-fg:#1A7A47; --toast-success-border:#2DA562;
  --toast-error-bg:   #FEF2F1; --toast-error-fg:#B01A0F;   --toast-error-border:#E84C3D;
  --toast-info-bg:    #EFF6FF; --toast-info-fg:#1D4ED8;    --toast-info-border:#3B82F6;
  --toast-realtime-bg: linear-gradient(135deg, #ECFDF3 0%, #ECF8FA 100%);
  --toast-realtime-fg:#0E7490; --toast-realtime-border:#06B6D4;
  --toast-shadow: 0 8px 24px rgba(13,31,20,.10);
  --toast-radius: 12px;

  /* Banner severities (full-width strips) */
  --banner-warn-bg:#FFF7E6; --banner-warn-fg:#8C5A00; --banner-warn-border:#F5A623;
  --banner-danger-bg:#FEF2F1; --banner-danger-fg:#B01A0F; --banner-danger-border:#E84C3D;
  --banner-info-bg:#EFF6FF; --banner-info-fg:#1D4ED8; --banner-info-border:#3B82F6;

  /* DiscardModal */
  --modal-bg: var(--bg-card); --modal-overlay: rgba(13,31,20,.55); --modal-shadow: var(--shadow-xl);
  --modal-warn-border:#F5A623; --modal-info-border:#3B82F6;
  --modal-preview-bg: var(--bg-surface); --modal-preview-border: var(--border-default);

  /* EmptyState */
  --empty-icon-color: var(--primary-light);
  --empty-headline-color: var(--text-primary);
  --empty-text-color: var(--text-secondary);

  /* ErrorPage */
  --error-page-bg: var(--bg-surface);
  --error-page-icon-color: var(--primary);
  --error-page-id-bg: var(--bg-elevated);

  /* SwitcherCNPJ */
  --switcher-trigger-bg: var(--bg-card);
  --switcher-trigger-hover: var(--bg-elevated);
  --switcher-trigger-border: var(--border-default);
  --switcher-hover: var(--bg-elevated);
  --switcher-popover-bg: var(--bg-card);
  --switcher-shadow: var(--shadow-lg);
  --switcher-row-active: var(--accent-15);
  --switcher-row-active-bg: var(--accent-15);
  --switcher-group-header: var(--text-tertiary);
  --switcher-group-header-color: var(--text-tertiary);
  --switcher-cnpj-mono-color: var(--text-secondary);

  /* HeaderApp */
  --header-bg: rgba(255,255,255,.92);
  --header-shadow: 0 1px 0 var(--border-subtle);
  --header-border-bottom: var(--border-subtle);
  --header-height-desktop: 64px;
  --header-height-mobile: 56px;
  --nav-link-color: var(--text-secondary);
  --nav-link-active: var(--primary);
  --nav-link-hover: var(--text-primary);
  --header-skip-link-bg: var(--primary);
  /* Phase 2 sweep — header sub-elements */
  --header-logo-fg: #0D1F14;            /* glyph on lime mark — fixed dark */
  --header-skip-link-fg: #0D1F14;       /* glyph on lime skip — fixed dark */
  --header-bell-count-fg: #FFFFFF;
  --header-avatar-bg: linear-gradient(135deg,#7C3AED,#5B21B6);
  --header-avatar-fg: #FFFFFF;
  --header-imperson-bg: #5B21B6;        /* purple-900 */
  --header-imperson-fg: #FFFFFF;

  /* ==========================================================================
     Skeleton tokens — single source of truth (light)
     --------------------------------------------------------------------------
     Filosofia: cinza muito sutil, com matiz verde herdada do bg surface.
     Skeleton vive sobre --bg-card (branco). bg-from/to são quase iguais — a
     animação é o gradiente "via" varrendo de canto a canto.
     Contraste skeleton-via vs bg-card ≥ 3:1 (passa em texto não-essencial).
     ========================================================================== */
  --skeleton-bg-from: #EDF1EE;     /* base — herda border-subtle */
  --skeleton-bg-via:  #DDE4DF;     /* highlight do shimmer */
  --skeleton-bg-to:   #EDF1EE;
  --skeleton-shimmer-duration: 1500ms;
  --skeleton-pulse-duration: 2000ms;
  --skeleton-fade-in: 150ms;        /* swap → conteúdo real */
  --skeleton-appear-delay: 200ms;   /* evita flash em fetch <200ms */
  --skeleton-slow-threshold: 5000ms;
  --skeleton-error-threshold: 30000ms;

  /* Slow / error overlays */
  --skeleton-slow-bg: rgba(255, 255, 255, 0.86);
  --skeleton-slow-fg: var(--text-secondary);
  --skeleton-error-bg: var(--error-bg);
  --skeleton-error-fg: #B01A0F;
  --skeleton-error-border: rgba(232, 76, 61, 0.20);
}

/* ---- Dark mode ---------------------------------------------------------- */
[data-theme="dark"] {
  --bg-surface: #0D1F14;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-elevated: rgba(255, 255, 255, 0.06);

  --text-primary: #F5F7F5;
  --text-secondary: #A8B5AE;
  --text-tertiary: #6B7A72;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-hover: rgba(255, 255, 255, 0.18);
  --border-input: rgba(255, 255, 255, 0.14);
  --border-focus: #52B788;

  --primary-light: #74C99E;
  --primary-8: rgba(82, 183, 136, 0.08);
  --primary-15: rgba(82, 183, 136, 0.15);

  /* Dark-mode atmosphere: stroke/fill opacities dropped from 0.08–0.25 to 0.06–0.20.
     Cor mantém #52B788; curvas mais fantasmas, estrelas mais discretas. */
  --pattern-stars: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='240' viewBox='0 0 400 240' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%2352B788' stroke-width='1'><path d='M -20 190 Q 80 140 170 175 T 360 160 T 440 130' stroke-opacity='0.09'/><path d='M -10 70 Q 70 30 150 55 T 300 40 T 430 70' stroke-opacity='0.08'/><path d='M 60 230 Q 140 180 220 220 T 400 205' stroke-opacity='0.06'/></g><g fill='none' stroke='%2352B788' stroke-width='1' stroke-dasharray='3 4' stroke-opacity='0.10'><circle cx='400' cy='240' r='120'/><circle cx='400' cy='240' r='88'/><circle cx='400' cy='240' r='56'/></g><g fill='%2352B788'><path d='M 88 68 L 91 78 L 101 81 L 91 84 L 88 94 L 85 84 L 75 81 L 85 78 Z' fill-opacity='0.18'/><path d='M 294 48 L 296 55 L 303 57 L 296 59 L 294 66 L 292 59 L 285 57 L 292 55 Z' fill-opacity='0.14'/><path d='M 168 172 L 169 176 L 173 177 L 169 178 L 168 182 L 167 178 L 163 177 L 167 176 Z' fill-opacity='0.12'/><path d='M 228 108 L 230 114.5 L 236.5 116 L 230 117.5 L 228 124 L 226 117.5 L 219.5 116 L 226 114.5 Z' fill-opacity='0.16'/></g></svg>");

  --error-bg: rgba(232, 76, 61, 0.14);
  --success-bg: rgba(45, 165, 98, 0.14);
  --warning-bg: rgba(245, 166, 35, 0.14);
  --info-bg: rgba(59, 130, 246, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.50);

  /* StatusBadge tokens — dark mode overrides
     Strategy: bg uses elevated translucent fills (slightly higher opacity than light
     to survive on #0D1F14); fg uses lighter shades of each hue. Contrast verified ≥4.5:1. */

  --neutral-100: rgba(255, 255, 255, 0.06);
  --neutral-200: rgba(255, 255, 255, 0.10);
  --neutral-500: #A8B5AE;
  --neutral-700: #DCE3DE;

  /* 1 · NF Status */
  --badge-rascunho-bg:    rgba(255, 255, 255, 0.08);
  --badge-rascunho-fg:    #DCE3DE;
  --badge-processando-bg: rgba(96, 165, 250, 0.18);
  --badge-processando-fg: #93C5FD;
  --badge-autorizada-bg:  rgba(74, 222, 128, 0.18);
  --badge-autorizada-fg:  #6EE7A0;
  --badge-rejeitada-bg:   rgba(248, 113, 113, 0.20);
  --badge-rejeitada-fg:   #FCA5A0;
  --badge-cancelada-bg:   rgba(255, 255, 255, 0.05);
  --badge-cancelada-fg:   #8E9B92;

  /* 2 · Ambiente */
  --badge-prod-bg:    rgba(74, 222, 128, 0.18);
  --badge-prod-fg:    #6EE7A0;
  --badge-homolog-bg: rgba(251, 191, 36, 0.20);
  --badge-homolog-fg: #FBD37A;

  /* 3 · MFA */
  --badge-mfa-on-bg:  rgba(74, 222, 128, 0.18);
  --badge-mfa-on-fg:  #6EE7A0;
  --badge-mfa-off-bg: rgba(251, 191, 36, 0.20);
  --badge-mfa-off-fg: #FBD37A;

  /* 4 · A1 */
  --badge-a1-30d-bg:     rgba(251, 191, 36, 0.18);
  --badge-a1-30d-fg:     #FBD37A;
  --badge-a1-7d-bg:      rgba(251, 146, 60, 0.22);
  --badge-a1-7d-fg:      #FFB07A;
  --badge-a1-expired-bg: rgba(248, 113, 113, 0.20);
  --badge-a1-expired-fg: #FCA5A0;

  /* 5 · Subscription */
  --badge-subscription-trial-bg:   rgba(96, 165, 250, 0.18);
  --badge-subscription-trial-fg:   #93C5FD;
  --badge-subscription-pastdue-bg: rgba(248, 113, 113, 0.20);
  --badge-subscription-pastdue-fg: #FCA5A0;
  --badge-subscription-blocked-bg: rgba(255, 255, 255, 0.10);
  --badge-subscription-blocked-fg: #FCA5A0;

  /* 6 · Tipo NF */
  --badge-tipo-nfse-bg: rgba(96, 165, 250, 0.18);
  --badge-tipo-nfse-fg: #93C5FD;
  --badge-tipo-nfe-bg:  rgba(168, 85, 247, 0.22);
  --badge-tipo-nfe-fg:  #D8B4FE;

  /* 7 · Realtime */
  --badge-realtime-connected-bg:    rgba(74, 222, 128, 0.18);
  --badge-realtime-connected-fg:    #6EE7A0;
  --badge-realtime-reconnecting-bg: rgba(251, 191, 36, 0.20);
  --badge-realtime-reconnecting-fg: #FBD37A;
  --badge-realtime-offline-bg:      rgba(255, 255, 255, 0.06);
  --badge-realtime-offline-fg:      #8E9B92;

  /* 8 · Role */
  --badge-role-admin-bg:        rgba(82, 183, 136, 0.18);
  --badge-role-admin-fg:        #B7F0CF;
  --badge-role-funcionario-bg:  rgba(255, 255, 255, 0.08);
  --badge-role-funcionario-fg:  #DCE3DE;

  /* 9 · LGPD */
  --badge-lgpd-bg: rgba(255, 255, 255, 0.08);
  --badge-lgpd-fg: #DCE3DE;

  /* Banner */
  --bg-impersonation:        #5B21B6;
  --bg-impersonation-stripe: rgba(255, 255, 255, 0.10);
  --fg-impersonation:        #FFFFFF;

  /* ==========================================================================
     Component-7-pack tokens — DARK overrides (Toast, Banner, DiscardModal,
     EmptyState, ErrorPage, SwitcherCNPJ, HeaderApp)
     ========================================================================== */
  --toast-success-bg: rgba(45,165,98,.12); --toast-success-fg:#D7F3E1; --toast-success-border:#3CC57A;
  --toast-error-bg:   rgba(232,76,61,.16); --toast-error-fg:#FFD9D4;   --toast-error-border:#FB6F62;
  --toast-info-bg:    rgba(59,130,246,.16); --toast-info-fg:#D9E7FF;   --toast-info-border:#60A5FA;
  --toast-realtime-bg: linear-gradient(135deg, rgba(45,165,98,.16), rgba(34,211,238,.16));
  --toast-realtime-fg:#D9F3EE; --toast-realtime-border:#22D3EE;
  --toast-shadow: 0 8px 24px rgba(0,0,0,.50);

  --banner-warn-bg: rgba(245,166,35,.12); --banner-warn-fg:#FBD37A; --banner-warn-border:#F5A623;
  --banner-danger-bg: rgba(232,76,61,.14); --banner-danger-fg:#FCA5A0; --banner-danger-border:#E84C3D;
  --banner-info-bg: rgba(59,130,246,.12); --banner-info-fg:#93C5FD; --banner-info-border:#3B82F6;

  --modal-bg: #14271C; --modal-overlay: rgba(0,0,0,.6); --modal-shadow: var(--shadow-xl);
  --modal-warn-border:#F5A623; --modal-info-border:#3B82F6;
  --modal-preview-bg: rgba(255,255,255,.04); --modal-preview-border: rgba(255,255,255,.10);

  --empty-icon-color:#74C99E; --empty-headline-color:var(--text-primary); --empty-text-color:var(--text-secondary);

  --error-page-bg: var(--bg-surface); --error-page-icon-color:#74C99E;
  --error-page-id-bg: rgba(255,255,255,.06);

  --switcher-trigger-bg: rgba(255,255,255,.04); --switcher-trigger-hover: rgba(255,255,255,.07); --switcher-trigger-border: rgba(255,255,255,.08); --switcher-hover: rgba(255,255,255,.07);
  --switcher-popover-bg:#14271C; --switcher-shadow: 0 16px 40px rgba(0,0,0,.55); --switcher-row-active: rgba(212,244,88,.10); --switcher-row-active-bg: rgba(212,244,88,.10);
  --switcher-group-header: var(--text-tertiary); --switcher-group-header-color: var(--text-tertiary); --switcher-cnpj-mono-color:#A8B5AE;

  --header-bg: rgba(13,31,20,.86); --header-shadow: 0 1px 0 rgba(255,255,255,.06);
  --header-border-bottom: rgba(255,255,255,.06);
  --nav-link-color: var(--text-secondary); --nav-link-active:#D4F458; --nav-link-hover: var(--text-primary);
  /* Phase 2 sweep — header sub-elements (dark) */
  --header-logo-fg:#0D1F14; --header-skip-link-fg:#0D1F14;
  --header-bell-count-fg:#FFFFFF;
  --header-avatar-bg: linear-gradient(135deg,#A78BFA,#7C3AED);
  --header-avatar-fg:#FFFFFF;
  --header-imperson-bg:#5B21B6; --header-imperson-fg:#FFFFFF;

  /* Skeleton — dark
     Strategy: usa whites com baixa opacity sobre o deep-green bg-surface.
     "via" é mais claro para o shimmer ficar visível. */
  --skeleton-bg-from: rgba(255, 255, 255, 0.05);
  --skeleton-bg-via:  rgba(255, 255, 255, 0.11);
  --skeleton-bg-to:   rgba(255, 255, 255, 0.05);

  --skeleton-slow-bg: rgba(13, 31, 20, 0.82);
  --skeleton-slow-fg: var(--text-on-dark-secondary);
  --skeleton-error-bg: rgba(248, 113, 113, 0.14);
  --skeleton-error-fg: #FCA5A0;
  --skeleton-error-border: rgba(248, 113, 113, 0.32);
}

/* High-contrast / print: drop bg color, keep mono outline + ícone + texto. */
@media print {
  .status-badge {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
}

/* ---- Base typography --------------------------------------------------- */
html {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  background: var(--bg-surface);
  margin: 0;
}

/* Display / Headings — Poppins with tight letter-spacing */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -1.5px;
  color: var(--text-primary);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.8px;
  color: var(--text-primary);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: var(--text-primary);
  margin: 0;
}

h6, .h6 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  margin: 0;
}

.body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
}

.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

.caption-xs {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.2px;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.numeric {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-feature-settings: "tnum";
}

/* Mobile overrides */
@media (max-width: 767px) {
  .display { font-size: 40px; line-height: 44px; }
  h1, .h1 { font-size: 32px; line-height: 36px; }
  h2, .h2 { font-size: 26px; line-height: 32px; }
  h3, .h3 { font-size: 22px; line-height: 28px; }
  h4, .h4 { font-size: 18px; line-height: 24px; }
  h5, .h5 { font-size: 17px; line-height: 24px; }
  h6, .h6 { font-size: 15px; line-height: 22px; }
}

/* ==========================================================================
   Component-18-pack tokens — LIGHT
   ConfirmActionModal · DataTable · FilterBar · Pagination · FileUpload ·
   DateRangePicker · BR-Inputs · AddressForm · KPICard · ChatBubble · Composer ·
   ActionMenu · StatusTimeline · CommandPalette · NotificationCenter · Tabs ·
   CopyButton · Stepper · Tooltip
   ========================================================================== */
:root {
  /* 1 · ConfirmActionModal (extends DiscardDraftModal tokens) */
  --confirm-warn-border: var(--warning);
  --confirm-warn-icon: #8C5A00;
  --confirm-critical-border: var(--error);
  --confirm-critical-icon: #B01A0F;
  --confirm-destructive-border: var(--warning);
  --confirm-irreversible-border: var(--error);
  --confirm-irreversible-icon: #B01A0F;
  --confirm-confirmable-icon: #1D4ED8;
  /* Phase 2 sweep — stage scrim helper */
  --stage-scrim: linear-gradient(180deg,rgba(13,31,20,.19),rgba(13,31,20,.06));
  --confirm-token-bg: var(--bg-elevated);
  --confirm-token-border: var(--border-input);
  --confirm-token-border-error: var(--error);

  /* 2 · DataTable */
  --datatable-row-height: 56px;
  --datatable-header-height: 48px;
  --datatable-row-hover: var(--bg-elevated);
  --datatable-row-selected: var(--accent-15);
  --datatable-border: var(--border-subtle);
  --datatable-sort-active-color: var(--primary);
  --datatable-header-bg: var(--bg-card);
  --datatable-toolbar-bg: var(--bg-card);

  /* 3 · FilterBar */
  --filterbar-chip-bg: var(--bg-card);
  --filterbar-chip-bg-active: var(--accent-15);
  --filterbar-chip-border: var(--border-default);
  --filterbar-chip-border-active: var(--primary);
  --filterbar-chip-fg: var(--text-primary);
  --filterbar-chip-fg-active: var(--primary);
  --filterbar-chip-radius: 9999px;

  /* 4 · Pagination */
  --pagination-fg: var(--text-secondary);
  --pagination-active-bg: var(--primary);
  --pagination-active-fg: var(--accent);
  --pagination-hover-bg: var(--bg-elevated);

  /* 5 · FileUpload */
  --upload-dropzone-border: var(--border-input);
  --upload-dropzone-border-active: var(--primary);
  --upload-dropzone-border-error: var(--error);
  --upload-dropzone-bg: var(--bg-card);
  --upload-dropzone-bg-active: var(--accent-8);
  --upload-dropzone-bg-error: var(--error-bg);
  --upload-progress-fill: var(--primary);
  --upload-progress-bg: var(--border-subtle);
  --upload-card-bg: var(--bg-elevated);
  --upload-card-success-bg: var(--success-bg);
  --upload-card-error-bg: var(--error-bg);

  /* 6 · DateRangePicker */
  --datepicker-day-bg: transparent;
  --datepicker-day-hover: var(--bg-elevated);
  --datepicker-day-selected-bg: var(--primary);
  --datepicker-day-selected-fg: #fff;
  --datepicker-day-in-range-bg: var(--accent-15);
  --datepicker-day-in-range-fg: var(--primary);
  --datepicker-day-disabled: var(--text-tertiary);
  --datepicker-preset-bg-active: var(--accent-15);
  --datepicker-preset-fg-active: var(--primary);

  /* 7 · BR Inputs */
  --input-mask-placeholder: var(--text-tertiary);
  --input-validate-success: var(--success);
  --input-validate-error: var(--error);
  --input-enrichment-bg: var(--success-bg);
  --input-enrichment-border: rgba(45,165,98,.20);

  /* 9 · KPICard */
  --kpi-card-bg: var(--bg-card);
  --kpi-card-hover: var(--bg-elevated);
  --kpi-icon-bg-primary: var(--accent-15);
  --kpi-icon-fg-primary: var(--primary);
  --kpi-icon-bg-success: var(--success-bg);
  --kpi-icon-fg-success: var(--success);
  --kpi-icon-bg-warning: var(--warning-bg);
  --kpi-icon-fg-warning: #8C5A00;
  --kpi-icon-bg-neutral: var(--bg-elevated);
  --kpi-icon-fg-neutral: var(--text-secondary);
  --kpi-trend-up: var(--success);
  --kpi-trend-down: var(--error);
  --kpi-trend-flat: var(--text-tertiary);

  /* 10 · Chat */
  --chat-bubble-user-bg: var(--primary);
  --chat-bubble-user-fg: #fff;
  --chat-bubble-bot-bg: var(--bg-elevated);
  --chat-bubble-bot-fg: var(--text-primary);
  --chat-bubble-system-fg: var(--text-tertiary);
  --chat-typing-dot: var(--text-tertiary);
  --chat-composer-bg: var(--bg-card);
  --chat-composer-border: var(--border-default);
  --chat-bubble-radius: 16px;

  /* 11 · ActionMenu */
  --actionmenu-bg: var(--bg-card);
  --actionmenu-border: var(--border-default);
  --actionmenu-shadow: var(--shadow-lg);
  --actionmenu-row-hover: var(--bg-elevated);
  --actionmenu-destructive-fg: var(--error);
  --actionmenu-divider: var(--border-subtle);

  /* 12 · StatusTimeline */
  --timeline-line: var(--border-default);
  --timeline-dot-pending: var(--border-input);
  --timeline-dot-current: var(--warning);
  --timeline-dot-done: var(--primary);
  --timeline-dot-success: var(--success);
  --timeline-dot-error: var(--error);
  --timeline-dot-canceled: var(--text-tertiary);

  /* 13 · CommandPalette */
  --command-bg: var(--bg-card);
  --command-overlay: rgba(13,31,20,.55);
  --command-border: var(--border-default);
  --command-shadow: var(--shadow-xl);
  --command-row-hover: var(--bg-elevated);
  --command-row-active: var(--accent-15);
  --command-group-fg: var(--text-tertiary);
  --command-kbd-bg: var(--bg-elevated);
  --command-kbd-border: var(--border-default);

  /* 14 · NotificationCenter */
  --notif-sheet-bg: var(--bg-card);
  --notif-item-hover: var(--bg-elevated);
  --notif-unread-dot: var(--primary);
  --notif-badge-bg: var(--error);
  --notif-badge-fg: #fff;

  /* 15 · Tabs */
  --tabs-primary-fg: var(--text-secondary);
  --tabs-primary-fg-active: var(--primary);
  --tabs-primary-underline: var(--primary);
  --tabs-secondary-bg: transparent;
  --tabs-secondary-bg-active: var(--accent-15);
  --tabs-secondary-fg: var(--text-secondary);
  --tabs-secondary-fg-active: var(--primary);
  --tabs-border: var(--border-subtle);

  /* 16 · CopyButton */
  --copy-default-fg: var(--text-secondary);
  --copy-success-fg: var(--success);

  /* 17 · Stepper */
  --stepper-pending-bg: transparent;
  --stepper-pending-border: var(--border-input);
  --stepper-pending-fg: var(--text-tertiary);
  --stepper-current-bg: var(--primary);
  --stepper-current-fg: var(--accent);
  --stepper-done-bg: var(--success);
  --stepper-done-fg: #fff;
  --stepper-error-bg: var(--error);
  --stepper-error-fg: #fff;
  --stepper-line-pending: var(--border-default);
  --stepper-line-done: var(--primary);

  /* 18 · Tooltip */
  --tooltip-bg: #1A2421;
  --tooltip-fg: #F5F7F5;
  --tooltip-arrow: #1A2421;
  --tooltip-kbd-bg: rgba(255,255,255,.12);
  --tooltip-kbd-fg: #F5F7F5;
}

[data-theme="dark"] {
  --confirm-token-bg: rgba(255,255,255,.04);

  --datatable-row-hover: rgba(255,255,255,.04);
  --datatable-row-selected: rgba(212,244,88,.10);
  --datatable-border: rgba(255,255,255,.08);
  --datatable-sort-active-color: #D4F458;
  --datatable-header-bg: rgba(255,255,255,.03);
  --datatable-toolbar-bg: rgba(255,255,255,.02);

  --filterbar-chip-bg: rgba(255,255,255,.04);
  --filterbar-chip-bg-active: rgba(212,244,88,.14);
  --filterbar-chip-border-active: #D4F458;
  --filterbar-chip-fg-active: #D4F458;

  --pagination-active-bg: #D4F458;
  --pagination-active-fg: #0D1F14;

  --upload-dropzone-border-active: #D4F458;
  --upload-dropzone-bg: rgba(255,255,255,.03);
  --upload-dropzone-bg-active: rgba(212,244,88,.10);
  --upload-progress-fill: #D4F458;
  --upload-card-bg: rgba(255,255,255,.05);

  --datepicker-day-selected-bg: #D4F458;
  --datepicker-day-selected-fg: #0D1F14;
  --datepicker-day-in-range-bg: rgba(212,244,88,.14);
  --datepicker-day-in-range-fg: #D4F458;
  --datepicker-preset-bg-active: rgba(212,244,88,.14);
  --datepicker-preset-fg-active: #D4F458;

  --input-enrichment-bg: rgba(45,165,98,.14);

  --kpi-icon-bg-primary: rgba(212,244,88,.14);
  --kpi-icon-fg-primary: #D4F458;

  --chat-bubble-user-bg: #2D6A4F;
  --chat-bubble-bot-bg: rgba(255,255,255,.06);

  --actionmenu-bg: #14271C;
  --actionmenu-shadow: 0 16px 40px rgba(0,0,0,.55);

  --timeline-dot-done: #74C99E;
  --timeline-dot-current: #FBD37A;

  --command-bg: #14271C;
  --command-overlay: rgba(0,0,0,.65);
  --command-row-active: rgba(212,244,88,.10);
  --command-kbd-bg: rgba(255,255,255,.06);

  --notif-sheet-bg: #14271C;

  --tabs-primary-fg-active: #D4F458;
  --tabs-primary-underline: #D4F458;
  --tabs-secondary-bg-active: rgba(212,244,88,.14);
  --tabs-secondary-fg-active: #D4F458;

  --stepper-current-bg: #D4F458;
  --stepper-current-fg: #0D1F14;
  --stepper-line-done: #74C99E;

  --tooltip-bg: #F5F7F5;
  --tooltip-fg: #1A2421;
  --tooltip-arrow: #F5F7F5;
  --tooltip-kbd-bg: rgba(0,0,0,.10);
  --tooltip-kbd-fg: #1A2421;
}