/* GERADO por scripts/build-landing-css.mjs — NÃO editar à mão.
 * Fonte: nortear-design-system/src/styles/globals.css + landing/landing.css
 * Regerar após mudar tokens/tema/componentes: node scripts/build-landing-css.mjs */

/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */

/* ── docs\shared\tokens\tokens.css ── */
/*
 * ─── Design Tokens — Source of Truth ─────────────────────────────────────────
 * Gerado a partir de docs/shared/tokens/tokens.json
 * Todos os projetos importam este arquivo via @import "@shared/tokens/tokens.css"
 * NÃO edite diretamente — edite tokens.json e regenere.
 */

/* Google Fonts: cada stack faz o hoist em seu próprio globals.css (React/Vue/Svelte)
 * ou via <link> em index.html / preview-head.html (Nortear). Não duplicar aqui —
 * Vite/Lightning CSS reordena e gera warning "must precede all other rules". */

/* ── Motion tokens (durações, easings, reduced-motion) ──────────────────── */

/* ── docs\shared\tokens\motion.css ── */
/*
 * ─── Motion Tokens ────────────────────────────────────────────────────────────
 * Fonte única de durações, easings e offsets para qualquer animação do projeto
 * (CSS ou JS). Importado por tokens.css; chega às 4 stacks via cascade.
 *
 * Regras:
 *  - NUNCA hardcode `300ms` ou `cubic-bezier(0.2,0,0,1)` num componente.
 *    Use `var(--duration-base)`, `var(--ease-standard)`, etc.
 *  - Em JS/TS use o helper `lib/motion.ts` que lê estes tokens via
 *    getComputedStyle, garantindo paridade entre CSS transitions e
 *    animações orquestradas (Motion).
 *  - Acessibilidade: o bloco @media abaixo zera todas as durações quando o
 *    sistema operacional do usuário pede reduced motion (WCAG 2.3.3 / 2.3.1).
 *    Componentes que precisem preservar transição mínima (ex: focus ring)
 *    podem re-declarar com !important localmente, com justificativa.
 *
 * Convenção do número:
 *   Durações em ms (não s) — alinha com a API do Motion `animate(..., { duration })`
 *   que aceita segundos; o helper de stack divide por 1000.
 */

:root {
  /* ── Durações ─────────────────────────────────────────────────────────────
   * Escala approximadamente logarítmica. Pares vizinhos têm razão ~1.6 para o
   * olho perceber a diferença sem que pareça arbitrário.
   */
  --duration-instant:  0ms;
  --duration-fast:     120ms;    /* hover, focus rings, micro-feedback */
  --duration-base:     200ms;    /* default — opacity, transform pequeno */
  --duration-moderate: 320ms;    /* enter/exit de overlays (toast, popover) */
  --duration-slow:     500ms;    /* layout changes, large transforms */
  --duration-stately:  800ms;    /* mudanças de página, full-screen reveal */

  /* ── Easings ──────────────────────────────────────────────────────────────
   * Nomes semânticos. Quando precisar de spring (não cabe em cubic-bezier),
   * use o helper de stack — ele expõe presets `springSnappy`, `springGentle`.
   */
  --ease-linear:   linear;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* default — chega rápido, suaviza */
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1);     /* mais dramático na chegada */
  --ease-entrance: cubic-bezier(0, 0, 0, 1);       /* só easing-out — entrada */
  --ease-exit:     cubic-bezier(0.3, 0, 1, 1);     /* só easing-in — saída */

  /* ── Offsets de deslocamento ──────────────────────────────────────────────
   * Para slides/nudges. Mesma escala dos tokens de spacing (múltiplos de 8 e
   * divisores) para coerência visual com o resto do design system.
   */
  --motion-offset-xs: 0.25rem;   /* 4px  — pulse, shake */
  --motion-offset-sm: 0.5rem;    /* 8px  — toast, tooltip drift */
  --motion-offset-md: 1rem;      /* 16px — drawer pequeno, dropdown */
  --motion-offset-lg: 2rem;      /* 32px — page slide, sheet */
}

/* ── Reduced motion ──────────────────────────────────────────────────────── *
 * Zera durações quando o SO/usuário pede reduced motion. Componentes não
 * precisam fazer nada — herdam automaticamente.
 *
 * Exceções:
 *   - Animações FUNCIONAIS (foco, indicador de carregamento) podem precisar
 *     manter alguma transição mínima. Re-declare local com !important e
 *     comente o motivo.
 *   - Animações de FEEDBACK (toast aparece) podem trocar slide → fade no
 *     reduced-motion. Helper de stack expõe `prefersReducedMotion()` para isso.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant:  0ms;
    --duration-fast:     0ms;
    --duration-base:     0ms;
    --duration-moderate: 0ms;
    --duration-slow:     0ms;
    --duration-stately:  0ms;
  }
}

/* ── Override de Storybook ─────────────────────────────────────────────── *
 * data-reduced-motion="true" no <html> força reduced motion no preview,
 * mesmo em quem não tem a flag de SO ativada. Usado pelo decorator do
 * preview.ts para validar comportamento durante revisão.
 */
[data-reduced-motion="true"],
[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
  animation-duration: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0ms !important;
  scroll-behavior: auto !important;
}
/*
 * ─── Design Tokens — Source of Truth ─────────────────────────────────────────
 * Gerado a partir de docs/shared/tokens/tokens.json
 * Todos os projetos importam este arquivo via @import "@shared/tokens/tokens.css"
 * NÃO edite diretamente — edite tokens.json e regenere.
 */

/* Google Fonts: cada stack faz o hoist em seu próprio globals.css (React/Vue/Svelte)
 * ou via <link> em index.html / preview-head.html (Nortear). Não duplicar aqui —
 * Vite/Lightning CSS reordena e gera warning "must precede all other rules". */

/* ── Motion tokens (durações, easings, reduced-motion) ──────────────────── */


/* ── Light mode (default) ─────────────────────────────────────────────────── */
:root {
  --font-size: 16px;

  /* Typography — font sizes */
  --text-h1: 48px;
  --text-h2: 30px;
  --text-h3: 20px;
  --text-h4: 16px;
  --text-p: 14px;
  --text-label: 12px;

  /* Typography — font family
     --font-family-active é trocado pelas classes .fonte-* no <html>.
     --font-family aponta sempre para o active para que consumidores existentes
     (componentes que usam var(--font-family)) acompanhem a troca. */
  --font-family-active: 'Inter', sans-serif;
  --font-family: var(--font-family-active);

  /* Typography — font weights */
  --font-weight-extra-bold: 800;
  --font-weight-semi-bold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Typography — line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Typography — letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.02em;

  /* Surfaces */
  --background: 0 0% 100%;
  --foreground: 0 0% 4%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 4%;

  /* Brand / Interactive */
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 4%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 40%;
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 9%;

  /* Feedback — cores com contraste WCAG 2.1 AA (≥4.5:1) para texto sobre bg colorido
     E também para text-<color> sobre bg-<color>/10 (soft variants do shadcn radix-nova) */
  --destructive: 0 74% 42%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 85% 22%;
  --success-foreground: 0 0% 100%;
  --warning: 45 95% 36%;
  --warning-foreground: 0 0% 100%;
  --info: 221 83% 43%;
  --info-foreground: 0 0% 100%;

  /* Structure */
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --input-background: 0 0% 100%;
  --ring: 0 0% 45%;
  --ring-offset-width: 2px;
  --ring-offset-color: 0 0% 100%;

  /* Spacing base — consumido pelo Tailwind v4 via @theme inline (--spacing).
     Tailwind calcula p-{n}, gap-{n}, m-{n}, space-{n}, etc. como n × --spacing-base.
     Densidades em themes/densities.css override este valor (condensado/confortável),
     afetando TODOS os espaçamentos proporcionalmente. */
  --spacing-base: 0.25rem; /* 4px — padrão Tailwind */

  /* Spacing scale — grid de 8 (múltiplos ou divisores de 8 apenas).
     Use estes tokens em CSS standalone (.nds-*, basecoat-overrides) quando
     precisar de um valor de spacing nomeado.
     Acompanham a densidade automaticamente porque referenciam --spacing-base.

     Regra do projeto: spacing deve ser múltiplo OU divisor de 8.
     Valores fora do grid (10, 12, 14, 20, 28, 36, 44, 56...) NÃO devem existir
     como tokens — se aparecerem em CSS, são bug a ser corrigido. */
  --spacing-0:   0;
  --spacing-px:  1px;                               /* hairline / border */
  --spacing-0-5: calc(var(--spacing-base) * 0.5);   /* 2px  — divisor de 8 (8÷4) */
  --spacing-1:   calc(var(--spacing-base) * 1);     /* 4px  — divisor de 8 (8÷2) */
  --spacing-2:   calc(var(--spacing-base) * 2);     /* 8px  — base do grid */
  --spacing-4:   calc(var(--spacing-base) * 4);     /* 16px */
  --spacing-6:   calc(var(--spacing-base) * 6);     /* 24px */
  --spacing-8:   calc(var(--spacing-base) * 8);     /* 32px */
  --spacing-10:  calc(var(--spacing-base) * 10);    /* 40px */
  --spacing-12:  calc(var(--spacing-base) * 12);    /* 48px */
  --spacing-14:  calc(var(--spacing-base) * 14);    /* 56px */
  --spacing-16:  calc(var(--spacing-base) * 16);    /* 64px */
  --spacing-20:  calc(var(--spacing-base) * 20);    /* 80px */
  --spacing-24:  calc(var(--spacing-base) * 24);    /* 96px */

  /* Elevation / Shadows */
  --elevation-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  --elevation-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  --elevation-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
  --elevation-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Charts */
  --chart-1: 199 89% 65%;
  --chart-2: 200 100% 50%;
  --chart-3: 201 98% 48%;
  --chart-4: 201 88% 43%;
  --chart-5: 210 71% 23%;

  /* Radius — arquitetura fiel ao shadcn (base-nova/reka-nova/etc.):
     --radius é o tamanho base global. Cada componente consome um token
     específico (--radius-button, --radius-card, etc.) que no tema padrão
     (Default) é igual ao --radius, mas em outros temas pode aplicar
     multiplicadores diferentes (ver docs/shared/themes/<tema>.css).

     Valor base = 0.625rem (10px) bate exatamente com shadcn default. */
  --radius: 0.625rem;              /* 10px — base global */
  --radius-button: var(--radius);  /* Default: 1× */
  --radius-card: calc(var(--radius) * 1.4);   /* Default: 14px */
  --radius-badge: calc(var(--radius) * 2.6);  /* Default: 26px */
  --radius-input: var(--radius);   /* Default: 1× */
  --radius-alert: var(--radius);   /* Default: 1× */

  /* Dimension tokens — altura default de interativos (Button, Input, Select, Toggle, Badge...) */
  /* Nota: Tailwind v4 consome via h-(--height-*) / size-(--size-*) / px-(--spacing-*) */
  --height-badge: 1.25rem;    /* 20px — h-5 (compacto, só para Badge) */
  --height-xs: 1.5rem;        /* 24px — h-6 default */
  --height-sm: 1.75rem;       /* 28px — h-7 */
  --height-default: 2rem;     /* 32px — h-8 */
  --height-lg: 2.25rem;       /* 36px — h-9 */
  --height-xl: 2.5rem;        /* 40px — h-10 */

  --size-xs: 1.5rem;          /* 24px — size-6 */
  --size-sm: 1.75rem;         /* 28px — size-7 */
  --size-default: 2rem;       /* 32px — size-8 */
  --size-lg: 2.25rem;         /* 36px — size-9 */
  --size-xl: 2.5rem;          /* 40px — size-10 */

  --spacing-btn-x: 0.625rem;  /* 10px — px-2.5 default */
  --spacing-btn-x-sm: 0.625rem;
  --spacing-btn-x-lg: 0.625rem;

  /* Stroke (para variantes com borda visível) */
  --border-width-default: 1px;

  /* Transitions */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Sidebar */
  --sidebar: 0 0% 98%;
  --sidebar-foreground: 0 0% 4%;
  --sidebar-primary: 0 0% 9%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 96%;
  --sidebar-accent-foreground: 0 0% 9%;
  --sidebar-border: 0 0% 83%;
  --sidebar-ring: 0 0% 45%;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
.dark {
  --background: 0 0% 9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 70%;
  --accent: 0 0% 15%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 85% 70%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 55%;
  --success-foreground: 0 0% 0%;
  --warning: 48 95% 60%;
  --warning-foreground: 0 0% 0%;
  --info: 221 83% 53%;
  --info-foreground: 0 0% 100%;
  --border: 0 0% 15%;
  --input: 0 0% 15%;
  --input-background: 0 0% 9%;
  --ring: 0 0% 45%;
  --ring-offset-color: 0 0% 9%;
  --elevation-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --elevation-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.3), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
  --elevation-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.3), 0px 4px 6px -2px rgba(0, 0, 0, 0.2);
  --elevation-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.3), 0px 10px 10px -5px rgba(0, 0, 0, 0.1);
  --sidebar: 0 0% 9%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-primary: 0 0% 98%;
  --sidebar-primary-foreground: 0 0% 9%;
  --sidebar-accent: 0 0% 15%;
  --sidebar-accent-foreground: 0 0% 98%;
  --sidebar-border: 0 0% 15%;
  --sidebar-ring: 0 0% 45%;
}/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */


/* ── docs\shared\themes\index.css ── */
/*
 * ─── Temas de Marca ───────────────────────────────────────────────────────────
 * Default é o tema padrão (sem classe). Warm e Cold são variantes de cor;
 * Nortear é o tema de marca (cores + raio + sombra + tipografia).
 *
 * Todos os projetos importam via: @import "@shared/themes/index.css"
 */

/* ── docs\shared\themes\default.css ── */
/*
 * ─── Tema: Default ────────────────────────────────────────────────────────────
 * Referência shadcn: style base. Vibe: moderno, compacto, cantos suaves, densidade média-alta.
 *
 * Radius: base 10px; componentes seguem multiplicadores shadcn:
 *   button: 1×, card: 1.4×, badge: 2.6×, input: 1×, alert: 1×
 *
 * Os valores em :root (tokens.css) refletem Default. Este arquivo RE-DECLARA
 * os mesmos tokens dentro de `.tema-default` para garantir que, ao voltar de
 * `.tema-warm` ou `.tema-cold` no preview do Storybook, o cascade do CSS reverta
 * corretamente (sem essa re-declaração, browsers podem manter estado computado
 * mesmo após a remoção da classe override).
 *
 * Base Color: Neutral · Theme Color: Neutral · Chart Color: Neutral
 */
.tema-default {
  --background: 0 0% 100%;
  --foreground: 0 0% 4%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 4%;

  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 4%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 40%;
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 9%;

  --destructive: 0 74% 42%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 85% 22%;
  --success-foreground: 0 0% 100%;
  --warning: 45 95% 36%;
  --warning-foreground: 0 0% 100%;
  --info: 221 83% 43%;
  --info-foreground: 0 0% 100%;

  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --input-background: 0 0% 100%;
  --ring: 0 0% 45%;
  --ring-offset-color: 0 0% 100%;
}

/* Dark mode — combina `.dark.tema-default` */
.dark.tema-default {
  --background: 0 0% 4%;
  --foreground: 0 0% 98%;
  --card: 0 0% 6%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 6%;
  --popover-foreground: 0 0% 98%;

  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 65%;
  --accent: 0 0% 15%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 85% 70%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 55%;
  --success-foreground: 0 0% 0%;
  --warning: 48 95% 60%;
  --warning-foreground: 0 0% 0%;
  --info: 221 83% 53%;
  --info-foreground: 0 0% 100%;

  --border: 0 0% 15%;
  --input: 0 0% 20%;
  --input-background: 0 0% 8%;
  --ring: 0 0% 70%;
  --ring-offset-color: 0 0% 4%;
}
/*
 * ─── Temas de Marca ───────────────────────────────────────────────────────────
 * Default é o tema padrão (sem classe). Warm e Cold são variantes de cor;
 * Nortear é o tema de marca (cores + raio + sombra + tipografia).
 *
 * Todos os projetos importam via: @import "@shared/themes/index.css"
 */


/* ── docs\shared\themes\warm.css ── */
/*
 * ─── Tema: Warm ───────────────────────────────────────────────────────────────
 * Variante de cores quentes do tema Default.
 *
 * Estratégia:
 *   - Neutros (background, foreground, primary, secondary, muted, accent, border)
 *     ganham tint âmbar/marrom sutil (matiz ~30°, saturação 8–15%) — continuam
 *     "quase cinzas", mas a tela tem temperatura quente.
 *   - Feedback colors (destructive/success/warning/info) deslocam suavemente
 *     para o lado quente do espectro mantendo contraste WCAG AA.
 *   - Charts trocam paleta azul por paleta âmbar/laranja.
 *   - Radius, dimensões e shadows herdam de tokens.css (Default).
 *
 * Aplicado via classe `.tema-warm` no <html>. Dark mode combina com `.dark`.
 */

.tema-warm {
  /* Surfaces — tint âmbar muito sutil */
  --background: 30 25% 99%;
  --foreground: 25 20% 8%;
  --card: 30 25% 99%;
  --card-foreground: 25 20% 8%;
  --popover: 30 25% 99%;
  --popover-foreground: 25 20% 8%;

  /* Brand / Interactive — primary terracota saturado; secondary/accent creme âmbar */
  --primary: 18 75% 35%;            /* terracota / laranja queimado */
  --primary-foreground: 30 30% 98%;
  --secondary: 35 55% 92%;          /* creme âmbar claro */
  --secondary-foreground: 18 60% 22%;
  --muted: 30 20% 95%;
  --muted-foreground: 25 12% 42%;
  --accent: 35 55% 92%;             /* espelha secondary */
  --accent-foreground: 18 60% 22%;

  /* Feedback — paleta quente */
  --destructive: 0 74% 42%;
  --destructive-foreground: 0 0% 100%;
  --success: 130 60% 28%;
  --success-foreground: 0 0% 100%;
  --warning: 28 95% 38%;
  --warning-foreground: 0 0% 100%;
  --info: 24 85% 45%;
  --info-foreground: 0 0% 100%;

  /* Structure */
  --border: 30 15% 88%;
  --input: 30 15% 88%;
  --input-background: 30 25% 99%;
  --ring: 18 75% 45%;               /* alinhado com primary */
  --ring-offset-color: 30 25% 99%;

  /* Charts — paleta âmbar/laranja */
  --chart-1: 32 95% 60%;
  --chart-2: 24 90% 50%;
  --chart-3: 18 85% 45%;
  --chart-4: 36 75% 55%;
  --chart-5: 14 70% 40%;

  /* Sidebar — tint quente */
  --sidebar: 30 25% 98%;
  --sidebar-foreground: 25 20% 8%;
  --sidebar-primary: 18 75% 35%;
  --sidebar-primary-foreground: 30 30% 98%;
  --sidebar-accent: 35 55% 92%;
  --sidebar-accent-foreground: 18 60% 22%;
  --sidebar-border: 30 15% 85%;
  --sidebar-ring: 18 75% 45%;
}

/* Dark mode — combina `.dark.tema-warm` */
.dark.tema-warm {
  --background: 25 15% 9%;
  --foreground: 30 20% 96%;
  --card: 25 15% 9%;
  --card-foreground: 30 20% 96%;
  --popover: 25 15% 9%;
  --popover-foreground: 30 20% 96%;
  --primary: 22 85% 60%;            /* laranja vibrante no dark */
  --primary-foreground: 25 30% 10%;
  --secondary: 25 20% 18%;          /* marrom escuro saturado */
  --secondary-foreground: 35 55% 90%;
  --muted: 25 10% 16%;
  --muted-foreground: 30 12% 70%;
  --accent: 25 20% 18%;
  --accent-foreground: 35 55% 90%;
  --destructive: 0 80% 65%;
  --destructive-foreground: 0 0% 100%;
  --success: 130 60% 55%;
  --success-foreground: 0 0% 0%;
  --warning: 35 92% 55%;
  --warning-foreground: 0 0% 0%;
  --info: 24 85% 58%;
  --info-foreground: 0 0% 100%;
  --border: 25 10% 16%;
  --input: 25 10% 16%;
  --input-background: 25 15% 9%;
  --ring: 22 85% 55%;
  --ring-offset-color: 25 15% 9%;
  --sidebar: 25 15% 9%;
  --sidebar-foreground: 30 20% 96%;
  --sidebar-primary: 22 85% 60%;
  --sidebar-primary-foreground: 25 30% 10%;
  --sidebar-accent: 25 20% 18%;
  --sidebar-accent-foreground: 35 55% 90%;
  --sidebar-border: 25 10% 16%;
  --sidebar-ring: 22 85% 55%;
}
/*
 * ─── Temas de Marca ───────────────────────────────────────────────────────────
 * Default é o tema padrão (sem classe). Warm e Cold são variantes de cor;
 * Nortear é o tema de marca (cores + raio + sombra + tipografia).
 *
 * Todos os projetos importam via: @import "@shared/themes/index.css"
 */



/* ── docs\shared\themes\cold.css ── */
/*
 * ─── Tema: Cold ───────────────────────────────────────────────────────────────
 * Variante de cores frias do tema Default.
 *
 * Estratégia:
 *   - Neutros (background, foreground, primary, secondary, muted, accent, border)
 *     ganham tint azul/cyan sutil (matiz ~210°, saturação 8–15%) — continuam
 *     "quase cinzas", mas a tela tem temperatura fria.
 *   - Feedback colors (destructive/success/warning/info) deslocam suavemente
 *     para o lado frio do espectro mantendo contraste WCAG AA.
 *   - Charts trocam paleta padrão por azul/cyan/teal.
 *   - Radius, dimensões e shadows herdam de tokens.css (Default).
 *
 * Aplicado via classe `.tema-cold` no <html>. Dark mode combina com `.dark`.
 */

.tema-cold {
  /* Surfaces — tint azul muito sutil */
  --background: 210 30% 99%;
  --foreground: 215 25% 8%;
  --card: 210 30% 99%;
  --card-foreground: 215 25% 8%;
  --popover: 210 30% 99%;
  --popover-foreground: 215 25% 8%;

  /* Brand / Interactive — primary azul royal saturado; secondary/accent azul-gelo */
  --primary: 215 80% 38%;           /* azul royal */
  --primary-foreground: 210 30% 98%;
  --secondary: 205 55% 92%;         /* azul-gelo claro */
  --secondary-foreground: 215 70% 25%;
  --muted: 210 20% 95%;
  --muted-foreground: 215 12% 42%;
  --accent: 205 55% 92%;            /* espelha secondary */
  --accent-foreground: 215 70% 25%;

  /* Feedback — paleta fria */
  --destructive: 350 75% 42%;
  --destructive-foreground: 0 0% 100%;
  --success: 165 75% 26%;
  --success-foreground: 0 0% 100%;
  --warning: 200 95% 35%;
  --warning-foreground: 0 0% 100%;
  --info: 215 85% 45%;
  --info-foreground: 0 0% 100%;

  /* Structure */
  --border: 210 18% 88%;
  --input: 210 18% 88%;
  --input-background: 210 30% 99%;
  --ring: 215 80% 48%;              /* alinhado com primary */
  --ring-offset-color: 210 30% 99%;

  /* Charts — paleta azul/cyan/teal */
  --chart-1: 210 90% 60%;
  --chart-2: 195 85% 50%;
  --chart-3: 180 75% 40%;
  --chart-4: 225 80% 55%;
  --chart-5: 240 70% 45%;

  /* Sidebar — tint frio */
  --sidebar: 210 30% 98%;
  --sidebar-foreground: 215 25% 8%;
  --sidebar-primary: 215 80% 38%;
  --sidebar-primary-foreground: 210 30% 98%;
  --sidebar-accent: 205 55% 92%;
  --sidebar-accent-foreground: 215 70% 25%;
  --sidebar-border: 210 18% 85%;
  --sidebar-ring: 215 80% 48%;
}

/* Dark mode — combina `.dark.tema-cold` */
.dark.tema-cold {
  --background: 215 25% 9%;
  --foreground: 210 25% 96%;
  --card: 215 25% 9%;
  --card-foreground: 210 25% 96%;
  --popover: 215 25% 9%;
  --popover-foreground: 210 25% 96%;
  --primary: 210 90% 62%;           /* azul vibrante no dark */
  --primary-foreground: 215 30% 10%;
  --secondary: 215 25% 18%;         /* azul-marinho escuro */
  --secondary-foreground: 205 55% 90%;
  --muted: 215 15% 16%;
  --muted-foreground: 210 12% 70%;
  --accent: 215 25% 18%;
  --accent-foreground: 205 55% 90%;
  --destructive: 350 80% 65%;
  --destructive-foreground: 0 0% 100%;
  --success: 165 70% 50%;
  --success-foreground: 0 0% 0%;
  --warning: 200 92% 55%;
  --warning-foreground: 0 0% 0%;
  --info: 215 85% 60%;
  --info-foreground: 0 0% 100%;
  --border: 215 15% 16%;
  --input: 215 15% 16%;
  --input-background: 215 25% 9%;
  --ring: 210 90% 58%;
  --ring-offset-color: 215 25% 9%;
  --sidebar: 215 25% 9%;
  --sidebar-foreground: 210 25% 96%;
  --sidebar-primary: 210 90% 62%;
  --sidebar-primary-foreground: 215 30% 10%;
  --sidebar-accent: 215 25% 18%;
  --sidebar-accent-foreground: 205 55% 90%;
  --sidebar-border: 215 15% 16%;
  --sidebar-ring: 210 90% 58%;
}
/*
 * ─── Temas de Marca ───────────────────────────────────────────────────────────
 * Default é o tema padrão (sem classe). Warm e Cold são variantes de cor;
 * Nortear é o tema de marca (cores + raio + sombra + tipografia).
 *
 * Todos os projetos importam via: @import "@shared/themes/index.css"
 */




/* ── docs\shared\themes\nortear.css ── */
/*
 * ─── Tema: Nortear ────────────────────────────────────────────────────────────
 * Tema de marca derivado do Nortear Brand Book v1.0
 * (blog sobre Inteligência Artificial e Tecnologia aplicadas ao Design).
 *
 * Diferente de Warm/Cold (que apenas dão tint quente/frio aos neutros do Default),
 * o Nortear é um tema de MARCA completo: redefine cores, raios e sombras.
 *
 * Estratégia:
 *   - Família fria (teal) = "tecnologia, lógica, método" → primary, links, info.
 *   - Família quente (terracota/peach) = "design, criatividade, humano" → accent.
 *   - Neutros warm-white (cream/sand) com texto em ink (near-black teal).
 *   - Sistema near-flat: bordas + preenchimentos tonais fazem o trabalho, não
 *     sombras → --elevation-* discretas; cards rounder (raio 18px de marca).
 *   - Tipografia de marca: Space Grotesk (display) + Sora (texto).
 *
 * Cores de origem (hex do brand book → HSL shadcn):
 *   ink #233037 → 201 22% 18%   ·  teal-deep #3B6770 → 190 31% 34%
 *   teal #3A7C8A → 191 41% 38%  ·  clay #D38F67 → 22 55% 62%
 *   peach #E8A47C → 22 70% 70%  ·  cream #FFFCFA → 30 60% 99%
 *   sand #E5E1DB → 36 16% 88%   ·  fg2 #3A4A52 → 200 17% 27%
 *   fg3 #5C6B70 → 195 10% 40%   ·  fg4 #8A979C → 197 8% 58%
 *   yes #3F8A6B → 155 37% 39%   ·  no #C2533F → 9 52% 50%
 *
 * Aplicado via classe `.tema-nortear` no <html>. Dark mode combina com `.dark`.
 * Os tokens de raio/sombra/fonte ficam no bloco light (`.tema-nortear`) e são
 * herdados pelo dark (que só sobrescreve as cores).
 */

.tema-nortear {
  /* Surfaces — page em cream warm-white, cards em branco limpo p/ destacar */
  --background: 33 40% 99%;
  --foreground: 201 22% 18%;        /* ink */
  --card: 0 0% 100%;
  --card-foreground: 201 22% 18%;
  --popover: 0 0% 100%;
  --popover-foreground: 201 22% 18%;

  /* Brand / Interactive — primary teal (tecnologia); accent terracota (design) */
  --primary: 191 44% 33%;           /* teal aprofundado p/ contraste AA c/ branco */
  --primary-foreground: 30 60% 99%; /* on-dark cream */
  --secondary: 36 30% 93%;          /* sand claro */
  --secondary-foreground: 201 22% 22%;
  --muted: 36 22% 95%;
  --muted-foreground: 195 12% 40%;  /* fg3 */
  --accent: 28 50% 92%;             /* clay soft — hover/realce warm */
  --accent-foreground: 18 45% 30%;  /* clay profundo */

  /* Feedback — derivado dos accents funcionais do brand book (yes/no) */
  --destructive: 9 55% 45%;         /* nt-no aprofundado p/ AA */
  --destructive-foreground: 0 0% 100%;
  --success: 155 40% 30%;           /* nt-yes aprofundado p/ AA */
  --success-foreground: 0 0% 100%;
  --warning: 28 70% 40%;            /* clay/âmbar escuro */
  --warning-foreground: 0 0% 100%;
  --info: 191 50% 36%;              /* teal */
  --info-foreground: 0 0% 100%;

  /* Structure — hairlines warm (nt-line) */
  --border: 33 18% 87%;
  --input: 33 18% 87%;
  --input-background: 0 0% 100%;
  --ring: 191 44% 38%;              /* alinhado com primary */
  --ring-offset-color: 33 40% 99%;

  /* Charts — mistura tech (teal) + design (clay/peach) */
  --chart-1: 191 41% 42%;           /* teal */
  --chart-2: 22 55% 62%;            /* clay */
  --chart-3: 190 31% 34%;           /* teal-deep */
  --chart-4: 22 70% 70%;            /* peach */
  --chart-5: 155 37% 39%;           /* yes */

  /* Sidebar — tint warm-white */
  --sidebar: 33 40% 98%;
  --sidebar-foreground: 201 22% 18%;
  --sidebar-primary: 191 44% 33%;
  --sidebar-primary-foreground: 30 60% 99%;
  --sidebar-accent: 28 50% 92%;
  --sidebar-accent-foreground: 18 45% 30%;
  --sidebar-border: 33 18% 85%;
  --sidebar-ring: 191 44% 38%;

  /* ── Shape — marca é mais arredondada (card 18px) ──────────────────────── */
  --radius: 0.625rem;                          /* 10px — base (radius-sm da marca) */
  --radius-button: var(--radius);              /* 10px */
  --radius-card: 1.125rem;                     /* 18px — raio de card da marca */
  --radius-input: var(--radius);               /* 10px */
  --radius-alert: 1.125rem;                    /* 18px */
  --radius-badge: 999px;                       /* pill — nt-tag da marca */

  /* ── Elevation — sistema near-flat (bordas + fills fazem o trabalho) ────── */
  --elevation-sm: 0 1px 2px 0 rgba(35, 48, 55, 0.06);
  --elevation-md: 0 4px 12px -2px rgba(35, 48, 55, 0.08);
  --elevation-lg: 0 12px 32px -8px rgba(35, 48, 55, 0.10);
  --elevation-xl: 0 18px 48px -10px rgba(35, 48, 55, 0.12);  /* nt-shadow-float */

  /* ── Tipografia de marca ───────────────────────────────────────────────── */
  /* Sora (humanista) p/ texto/UI; Space Grotesk (geométrica) p/ display/labels. */
  --font-family-active: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-family-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}

/* Dark mode — combina `.dark.tema-nortear`.
 * Grounds escuros em ink/teal; texto on-dark cream; accents quentes (peach)
 * ganham brilho. Raio/sombra/fonte herdam do bloco `.tema-nortear` acima. */
.dark.tema-nortear {
  --background: 201 22% 12%;        /* ink profundo */
  --foreground: 30 60% 99%;         /* on-dark cream */
  --card: 200 20% 15%;
  --card-foreground: 30 60% 99%;
  --popover: 200 20% 15%;
  --popover-foreground: 30 60% 99%;

  --primary: 191 48% 50%;           /* teal vibrante no dark */
  --primary-foreground: 201 30% 12%;
  --secondary: 200 18% 22%;
  --secondary-foreground: 30 50% 96%;
  --muted: 200 14% 20%;
  --muted-foreground: 197 12% 68%;  /* fg4 clareado */
  --accent: 200 18% 22%;
  --accent-foreground: 22 65% 75%;  /* peach — accent on dark */

  --destructive: 9 65% 62%;         /* nt-no-soft */
  --destructive-foreground: 0 0% 100%;
  --success: 155 45% 55%;           /* nt-yes-soft */
  --success-foreground: 0 0% 0%;
  --warning: 28 80% 60%;
  --warning-foreground: 0 0% 0%;
  --info: 191 55% 58%;
  --info-foreground: 0 0% 0%;

  --border: 200 14% 22%;            /* nt-line-dark */
  --input: 200 14% 22%;
  --input-background: 200 20% 15%;
  --ring: 191 48% 52%;
  --ring-offset-color: 201 22% 12%;

  --chart-1: 191 50% 58%;
  --chart-2: 22 65% 68%;
  --chart-3: 190 40% 48%;
  --chart-4: 22 75% 76%;
  --chart-5: 155 45% 55%;

  --sidebar: 201 22% 12%;
  --sidebar-foreground: 30 60% 99%;
  --sidebar-primary: 191 48% 50%;
  --sidebar-primary-foreground: 201 30% 12%;
  --sidebar-accent: 200 18% 22%;
  --sidebar-accent-foreground: 22 65% 75%;
  --sidebar-border: 200 14% 22%;
  --sidebar-ring: 191 48% 52%;

  /* Sombras com alpha maior p/ permanecerem perceptíveis sobre grounds escuros */
  --elevation-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --elevation-md: 0 4px 12px -2px rgba(0, 0, 0, 0.36);
  --elevation-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.42);
  --elevation-xl: 0 18px 48px -10px rgba(0, 0, 0, 0.48);
}
/*
 * ─── Temas de Marca ───────────────────────────────────────────────────────────
 * Default é o tema padrão (sem classe). Warm e Cold são variantes de cor;
 * Nortear é o tema de marca (cores + raio + sombra + tipografia).
 *
 * Todos os projetos importam via: @import "@shared/themes/index.css"
 */





/* ── docs\shared\themes\densities.css ── */
/*
 * ─── Densidades ───────────────────────────────────────────────────────────────
 * Ajusta o tamanho base de spacing do projeto, afetando proporcionalmente
 * TODAS as classes Tailwind p-*, m-*, gap-*, space-* (via @theme --spacing).
 *
 * Também ajusta as alturas tokenizadas (--height-*, --size-*) para que
 * botões/inputs/selects acompanhem a densidade.
 *
 * Aplicado via classe no <html>:
 *   default (sem classe)          — --spacing-base = 4px
 *   .densidade-condensado          — --spacing-base ≈ 3.2px (~80%)
 *   .densidade-confortavel         — --spacing-base ≈ 5px   (~125%)
 *
 * Pode combinar com qualquer tema de cor (.tema-warm, .tema-cold) e com .dark.
 */

/* ── Default — re-declara os valores de :root para garantir cascade
 *    correto ao voltar de condensado/confortável. Mesmos números de tokens.css. */
.densidade-default {
  --spacing-base: 0.25rem;         /* 4px */

  --height-badge: 1.25rem;         /* 20px */
  --height-xs: 1.5rem;             /* 24px */
  --height-sm: 1.75rem;            /* 28px */
  --height-default: 2rem;          /* 32px */
  --height-lg: 2.25rem;            /* 36px */
  --height-xl: 2.5rem;             /* 40px */

  --size-xs: 1.5rem;
  --size-sm: 1.75rem;
  --size-default: 2rem;
  --size-lg: 2.25rem;
  --size-xl: 2.5rem;
}

/* ── Condensado — interfaces densas, mais informação na tela ──────────────── */
.densidade-condensado {
  --spacing-base: 0.20rem;        /* 3.2px (80% do padrão) */

  /* Heights/sizes escalonados proporcionalmente */
  --height-badge: 1rem;            /* 16px */
  --height-xs: 1.25rem;            /* 20px */
  --height-sm: 1.5rem;             /* 24px */
  --height-default: 1.75rem;       /* 28px */
  --height-lg: 2rem;               /* 32px */
  --height-xl: 2.25rem;            /* 36px */

  --size-xs: 1.25rem;
  --size-sm: 1.5rem;
  --size-default: 1.75rem;
  --size-lg: 2rem;
  --size-xl: 2.25rem;
}

/* ── Confortável — interfaces folgadas, mais respiro ──────────────────────── */
.densidade-confortavel {
  --spacing-base: 0.3125rem;      /* 5px (125% do padrão) */

  /* Heights/sizes escalonados proporcionalmente */
  --height-badge: 1.5rem;          /* 24px */
  --height-xs: 1.75rem;            /* 28px */
  --height-sm: 2rem;               /* 32px */
  --height-default: 2.5rem;        /* 40px */
  --height-lg: 2.75rem;            /* 44px */
  --height-xl: 3rem;               /* 48px */

  --size-xs: 1.75rem;
  --size-sm: 2rem;
  --size-default: 2.5rem;
  --size-lg: 2.75rem;
  --size-xl: 3rem;
}
/*
 * ─── Temas de Marca ───────────────────────────────────────────────────────────
 * Default é o tema padrão (sem classe). Warm e Cold são variantes de cor;
 * Nortear é o tema de marca (cores + raio + sombra + tipografia).
 *
 * Todos os projetos importam via: @import "@shared/themes/index.css"
 */






/* ── docs\shared\themes\fonts.css ── */
/*
 * ─── Fontes ───────────────────────────────────────────────────────────────────
 * Sobrescreve --font-family-active, que é consumido por --font-family.
 * Os @import das fontes ficam em tokens.css (carregados uma vez).
 *
 * Aplicado via classe no <html>:
 *   default (sem classe)  — Inter (padrão)
 *   .fonte-lexend          — Lexend (humanista, ampla, alta legibilidade)
 *   .fonte-pt-serif        — PT Serif (serifada clássica)
 *   .fonte-lxgw-wenkai     — LXGW WenKai TC (manuscrita tradicional chinesa/latina)
 *
 * Combina com qualquer tema de cor, densidade e light/dark.
 */

/* Default — re-declara para garantir cascade ao voltar de outra fonte */
.fonte-default {
  --font-family-active: 'Inter', sans-serif;
}

.fonte-lexend {
  --font-family-active: 'Lexend', sans-serif;
}

.fonte-pt-serif {
  --font-family-active: 'PT Serif', Georgia, serif;
}

.fonte-lxgw-wenkai {
  --font-family-active: 'LXGW WenKai TC', 'Kaiti', cursive;
}
/*
 * ─── Temas de Marca ───────────────────────────────────────────────────────────
 * Default é o tema padrão (sem classe). Warm e Cold são variantes de cor;
 * Nortear é o tema de marca (cores + raio + sombra + tipografia).
 *
 * Todos os projetos importam via: @import "@shared/themes/index.css"
 */






/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */

/* ── nortear-design-system\src\styles\components\layout.css ── */
/*
 * ─── Layout primitives ───────────────────────────────────────────────────────
 * Pequeno conjunto de classes nomeadas pela INTENÇÃO de layout, cada uma
 * resolvendo um problema único. Consumidores compõem por aninhamento, não
 * por dezenas de utilities por elemento.
 *
 * Inspirado em Every Layout (every-layout.dev), adaptado aos tokens do projeto.
 *
 * Convenções:
 *   - Configuração via data-spacing="xs|sm|md|lg|xl" + custom properties
 *     locais, nunca via class modifier (ex.: NÃO usar .nds-stack-lg)
 *   - Sempre consome --spacing-* (grid 8), nunca px/rem hardcoded
 *   - Sem media queries explícitas — usa clamp/min/max e container-query-like
 *     properties (flex-wrap, auto-fit) para adaptar a qualquer viewport
 */


/* ── nds-page ──────────────────────────────────────────────────────────────
 * Wrapper top-level de qualquer página. Define max-width, padding lateral
 * e ritmo vertical entre seções top-level (via stack interno).
 *
 *   <div class="nds-page">
 *     <header>…</header>
 *     <main>…</main>
 *     <footer>…</footer>
 *   </div>
 *
 * Tokens: --page-max-width, --page-padding-x, --page-gap
 */
.nds-page {
  --page-max-width: 64rem;            /* 1024px — legibilidade ótima */
  --page-padding-x: var(--spacing-4); /* 16px — mobile */
  --page-padding-y: var(--spacing-4); /* 16px — mobile */
  --page-gap: var(--spacing-8);       /* 32px entre filhos diretos */

  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-x);
  padding-block: var(--page-padding-y);

  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
}

/* Em viewports maiores aumenta os paddings progressivamente */
@media (min-width: 40rem) {
  .nds-page {
    --page-padding-x: var(--spacing-6);   /* 24px */
    --page-padding-y: var(--spacing-6);
  }
}
@media (min-width: 64rem) {
  .nds-page {
    --page-padding-x: var(--spacing-8);   /* 32px */
    --page-padding-y: var(--spacing-8);
  }
}

.nds-page[data-width="narrow"]  { --page-max-width: 48rem; }   /* 768px — leitura longa */
.nds-page[data-width="wide"]    { --page-max-width: 80rem; }   /* 1280px — dashboard */
.nds-page[data-width="full"]    { --page-max-width: 100%; }    /* sem limite */


/* ── nds-stack ─────────────────────────────────────────────────────────────
 * Ritmo vertical entre filhos diretos. Usa margin-top em vez de gap porque
 * preserva fluxo natural (filhos position:absolute/sticky são ignorados,
 * primeiro filho não recebe margin).
 *
 *   <div class="nds-stack" data-spacing="md">
 *     <h2>Título</h2>
 *     <p>Conteúdo</p>
 *     <p>Mais conteúdo</p>
 *   </div>
 *
 * Tokens: --stack-gap (override via data-spacing)
 */
.nds-stack {
  --stack-gap: var(--spacing-4);  /* default: 16px */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.nds-stack > * + * {
  margin-top: var(--stack-gap);
}

.nds-stack[data-spacing="xs"]  { --stack-gap: var(--spacing-1);  }  /* 4px  */
.nds-stack[data-spacing="sm"]  { --stack-gap: var(--spacing-2);  }  /* 8px  */
.nds-stack[data-spacing="md"]  { --stack-gap: var(--spacing-4);  }  /* 16px (default) */
.nds-stack[data-spacing="lg"]  { --stack-gap: var(--spacing-6);  }  /* 24px */
.nds-stack[data-spacing="xl"]  { --stack-gap: var(--spacing-8);  }  /* 32px */
.nds-stack[data-spacing="2xl"] { --stack-gap: var(--spacing-12); }  /* 48px */

/* data-recursive="true" aplica o gap a TODOS os descendentes, não só filhos
 * diretos. Útil para prose / artigos longos onde tudo herda o mesmo ritmo. */
.nds-stack[data-recursive="true"] * + * {
  margin-top: var(--stack-gap);
}

/* data-split="N" empurra o N-ésimo filho (1-indexed) para o final via auto.
 * Ex: footer no rodapé de um stack que ocupa altura total.
 *
 *   <div class="nds-stack" data-split="last" style="height: 100%">
 *     <header>…</header>
 *     <main>…</main>
 *     <footer>…</footer>  ← empurrado para baixo
 *   </div>
 */
.nds-stack[data-split="last"] > :last-child { margin-top: auto; }


/* ── nds-cluster ───────────────────────────────────────────────────────────
 * Grupo horizontal de itens que quebra linha quando não cabem. Útil para
 * toolbars, tags, breadcrumbs, grupos de botões.
 *
 *   <div class="nds-cluster" data-spacing="sm" data-align="center">
 *     <Tag>react</Tag>
 *     <Tag>vue</Tag>
 *     <Tag>svelte</Tag>
 *   </div>
 *
 * Tokens: --cluster-gap, --cluster-align, --cluster-justify
 */
.nds-cluster {
  --cluster-gap: var(--spacing-2);     /* default: 8px */
  --cluster-align: center;             /* align-items default */
  --cluster-justify: flex-start;       /* justify-content default */

  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap);
  align-items: var(--cluster-align);
  justify-content: var(--cluster-justify);
}

.nds-cluster[data-spacing="xs"]  { --cluster-gap: var(--spacing-1); }  /* 4px  */
.nds-cluster[data-spacing="sm"]  { --cluster-gap: var(--spacing-2); }  /* 8px  */
.nds-cluster[data-spacing="md"]  { --cluster-gap: var(--spacing-4); }  /* 16px */
.nds-cluster[data-spacing="lg"]  { --cluster-gap: var(--spacing-6); }  /* 24px */
.nds-cluster[data-spacing="xl"]  { --cluster-gap: var(--spacing-8); }  /* 32px */

.nds-cluster[data-align="start"]    { --cluster-align: flex-start; }
.nds-cluster[data-align="center"]   { --cluster-align: center; }
.nds-cluster[data-align="end"]      { --cluster-align: flex-end; }
.nds-cluster[data-align="baseline"] { --cluster-align: baseline; }

.nds-cluster[data-justify="start"]   { --cluster-justify: flex-start; }
.nds-cluster[data-justify="center"]  { --cluster-justify: center; }
.nds-cluster[data-justify="end"]     { --cluster-justify: flex-end; }
.nds-cluster[data-justify="between"] { --cluster-justify: space-between; }


/* ── nds-row ───────────────────────────────────────────────────────────────
 * Linha horizontal SEM wrap. Use quando os itens devem ficar sempre na mesma
 * linha e o conteúdo de um deles deve crescer/encolher (texto wrappando
 * dentro do próprio item).
 *
 *   <div class="nds-row" data-align="start">
 *     <span>1</span>
 *     <p>Texto longo que pode quebrar em várias linhas mas continua à direita do número…</p>
 *   </div>
 *
 * Diferente de .nds-cluster (que quebra linha quando aperta). Use cluster
 * para grupos onde a quebra é desejada (tags, breadcrumbs, toolbar).
 *
 * Filhos com `min-width: 0` evitam que conteúdo "incomprimível" (ex: <code>)
 * force o pai a transbordar — aplicamos `min-width: 0` em todos os filhos
 * por default; o item que precisa ser fixo deve setar `min-width: auto`
 * inline ou via flex-shrink: 0.
 */
.nds-row {
  --row-gap: var(--spacing-2);
  --row-align: flex-start;

  display: flex;
  flex-direction: row;
  gap: var(--row-gap);
  align-items: var(--row-align);
}
.nds-row > * { min-width: 0; }

.nds-row[data-spacing="xs"]  { --row-gap: var(--spacing-1); }
.nds-row[data-spacing="sm"]  { --row-gap: var(--spacing-2); }
.nds-row[data-spacing="md"]  { --row-gap: var(--spacing-4); }
.nds-row[data-spacing="lg"]  { --row-gap: var(--spacing-6); }
.nds-row[data-spacing="xl"]  { --row-gap: var(--spacing-8); }

.nds-row[data-align="start"]    { --row-align: flex-start; }
.nds-row[data-align="center"]   { --row-align: center; }
.nds-row[data-align="end"]      { --row-align: flex-end; }
.nds-row[data-align="baseline"] { --row-align: baseline; }


/* ── nds-grid ──────────────────────────────────────────────────────────────
 * Grid responsivo auto-fit. Cada item tem largura mínima `--grid-min` e
 * cresce até preencher; quantas colunas cabem é calculado pelo navegador.
 * Não usa media query.
 *
 *   <div class="nds-grid" data-min="20rem" data-spacing="md">
 *     <Card />  <Card />  <Card />
 *   </div>
 *
 *   data-cols="2" força no máximo 2 colunas (até a viewport quebrar).
 *
 * Tokens: --grid-gap, --grid-min
 */
.nds-grid {
  --grid-gap: var(--spacing-4);
  --grid-min: 16rem;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr));
  gap: var(--grid-gap);
}

.nds-grid[data-spacing="xs"]  { --grid-gap: var(--spacing-1); }
.nds-grid[data-spacing="sm"]  { --grid-gap: var(--spacing-2); }
.nds-grid[data-spacing="md"]  { --grid-gap: var(--spacing-4); }
.nds-grid[data-spacing="lg"]  { --grid-gap: var(--spacing-6); }
.nds-grid[data-spacing="xl"]  { --grid-gap: var(--spacing-8); }

/* data-cols="2" — duas colunas balanceadas; quebra para 1 quando o conteúdo
 * fica apertado. Equivalente a grid-cols-1 md:grid-cols-2 do Tailwind. */
.nds-grid[data-cols="2"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min), 18rem)), 1fr));
}


/* ── nds-sidebar-layout ────────────────────────────────────────────────────
 * Sidebar + conteúdo principal lado-a-lado. Abaixo de um threshold (definido
 * por --sidebar-min do conteúdo), empilha em uma coluna. Não usa media query
 * — usa flex-wrap + flex-basis para se adaptar ao container.
 *
 *   <div class="nds-sidebar-layout" data-sidebar-sticky="true">
 *     <nav>…</nav>     ← sidebar (largura fixa em desktop)
 *     <main>…</main>   ← conteúdo (cresce e ocupa o resto)
 *   </div>
 *
 * Tokens: --sidebar-gap, --sidebar-width, --sidebar-content-min
 */
.nds-sidebar-layout {
  --sidebar-gap: var(--spacing-8);           /* 32px entre sidebar e conteúdo */
  --sidebar-width: 13rem;                    /* 208px — largura ideal da nav */
  --sidebar-content-min: 60%;                /* conteúdo nunca abaixo disso */

  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap);
  align-items: flex-start;
}

/* Sidebar = primeiro filho. Cresce até a largura definida; sem wrap fica
 * fixa, com wrap (telas estreitas) ocupa 100%. */
.nds-sidebar-layout > :first-child {
  flex-basis: var(--sidebar-width);
  flex-grow: 1;
}

/* Conteúdo = todos os filhos depois do primeiro. flex-grow alto força ele a
 * "puxar" o sidebar pra ficar do lado quando há espaço; o min-width define
 * quando a quebra acontece. */
.nds-sidebar-layout > :first-child ~ * {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min);
}

.nds-sidebar-layout[data-spacing="sm"]  { --sidebar-gap: var(--spacing-4); }
.nds-sidebar-layout[data-spacing="md"]  { --sidebar-gap: var(--spacing-8); }
.nds-sidebar-layout[data-spacing="lg"]  { --sidebar-gap: var(--spacing-12); }
.nds-sidebar-layout[data-spacing="xl"]  { --sidebar-gap: var(--spacing-16); }

.nds-sidebar-layout[data-side="right"] {
  flex-direction: row-reverse;
}
.nds-sidebar-layout[data-side="right"] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min);
}
.nds-sidebar-layout[data-side="right"] > :first-child ~ * {
  flex-basis: var(--sidebar-width);
  flex-grow: 1;
}

/* Sidebar sticky: ativo APENAS quando o layout está lado-a-lado.
 * Quando o flex-wrap empilha (viewport estreito), o sticky precisa ser
 * desligado — senão o nav fica colando no topo do viewport e o conteúdo
 * passa por trás durante o scroll, criando sobreposição visual.
 *
 * O breakpoint coincide aproximadamente com o threshold do flex-wrap:
 * sidebar 13rem + content 60% min ≈ 33rem antes de quebrar; usamos 48rem
 * como margem de segurança. CSS puro não tem como detectar wrap. */
@media (min-width: 48rem) {
  .nds-sidebar-layout[data-sidebar-sticky="true"] > :first-child {
    position: sticky;
    top: var(--spacing-8);                   /* 32px do topo do viewport */
  }
}


/* ── nds-box ───────────────────────────────────────────────────────────────
 * Container com padding interno consistente. Por si só não tem bg/border —
 * use os modificadores data-surface para isso.
 *
 *   <div class="nds-box" data-padding="lg" data-surface="card">…</div>
 *
 * Tokens: --box-padding, --box-radius, --box-bg, --box-border-color
 */
.nds-box {
  --box-padding: var(--spacing-4);     /* default: 16px */
  --box-radius: 0.625rem;              /* 10px */
  --box-bg: transparent;
  --box-border-color: transparent;
  --box-border-width: 0;

  padding: var(--box-padding);
  background-color: var(--box-bg);
  border-radius: var(--box-radius);
  border: var(--box-border-width) solid var(--box-border-color);
}

.nds-box[data-padding="xs"]   { --box-padding: var(--spacing-2);  }  /* 8px */
.nds-box[data-padding="sm"]   { --box-padding: var(--spacing-4);  }  /* 16px */
.nds-box[data-padding="md"]   { --box-padding: var(--spacing-6);  }  /* 24px (default visual) */
.nds-box[data-padding="lg"]   { --box-padding: var(--spacing-8);  }  /* 32px */
.nds-box[data-padding="xl"]   { --box-padding: var(--spacing-12); }  /* 48px */

/* Superfícies — semântica de bg/border via tokens do tema (acompanha
 * light/dark, warm/cold, etc. automaticamente). */
.nds-box[data-surface="card"] {
  --box-bg: hsl(var(--card));
  --box-border-color: hsl(var(--border));
  --box-border-width: 1px;
  color: hsl(var(--card-foreground));
}
.nds-box[data-surface="muted"] {
  --box-bg: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
.nds-box[data-surface="outline"] {
  --box-border-color: hsl(var(--border));
  --box-border-width: 1px;
}
.nds-box[data-surface="accent"] {
  --box-bg: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Quando .nds-box é também um .nds-stack, o stack governa o ritmo dos
 * filhos. Apenas zera o gap horizontal que o flex traria por padrão. */
.nds-box.nds-stack {
  justify-content: flex-start;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */


/* ── nortear-design-system\src\styles\components\typography.css ── */
/*
 * ─── Typography utilities ────────────────────────────────────────────────────
 * Classes nomeadas pelo PAPEL semântico do texto, não pelo tamanho.
 * Usa clamp() para tipografia fluida no h1 — não precisa de media queries.
 *
 * Convenção: .nds-text-<role>   (h1, h2, h3, body, lead, caption, label, code)
 *            .nds-font-<weight> (normal, medium, semibold, bold)
 *            .nds-tracking-<value> (tight, normal, wider)
 *            .nds-leading-<value>  (none, tight, normal, relaxed, loose)
 *
 * Todas consomem tokens de font-family/weight quando aplicável.
 */

/* ── Roles ─────────────────────────────────────────────────────────────────── */
.nds-text-h1 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);  /* 24px → 36px */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.nds-text-h2 {
  font-size: 1.25rem;                       /* 20px */
  line-height: 1.4;
  font-weight: 600;
}
.nds-text-h3 {
  font-size: 1rem;                          /* 16px */
  line-height: 1.5;
  font-weight: 600;
}
.nds-text-h4 {
  font-size: 0.875rem;                      /* 14px */
  line-height: 1.5;
  font-weight: 600;
}
.nds-text-lead {
  font-size: clamp(1rem, 2vw, 1.125rem);    /* 16px → 18px */
  line-height: 1.6;
}
.nds-text-body {
  font-size: 0.875rem;                      /* 14px */
  line-height: 1.5;
}
.nds-text-base {
  font-size: 1rem;                          /* 16px */
  line-height: 1.5;
}
.nds-text-caption {
  font-size: 0.75rem;                       /* 12px */
  line-height: 1.5;
}
.nds-text-label {
  font-size: 0.75rem;                       /* 12px */
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nds-text-code {
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Code", "Roboto Mono", monospace;
  font-size: 0.85em;
}

/* ── Weights ───────────────────────────────────────────────────────────────── */
.nds-font-normal   { font-weight: 400; }
.nds-font-medium   { font-weight: 500; }
.nds-font-semibold { font-weight: 600; }
.nds-font-bold     { font-weight: 700; }
.nds-font-mono     { font-family: ui-monospace, Menlo, Monaco, "Cascadia Code", "Roboto Mono", monospace; }

/* ── Tracking ──────────────────────────────────────────────────────────────── */
.nds-tracking-tight  { letter-spacing: -0.025em; }
.nds-tracking-normal { letter-spacing: 0; }
.nds-tracking-wider  { letter-spacing: 0.05em; }

/* ── Leading ───────────────────────────────────────────────────────────────── */
.nds-leading-none    { line-height: 1; }
.nds-leading-tight   { line-height: 1.25; }
.nds-leading-normal  { line-height: 1.5; }
.nds-leading-relaxed { line-height: 1.625; }
.nds-leading-loose   { line-height: 2; }

/* ── Transforms ────────────────────────────────────────────────────────────── */
.nds-uppercase { text-transform: uppercase; }
.nds-italic    { font-style: italic; }


/* ── Section title — pattern combinado h2 + mb-4 ────────────────────────────
 * Repete em todas as 15 docs sections. */
.nds-section-title {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 var(--spacing-4) 0;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */



/* ── nortear-design-system\src\styles\components\colors.css ── */
/*
 * ─── Semantic color utilities ────────────────────────────────────────────────
 * Classes que consomem tokens semânticos (--foreground, --primary, --success…).
 * Acompanham automaticamente trocas de tema (default/warm/cold) e dark mode.
 *
 * NUNCA use cores Tailwind hardcoded (green-600, red-500/15, etc.) na docs page
 * ou no projeto — elas ignoram o tema ativo. Use os tokens semânticos:
 *   --primary, --secondary, --accent, --destructive, --success, --warning, --info,
 *   --background, --foreground, --card, --muted, --border, --ring
 *
 * Convenção: .nds-text-<token>    (foreground color)
 *            .nds-bg-<token>      (background color)
 *            .nds-bg-<token>-soft (background com opacidade reduzida — soft variant)
 *            .nds-border-<token>  (border color)
 *
 * Modificador /N (ex.: --text-primary com opacidade) usa custom property na
 * própria classe — preferimos classes nomeadas para os usos comuns.
 */

/* ── Foreground colors ─────────────────────────────────────────────────────── */
.nds-text-foreground       { color: hsl(var(--foreground)); }
.nds-text-muted-foreground { color: hsl(var(--muted-foreground)); }
.nds-text-primary          { color: hsl(var(--primary)); }
.nds-text-primary-foreground { color: hsl(var(--primary-foreground)); }
.nds-text-secondary        { color: hsl(var(--secondary)); }
.nds-text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.nds-text-accent           { color: hsl(var(--accent)); }
.nds-text-accent-foreground { color: hsl(var(--accent-foreground)); }
.nds-text-destructive      { color: hsl(var(--destructive)); }
.nds-text-success          { color: hsl(var(--success)); }
.nds-text-warning          { color: hsl(var(--warning)); }
.nds-text-info             { color: hsl(var(--info)); }
.nds-text-card-foreground  { color: hsl(var(--card-foreground)); }
.nds-text-inherit          { color: inherit; }

/* ── Background colors (full) ──────────────────────────────────────────────── */
.nds-bg-background    { background-color: hsl(var(--background)); }
.nds-bg-card          { background-color: hsl(var(--card)); }
.nds-bg-muted         { background-color: hsl(var(--muted)); }
.nds-bg-primary       { background-color: hsl(var(--primary)); }
.nds-bg-secondary     { background-color: hsl(var(--secondary)); }
.nds-bg-accent        { background-color: hsl(var(--accent)); }
.nds-bg-destructive   { background-color: hsl(var(--destructive)); }
.nds-bg-success       { background-color: hsl(var(--success)); }
.nds-bg-warning       { background-color: hsl(var(--warning)); }
.nds-bg-info          { background-color: hsl(var(--info)); }
.nds-bg-transparent   { background-color: transparent; }

/* ── Background colors (soft — 10–15% opacity) ─────────────────────────────── */
.nds-bg-primary-soft     { background-color: hsl(var(--primary) / 0.1); }
.nds-bg-destructive-soft { background-color: hsl(var(--destructive) / 0.1); }
.nds-bg-success-soft     { background-color: hsl(var(--success) / 0.1); }
.nds-bg-warning-soft     { background-color: hsl(var(--warning) / 0.1); }
.nds-bg-info-soft        { background-color: hsl(var(--info) / 0.1); }
.nds-bg-muted-soft       { background-color: hsl(var(--muted) / 0.5); }
.nds-bg-accent-soft      { background-color: hsl(var(--accent) / 0.5); }

/* ── Border colors ─────────────────────────────────────────────────────────── */
.nds-border-default     { border: 1px solid hsl(var(--border)); }
.nds-border-soft        { border: 1px solid hsl(var(--border) / 0.5); }
.nds-border-primary     { border: 1px solid hsl(var(--primary)); }
.nds-border-primary-soft { border: 1px solid hsl(var(--primary) / 0.2); }
.nds-border-success     { border: 1px solid hsl(var(--success)); }
.nds-border-success-soft { border: 1px solid hsl(var(--success) / 0.3); }
.nds-border-destructive { border: 1px solid hsl(var(--destructive)); }
.nds-border-destructive-soft { border: 1px solid hsl(var(--destructive) / 0.3); }
.nds-border-info-soft    { border: 1px solid hsl(var(--info) / 0.3); }
.nds-border-warning-soft { border: 1px solid hsl(var(--warning) / 0.3); }
.nds-border-none        { border: 0; }

/* Border-bottom isolado (divisor inferior) */
.nds-border-b           { border-bottom: 1px solid hsl(var(--border)); }
.nds-border-b-soft      { border-bottom: 1px solid hsl(var(--border) / 0.5); }

/* ── Hover variants (apenas as mais usadas) ────────────────────────────────── */
.nds-hover-bg-muted-faint:hover { background-color: hsl(var(--muted) / 0.05); }  /* zebra suave de table-row */
.nds-hover-bg-muted-soft:hover  { background-color: hsl(var(--muted) / 0.5); }
.nds-hover-bg-accent:hover      { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.nds-hover-underline:hover      { text-decoration: underline; }
.nds-hover-text-foreground:hover { color: hsl(var(--foreground)); }

/* ── Shadow tokens ─────────────────────────────────────────────────────────── */
.nds-shadow-none { box-shadow: none; }
.nds-shadow-sm   { box-shadow: var(--elevation-sm); }
.nds-shadow-md   { box-shadow: var(--elevation-md); }
.nds-shadow-lg   { box-shadow: var(--elevation-lg); }
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */




/* ── nortear-design-system\src\styles\components\pill.css ── */
/*
 * ─── nds-pill ────────────────────────────────────────────────────────────────
 * Pílula circular pequena para indicar status, índice numérico ou check/cross.
 * Padrão repetido em DocsAnatomy (números), DocsDoDont (✓/✗), DocsWhenToUse
 * (✓/✗ em headers e títulos), DocsTestes (nível A/AA).
 *
 *   <span class="nds-pill" data-tone="primary">1</span>
 *   <span class="nds-pill" data-tone="success">✓</span>
 *   <span class="nds-pill" data-tone="destructive">✗</span>
 *
 * Tokens: --pill-size (1.25rem default), --pill-bg, --pill-fg
 */
.nds-pill {
  --pill-size: 1.25rem;                 /* 20px */
  --pill-bg: hsl(var(--muted));
  --pill-fg: hsl(var(--foreground));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pill-size);
  height: var(--pill-size);
  border-radius: 9999px;
  background-color: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.nds-pill[data-tone="primary"] {
  --pill-bg: hsl(var(--primary));
  --pill-fg: hsl(var(--primary-foreground));
}
.nds-pill[data-tone="success"] {
  --pill-bg: hsl(var(--success) / 0.15);
  --pill-fg: hsl(var(--success));
}
.nds-pill[data-tone="destructive"] {
  --pill-bg: hsl(var(--destructive) / 0.15);
  --pill-fg: hsl(var(--destructive));
}
.nds-pill[data-tone="warning"] {
  --pill-bg: hsl(var(--warning) / 0.15);
  --pill-fg: hsl(var(--warning));
}
.nds-pill[data-tone="info"] {
  --pill-bg: hsl(var(--info) / 0.15);
  --pill-fg: hsl(var(--info));
}

.nds-pill[data-size="sm"] { --pill-size: 1rem; font-size: 0.625rem; }
.nds-pill[data-size="lg"] { --pill-size: 1.5rem; font-size: 0.875rem; }
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */





/* ── nortear-design-system\src\styles\components\code.css ── */
/*
 * ─── Code utilities ──────────────────────────────────────────────────────────
 * Para texto monoespaçado: code inline em parágrafo, snippet em bloco, kbd.
 * Tokens: --muted (bg), --foreground (fg), --border (border)
 */

/* Inline code dentro de prose (<p>, <li>, <td>). */
.nds-code-inline {
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Code", "Roboto Mono", monospace;
  font-size: 0.85em;
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 0.25rem;
  padding: 0.1em 0.3em;
  white-space: nowrap;
}

/* Bloco de código standalone — snippet de import/uso, structure code, etc. */
.nds-code-block {
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Code", "Roboto Mono", monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  border-radius: 0.625rem;
  padding: var(--spacing-4);
  overflow-x: auto;
  white-space: pre;
}

/* Variante embedded — sem bg/borda, dentro de outro card.
 * Usado quando o bloco já está dentro de um createCard. */
.nds-code-block-embedded {
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Code", "Roboto Mono", monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */






/* ── nortear-design-system\src\styles\components\utilities.css ── */
/*
 * ─── Misc utilities ──────────────────────────────────────────────────────────
 * Pequeno conjunto de utilities que NÃO se encaixam em layout/typography/
 * colors. Mantidos curtos e específicos — não recriar Tailwind aqui.
 */

/* ── Lists ─────────────────────────────────────────────────────────────────── */
.nds-list-disc {
  list-style: disc;
  padding-left: 1.25rem;                 /* 20px — espaço para o bullet */
}
.nds-list-disc::marker { color: hsl(var(--muted-foreground)); }
.nds-list-disc > li::marker { color: hsl(var(--muted-foreground)); }

.nds-list-none {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* ── Overflow ──────────────────────────────────────────────────────────────── */
.nds-overflow-x { overflow-x: auto; }
.nds-overflow-y { overflow-y: auto; }
.nds-overflow-hidden { overflow: hidden; }

/* ── Whitespace ────────────────────────────────────────────────────────────── */
.nds-whitespace-pre    { white-space: pre; }
.nds-whitespace-nowrap { white-space: nowrap; }
.nds-whitespace-normal { white-space: normal; }

/* ── Sizing ────────────────────────────────────────────────────────────────── */
.nds-w-full   { width: 100%; }
.nds-w-auto   { width: auto; }
.nds-w-xs     { width: 16rem; }                        /* 256px */
.nds-w-sm     { width: 20rem; }                        /* 320px */
.nds-w-md     { width: 24rem; }                        /* 384px */
.nds-w-lg     { width: 32rem; }                        /* 512px */

/* Square sizing (grid 8) — para elementos que precisam de width+height iguais */
.nds-size-4   { width: 1rem;     height: 1rem;    }    /* 16px */
.nds-size-6   { width: 1.5rem;   height: 1.5rem;  }    /* 24px */
.nds-size-8   { width: 2rem;     height: 2rem;    }    /* 32px */
.nds-size-10  { width: 2.5rem;   height: 2.5rem;  }    /* 40px */
.nds-size-12  { width: 3rem;     height: 3rem;    }    /* 48px */
.nds-size-16  { width: 4rem;     height: 4rem;    }    /* 64px */

/* Flexbox spacer — empurra o elemento para o fim do eixo principal do pai
 * (ex: dentro de .nds-cluster, manda o item para a direita).
 * Substitui o padrão "wrap inner cluster + justify-between" quando há
 * apenas um item à direita. */
.nds-spacer-start { margin-inline-start: auto; }
.nds-max-w-xs    { max-width: 20rem; }                 /* 320px */
.nds-max-w-sm    { max-width: 24rem; }                 /* 384px — formulários */
.nds-max-w-md    { max-width: 28rem; }                 /* 448px */
.nds-max-w-lg    { max-width: 32rem; }                 /* 512px */
.nds-max-w-prose { max-width: 48rem; }                 /* leitura confortável */
.nds-max-w-content { max-width: 64rem; }
.nds-min-w-0  { min-width: 0; }
.nds-shrink-0 { flex-shrink: 0; }
.nds-flex-1   { flex: 1 1 0%; }
.nds-flex-auto { flex: 1 1 auto; }

/* ── Table ─────────────────────────────────────────────────────────────────── */
.nds-border-collapse { border-collapse: collapse; }
.nds-border-separate { border-collapse: separate; }

/* Tamanhos de ícone — para SVGs decorativos */
.nds-icon-sm { width: 0.875rem; height: 0.875rem; }   /* 14px */
.nds-icon    { width: 1rem;     height: 1rem;     }   /* 16px */
.nds-icon-lg { width: 1.25rem;  height: 1.25rem;  }   /* 20px */

/* ── Border radius ─────────────────────────────────────────────────────────── */
.nds-rounded-sm   { border-radius: 0.25rem; }
.nds-rounded      { border-radius: 0.375rem; }
.nds-rounded-md   { border-radius: 0.5rem; }
.nds-rounded-lg   { border-radius: 0.625rem; }
.nds-rounded-full { border-radius: 9999px; }

/* ── Visibility / Accessibility ────────────────────────────────────────────── */
.nds-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.nds-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Cursor / pointer ─────────────────────────────────────────────────────── */
.nds-cursor-pointer { cursor: pointer; }
.nds-cursor-default { cursor: default; }

/* ── Display ───────────────────────────────────────────────────────────────── */
.nds-hidden       { display: none; }
.nds-inline-block { display: inline-block; }
.nds-block        { display: block; }

/* ── Divider ───────────────────────────────────────────────────────────────── */
.nds-divider {
  height: 1px;
  width: 100%;
  background-color: hsl(var(--border));
  border: 0;
  margin: 0;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */







/* ── nortear-design-system\src\styles\components\spacing.css ── */
/*
 * ─── Spacing utilities ───────────────────────────────────────────────────────
 * Padding/margin atômicos, restritos ao grid 8 (múltiplos/divisores de 8 apenas).
 * Sempre preferir primitivas (.nds-stack, .nds-cluster, .nds-box) — estas classes
 * só devem ser usadas como complemento pontual.
 *
 * Convenção do número:
 *   0    = 0
 *   0-5  = 2px  (--spacing-0-5)
 *   1    = 4px  (--spacing-1)
 *   2    = 8px  (--spacing-2)
 *   4    = 16px (--spacing-4)
 *   6    = 24px (--spacing-6)
 *   8    = 32px (--spacing-8)
 *
 * Valores fora do grid (3=12, 5=20, 7=28, etc.) NÃO existem como utility.
 * Use a opção mais próxima do grid (3→2 ou 4; 5→4 ou 6).
 */

/* ── Padding (todos os lados) ──────────────────────────────────────────────── */
.nds-p-0    { padding: 0; }
.nds-p-0-5  { padding: var(--spacing-0-5); }
.nds-p-1    { padding: var(--spacing-1); }
.nds-p-2    { padding: var(--spacing-2); }
.nds-p-4    { padding: var(--spacing-4); }
.nds-p-6    { padding: var(--spacing-6); }
.nds-p-8    { padding: var(--spacing-8); }

/* ── Padding inline (px) ───────────────────────────────────────────────────── */
.nds-px-0    { padding-inline: 0; }
.nds-px-0-5  { padding-inline: var(--spacing-0-5); }
.nds-px-1    { padding-inline: var(--spacing-1); }
.nds-px-2    { padding-inline: var(--spacing-2); }
.nds-px-4    { padding-inline: var(--spacing-4); }

/* ── Padding block (py) ────────────────────────────────────────────────────── */
.nds-py-0    { padding-block: 0; }
.nds-py-0-5  { padding-block: var(--spacing-0-5); }
.nds-py-1    { padding-block: var(--spacing-1); }
.nds-py-2    { padding-block: var(--spacing-2); }

/* ── Margin-bottom (mb) ────────────────────────────────────────────────────── */
.nds-mb-0    { margin-bottom: 0; }
.nds-mb-1    { margin-bottom: var(--spacing-1); }
.nds-mb-2    { margin-bottom: var(--spacing-2); }
.nds-mb-4    { margin-bottom: var(--spacing-4); }
.nds-mb-6    { margin-bottom: var(--spacing-6); }
.nds-mb-8    { margin-bottom: var(--spacing-8); }

/* ── Margin-top (mt) ───────────────────────────────────────────────────────── */
.nds-mt-0    { margin-top: 0; }
.nds-mt-0-5  { margin-top: var(--spacing-0-5); }  /* 2px */
.nds-mt-1    { margin-top: var(--spacing-1); }
.nds-mt-2    { margin-top: var(--spacing-2); }
.nds-mt-4    { margin-top: var(--spacing-4); }
.nds-mt-6    { margin-top: var(--spacing-6); }

/* ── Margin (todos) ────────────────────────────────────────────────────────── */
.nds-m-0    { margin: 0; }
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */








/* ── nortear-design-system\src\styles\components\app-shell.css ── */
/*
 * ─── nds-app-shell ───────────────────────────────────────────────────────────
 * Classes semânticas (NÃO utilities) usadas exclusivamente pelo sandbox de
 * desenvolvimento (`src/app.ts`) e pelo editor admin de docs
 * (`src/admin/DocsEditor.ts`). Não são consumidas por stories nem por docs
 * pages — não vazam para o produto final do design system.
 *
 * Princípio: cada elemento da shell recebe 1–3 classes. Estados são expostos
 * via atributos `data-active`, `data-dirty`, etc. (não classes condicionais).
 *
 * Tokens: --background, --foreground, --border, --sidebar, --muted, --primary,
 *         --destructive, --warning, --spacing-*, --radius
 */


/* ── App shell (sandbox) ────────────────────────────────────────────────── */

.nds-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-family);
}

.nds-app-main {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: hidden;
}

.nds-app-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 3.5rem;                         /* 56px — alinhado ao header da sidebar */
  padding-inline: var(--spacing-4);
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
}

.nds-app-header-title {
  flex: 1 1 auto;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.nds-app-content {
  flex: 1 1 0%;
  overflow-y: auto;
}


/* ── Sidebar ────────────────────────────────────────────────────────────── */

.nds-app-sidebar {
  display: flex;
  flex-direction: column;
  width: 16rem;                           /* 256px */
  border-right: 1px solid hsl(var(--border));
  background-color: hsl(var(--sidebar));
  color: hsl(var(--sidebar-foreground));
}

.nds-app-sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 3.5rem;
  padding-inline: var(--spacing-4);
  border-bottom: 1px solid hsl(var(--border));
  font-weight: var(--font-weight-semi-bold, 600);
}

.nds-app-sidebar-logo {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  background-color: hsl(var(--primary));
}

.nds-app-sidebar-tag {
  margin-left: auto;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

.nds-app-sidebar-nav {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.nds-app-nav-group-title {
  margin: 0 0 var(--spacing-1);
  padding-inline: var(--spacing-2);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semi-bold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
}

.nds-app-nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-1) var(--spacing-2);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius, 0.375rem);
  color: hsl(var(--sidebar-foreground));
  cursor: pointer;
  transition: background-color 150ms;
}

.nds-app-nav-item:hover {
  background-color: hsl(var(--sidebar-accent) / 0.5);
}

.nds-app-nav-item[data-active="true"] {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
  font-weight: var(--font-weight-medium, 500);
}


/* ── Home page (sandbox) ────────────────────────────────────────────────── */

.nds-app-home {
  max-width: 42rem;
  padding: var(--spacing-8);
}

.nds-app-home-title {
  margin: 0 0 var(--spacing-2);
  font-size: 1.875rem;
  font-weight: var(--font-weight-extra-bold, 800);
  letter-spacing: var(--letter-spacing-tight, -0.02em);
}

.nds-app-home-lead {
  margin: 0 0 var(--spacing-6);
  color: hsl(var(--muted-foreground));
}

.nds-app-home-link {
  color: inherit;
  text-decoration: underline;
}
.nds-app-home-link:hover {
  color: hsl(var(--foreground));
}

.nds-app-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--spacing-2);
}

.nds-app-home-card {
  display: block;
  width: 100%;
  padding: var(--spacing-4);
  text-align: left;
  font: inherit;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  color: inherit;
  cursor: pointer;
  transition: background-color 150ms;
}
.nds-app-home-card:hover {
  background-color: hsl(var(--muted) / 0.5);
}
.nds-app-home-card-title {
  margin: 0 0 var(--spacing-0-5);
  font-weight: var(--font-weight-medium, 500);
}
.nds-app-home-card-desc {
  margin: 0;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}


/* ── Loading spinner ────────────────────────────────────────────────────── */

.nds-app-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16rem;
}

.nds-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid hsl(var(--primary));
  border-top-color: transparent;
  border-radius: 9999px;
  animation: nds-spin 1s linear infinite;
}
.nds-spinner[data-size="sm"] { width: 1.25rem; height: 1.25rem; }

@keyframes nds-spin {
  to { transform: rotate(360deg); }
}


/* ── Locale switcher (sandbox header) ───────────────────────────────────── */

.nds-app-locale-switcher {
  display: flex;
  gap: var(--spacing-1);
}

.nds-app-locale-btn {
  padding: var(--spacing-1) var(--spacing-2);
  font: inherit;
  font-size: 0.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius, 0.375rem);
  color: inherit;
  cursor: pointer;
  transition: background-color 150ms;
}
.nds-app-locale-btn:hover {
  background-color: hsl(var(--muted));
}
.nds-app-locale-btn[data-active="true"] {
  font-weight: var(--font-weight-extra-bold, 800);
}


/* ── Icon button (header/toolbar action) ────────────────────────────────── */

.nds-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;                      /* 6px — alinha o glyph dentro do hit-area */
  font: inherit;
  font-size: 1rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius, 0.375rem);
  color: inherit;
  cursor: pointer;
  transition: background-color 150ms;
}
.nds-icon-button:hover {
  background-color: hsl(var(--muted));
}


/* ── Admin editor ───────────────────────────────────────────────────────── */

.nds-admin {
  display: flex;
  height: 100vh;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-family);
}

.nds-admin-sidebar {
  display: flex;
  flex-direction: column;
  width: 14rem;                           /* 224px */
  flex-shrink: 0;
  border-right: 1px solid hsl(var(--border));
}

.nds-admin-sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 3.5rem;
  padding-inline: var(--spacing-4);
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.875rem;
  font-weight: var(--font-weight-semi-bold, 600);
}

.nds-admin-dirty-dot {
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: hsl(var(--warning));
}

.nds-admin-component-list {
  flex: 1 1 0%;
  overflow-y: auto;
  padding-block: var(--spacing-2);
}

.nds-admin-component-list-empty {
  margin: 0;
  padding-inline: var(--spacing-4);
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.nds-admin-comp-btn {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  background: transparent;
  border: 0;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
.nds-admin-comp-btn:hover {
  background-color: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
}
.nds-admin-comp-btn[data-active="true"] {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-weight: var(--font-weight-medium, 500);
}

.nds-admin-locale-switcher {
  display: flex;
  gap: var(--spacing-1);
  padding: var(--spacing-2);
  border-top: 1px solid hsl(var(--border));
}

.nds-admin-locale-btn {
  flex: 1 1 0%;
  padding-block: var(--spacing-1);
  font: inherit;
  font-size: 0.75rem;
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
.nds-admin-locale-btn:hover {
  background-color: hsl(var(--muted) / 0.8);
}
.nds-admin-locale-btn[data-active="true"] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.nds-admin-main {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: hidden;
}

.nds-admin-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 3.5rem;
  padding-inline: var(--spacing-6);
  border-bottom: 1px solid hsl(var(--border));
}

.nds-admin-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--font-weight-semi-bold, 600);
}

.nds-admin-locale-label,
.nds-admin-dirty-label,
.nds-admin-shortcut-hint {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.nds-admin-dirty-label {
  color: hsl(var(--warning));
}

.nds-admin-error {
  font-size: 0.75rem;
  color: hsl(var(--destructive));
}

.nds-admin-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-left: auto;
}

.nds-admin-save-btn {
  padding: 0.375rem var(--spacing-4);
  font: inherit;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 0;
  border-radius: var(--radius, 0.375rem);
  cursor: pointer;
  transition: opacity 150ms;
}
.nds-admin-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nds-admin-fields {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: var(--spacing-6);
}

.nds-admin-fields-wrapper {
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}


/* ── Admin form fields ──────────────────────────────────────────────────── */

.nds-admin-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.nds-admin-field-label {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium, 500);
  color: hsl(var(--muted-foreground));
}

.nds-admin-field-input {
  width: 100%;
  padding: 0.375rem var(--spacing-2);
  font: inherit;
  font-size: 0.875rem;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.375rem);
}
.nds-admin-field-input:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: -1px;
}

.nds-admin-field-editor {
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.375rem);
}
.nds-admin-field-editor .ql-editor {
  min-height: 5rem;
  color: hsl(var(--foreground));
}

.nds-admin-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
.nds-admin-field-group[data-nested="true"] {
  padding-left: var(--spacing-4);
  border-left: 1px solid hsl(var(--border));
}

.nds-admin-field-group-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semi-bold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
}


/* ── Utility: hidden helper for app/admin (already in utilities.css as
 *    .nds-hidden — reused here) */
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */









/* ── nortear-design-system\src\styles\components\button.css ── */
/*
 * ─── nds-button ───────────────────────────────────────────────────────────────
 * Componente standalone — zero dependência de Tailwind ou basecoat-css.
 * Consome apenas custom properties já definidas em tokens.css + themes/*.css.
 *
 * A11Y — WCAG 1.4.4 (Resize Text 200%):
 * Sem `height` fixo. Altura final é resultado de padding-block + line-height,
 * de modo que o button cresça proporcionalmente ao tamanho de fonte do navegador
 * (ex: zoom textual, settings → font size). NUNCA reintroduzir `height` nem
 * `min-height` em pixels fixos.
 *
 * Tokens de cor: --primary, --primary-foreground, --secondary, --secondary-foreground,
 *                --accent, --accent-foreground, --destructive, --destructive-foreground,
 *                --background, --foreground, --input, --ring, --border
 * Tokens de spacing: --spacing-* (grid 8: múltiplos/divisores de 8 apenas)
 * Tokens de raio: --radius-button
 * Tokens de tipografia: --font-family
 *
 * Variantes: default (primary), secondary, outline, ghost, link, destructive
 * Tamanhos: sm, default (padrão), lg + icon-only equivalentes
 *
 * Estados: :hover, :focus-visible, :disabled, [aria-pressed="true"], [aria-invalid="true"]
 * Dark: .dark .nds-button-* (combina via cascade)
 */

/* ── Base (todas as variantes e tamanhos compartilham) ─────────────────────── */
.nds-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding-inline: var(--spacing-4);
  padding-block: var(--spacing-2);
  border: 0 solid transparent;
  border-radius: var(--radius-button, 0.625rem);
  background: transparent;
  color: inherit;
  font-family: var(--font-family, inherit);
  font-size: 0.875rem;                          /* 14px — text-sm */
  line-height: 1.25;                            /* unitless — escala com font-size */
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast), opacity var(--duration-fast);
  -webkit-user-select: none;
  user-select: none;
}

/* SVG children — usam classes específicas para garantir tamanho mesmo quando
 * o componente é renderizado em contextos com cascade hostil (ex: emotion-css
 * do Storybook). Dimensões em rem (escalam com font-size do <html>) e não em
 * em (que dependeria do font-size do button, vulnerável a sobrescrita). */
.nds-button > svg,
.nds-button-icon-svg {
  pointer-events: none;
  flex-shrink: 0;
  width: 1rem;                                  /* 16px — default */
  height: 1rem;
}
.nds-button-icon-svg-sm { width: 0.875rem; height: 0.875rem; } /* 14px */
.nds-button-icon-svg-md { width: 1rem;     height: 1rem;     } /* 16px (default explícito) */
.nds-button-icon-svg-lg { width: 1.25rem;  height: 1.25rem;  } /* 20px */

/* Quando o button tem ícone (qualquer SVG filho direto), reduz padding lateral */
.nds-button:has(> svg) {
  padding-inline: var(--spacing-2);
}

/* ── Estados ───────────────────────────────────────────────────────────────── */
.nds-button:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 5px hsl(var(--ring) / 0.5);
}
.nds-button:disabled,
.nds-button[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}
.nds-button[aria-invalid="true"] {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 5px hsl(var(--destructive) / 0.4);
}

/* ── Tamanhos ──────────────────────────────────────────────────────────────────
 * Diferenciados por font-size + padding-block (não por height).
 * Texto e altura crescem juntos quando o usuário aumenta o tamanho da fonte. */
/* Escala vertical (grid 8 estrito — múltiplos/divisores de 8):
 *   sm:      padding-block 4 + 12×1.25 = ~23px
 *   default: padding-block 8 + 14×1.25 = ~33.5px
 *   lg:      padding-block 8 + 16×1.25 = ~36px
 *
 * lg diferencia de default pelo font-size (16 vs 14). sm reduz padding + font. */
.nds-button-sm {
  gap: var(--spacing-2);
  padding-inline: var(--spacing-4);
  padding-block: var(--spacing-1);
  font-size: 0.75rem;                           /* 12px */
}
.nds-button-sm:has(> svg) {
  padding-inline: var(--spacing-2);
}
.nds-button-lg {
  gap: var(--spacing-2);
  padding-inline: var(--spacing-6);
  padding-block: var(--spacing-2);
  font-size: 1rem;                              /* 16px */
}
.nds-button-lg:has(> svg) {
  padding-inline: var(--spacing-4);
}

/* Icon-only (quadrado) — sem texto. width/height explícitos em rem garantem
 * tamanho previsível em qualquer contexto (não dependem de font-size do
 * componente nem de cascade externa). Como não há texto, height fixo aqui
 * não viola a regra WCAG 1.4.4 — não existe texto a ser cortado.
 * O ícone interno escala via classes .nds-button-icon-svg-* aplicadas pela
 * factory, independentes do font-size do botão. */
.nds-button-icon,
.nds-button-icon-sm,
.nds-button-icon-lg {
  padding: 0;
}
.nds-button-icon-sm {
  width: 2rem;                                  /* 32px */
  height: 2rem;
}
.nds-button-icon {
  width: 2.25rem;                               /* 36px */
  height: 2.25rem;
}
.nds-button-icon-lg {
  width: 2.5rem;                                /* 40px */
  height: 2.5rem;
}

/* ── Variantes ─────────────────────────────────────────────────────────────── */

/* Default = primary (filled) */
.nds-button-default {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.nds-button-default:hover {
  background-color: hsl(var(--primary) / 0.9);
}
.nds-button-default[aria-pressed="true"] {
  background-color: hsl(var(--primary) / 0.9);
}

/* Secondary */
.nds-button-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.nds-button-secondary:hover,
.nds-button-secondary[aria-pressed="true"] {
  background-color: hsl(var(--secondary) / 0.8);
}

/* Outline */
.nds-button-outline {
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.nds-button-outline:hover,
.nds-button-outline[aria-pressed="true"] {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.dark .nds-button-outline {
  border-color: hsl(var(--input));
  background-color: hsl(var(--input) / 0.3);
}
.dark .nds-button-outline:hover,
.dark .nds-button-outline[aria-pressed="true"] {
  background-color: hsl(var(--accent) / 0.5);
}

/* Ghost */
.nds-button-ghost {
  color: hsl(var(--foreground));
}
.nds-button-ghost:hover,
.nds-button-ghost[aria-pressed="true"] {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.dark .nds-button-ghost:hover,
.dark .nds-button-ghost[aria-pressed="true"] {
  background-color: hsl(var(--accent) / 0.5);
}

/* Link */
.nds-button-link {
  padding: 0;
  background: transparent;
  color: hsl(var(--primary));
  text-underline-offset: 4px;
}
.nds-button-link:hover,
.nds-button-link[aria-pressed="true"] {
  text-decoration: underline;
}

/* Destructive (soft style, alinhada ao restante do projeto) */
.nds-button-destructive {
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.nds-button-destructive:hover,
.nds-button-destructive[aria-pressed="true"] {
  background-color: hsl(var(--destructive) / 0.15);
}
.nds-button-destructive:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 5px hsl(var(--destructive) / 0.4);
}
.dark .nds-button-destructive {
  background-color: hsl(var(--destructive) / 0.15);
}
.dark .nds-button-destructive:hover {
  background-color: hsl(var(--destructive) / 0.25);
}

/* ── Spin (loading) ─────────────────────────────────────────────────────────── */
@keyframes nds-spin {
  to { transform: rotate(360deg); }
}
.nds-spin {
  animation: nds-spin 1s linear infinite;
}

/* ── Animação reduzida ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nds-button {
    transition: none;
  }
  .nds-spin {
    animation: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */










/* ── nortear-design-system\src\styles\components\alert.css ── */
/*
 * ─── nds-alert ───────────────────────────────────────────────────────────────
 * Componente standalone — zero dependência de Tailwind ou basecoat-css.
 *
 * Estrutura:
 *   <div class="nds-alert" role="alert">
 *     <svg>...</svg>             ← opcional, vai pra coluna 1
 *     <h5 class="nds-alert-title">Title</h5>
 *     <section class="nds-alert-description"><p>Descrição…</p></section>
 *   </div>
 *
 * Variantes:
 *   .nds-alert                  → default (bg-card, fg-card-foreground)
 *   .nds-alert.nds-alert-destructive → vermelho (texto destructive)
 *
 * Tokens: --card, --card-foreground, --destructive, --muted-foreground,
 *         --border, --radius-alert, --spacing-*
 */

.nds-alert {
  --alert-bg: hsl(var(--card));
  --alert-fg: hsl(var(--card-foreground));
  --alert-border: hsl(var(--border));

  position: relative;
  display: grid;
  grid-template-columns: 0 1fr;
  align-items: flex-start;
  row-gap: var(--spacing-0-5);                  /* 2px */
  column-gap: 0;

  width: 100%;
  border: 1px solid var(--alert-border);
  border-radius: var(--radius-alert, 0.625rem);
  padding-inline: var(--spacing-4);             /* 16px */
  padding-block: var(--spacing-2);              /* 8px */

  background-color: var(--alert-bg);
  color: var(--alert-fg);
  font-size: 0.875rem;                          /* 14px — text-sm */
  line-height: 1.5;
}

/* Quando há ícone svg como filho, abre coluna pro ícone */
.nds-alert:has(> svg) {
  grid-template-columns: var(--spacing-4) 1fr;
  column-gap: var(--spacing-2);                 /* 8px */
}

.nds-alert > svg {
  width: var(--spacing-4);                      /* 16px */
  height: var(--spacing-4);
  color: currentColor;
  translate: 0 var(--spacing-0-5);              /* alinha visualmente com 1ª linha do título */
}

/* Título — h1-h6 ou strong ou [data-title] */
.nds-alert-title,
.nds-alert > h1,
.nds-alert > h2,
.nds-alert > h3,
.nds-alert > h4,
.nds-alert > h5,
.nds-alert > h6,
.nds-alert > strong,
.nds-alert > [data-title] {
  grid-column-start: 2;
  min-height: var(--spacing-4);
  margin: 0;
  font-size: inherit;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* Descrição — section nativa (preserva semântica do basecoat-css upstream).
 * Display grid para empilhar parágrafos com gap consistente. */
.nds-alert-description,
.nds-alert > section {
  grid-column-start: 2;
  display: grid;
  gap: var(--spacing-1);                        /* 4px entre <p> */
  justify-items: start;
  font-size: inherit;
  color: hsl(var(--muted-foreground));
}
.nds-alert-description > p,
.nds-alert > section > p {
  margin: 0;
  line-height: 1.625;
}
.nds-alert-description ul,
.nds-alert > section ul {
  list-style: disc inside;
  font-size: inherit;
  margin: 0;
  padding: 0;
}

/* ── Variantes semânticas ──────────────────────────────────────────────────── *
 * Regra WCAG 2.1 AA (contraste 4.5:1):
 *   - Container colorido: bg-soft + border-soft com tons da cor semântica
 *   - Ícone e título: podem usar a cor semântica (são curtos, contraste 3:1 ok)
 *   - Texto corrido (description): SEMPRE --foreground para garantir 4.5:1
 * ────────────────────────────────────────────────────────────────────────── */

/* destructive — vermelho com bg soft */
.nds-alert-destructive {
  --alert-bg: hsl(var(--destructive) / 0.1);
  --alert-fg: hsl(var(--destructive));
  --alert-border: hsl(var(--destructive) / 0.3);
}

/* success — verde com bg soft */
.nds-alert-success {
  --alert-bg: hsl(var(--success) / 0.1);
  --alert-fg: hsl(var(--success));
  --alert-border: hsl(var(--success) / 0.3);
}

/* warning — âmbar com bg soft */
.nds-alert-warning {
  --alert-bg: hsl(var(--warning) / 0.1);
  --alert-fg: hsl(var(--warning));
  --alert-border: hsl(var(--warning) / 0.3);
}
/* Em warning, a cor âmbar não atinge 4.5:1 sobre bg-soft.
   Título usa --foreground; o ícone (curto, 3:1) mantém --alert-fg. */
.nds-alert-warning .nds-alert-title,
.nds-alert-warning > h1,
.nds-alert-warning > h2,
.nds-alert-warning > h3,
.nds-alert-warning > h4,
.nds-alert-warning > h5,
.nds-alert-warning > h6 {
  color: hsl(var(--foreground));
}

/* info — azul com bg soft */
.nds-alert-info {
  --alert-bg: hsl(var(--info) / 0.1);
  --alert-fg: hsl(var(--info));
  --alert-border: hsl(var(--info) / 0.3);
}

/* Descrição em qualquer variante semântica → sempre foreground.
   Garante contraste WCAG AA (4.5:1) no texto longo, mesmo sobre bg colorido. */
.nds-alert-destructive .nds-alert-description,
.nds-alert-destructive > section,
.nds-alert-success .nds-alert-description,
.nds-alert-success > section,
.nds-alert-warning .nds-alert-description,
.nds-alert-warning > section,
.nds-alert-info .nds-alert-description,
.nds-alert-info > section {
  color: hsl(var(--foreground));
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */











/* ── nortear-design-system\src\styles\components\badge.css ── */
/*
 * ─── nds-badge ───────────────────────────────────────────────────────────────
 * Componente standalone — zero dependência de Tailwind ou basecoat-css.
 * Etiqueta inline pequena para status, contagem ou tag.
 *
 *   <span class="nds-badge nds-badge-secondary">5</span>
 *
 * Variantes: default (primary), secondary, destructive, outline
 *
 * Acessibilidade: badge não tem semântica nativa. Use texto descritivo
 * ou aria-label se conteúdo for crítico (ex.: "5 mensagens não lidas").
 *
 * Tokens: --primary, --secondary, --destructive, --foreground, --background,
 *         --border, --ring, --accent, --spacing-*
 */

.nds-badge {
  --badge-bg: transparent;
  --badge-fg: hsl(var(--foreground));
  --badge-border: transparent;

  display: inline-flex;
  width: fit-content;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);                        /* 4px */
  overflow: hidden;

  border: 1px solid var(--badge-border);
  border-radius: 9999px;
  padding-inline: var(--spacing-2);             /* 8px */
  padding-block: var(--spacing-0-5);            /* 2px */

  background-color: var(--badge-bg);
  color: var(--badge-fg);
  font-family: var(--font-family, inherit);
  font-size: 0.75rem;                           /* 12px — text-xs */
  line-height: 1.5;
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-badge > svg {
  pointer-events: none;
  width: 0.75rem;                               /* 12px — fora do grid 8, padrão visual de badge */
  height: 0.75rem;
  flex-shrink: 0;
}

/* ── Estados ───────────────────────────────────────────────────────────────── */
.nds-badge:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 5px hsl(var(--ring) / 0.5);
}
.nds-badge[aria-invalid="true"] {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 5px hsl(var(--destructive) / 0.4);
}

/* ── Variantes ─────────────────────────────────────────────────────────────── */

/* Default = primary (filled) */
.nds-badge,
.nds-badge-default,
.nds-badge-primary {
  --badge-bg: hsl(var(--primary));
  --badge-fg: hsl(var(--primary-foreground));
  --badge-border: transparent;
}

/* Secondary */
.nds-badge-secondary {
  --badge-bg: hsl(var(--secondary));
  --badge-fg: hsl(var(--secondary-foreground));
  --badge-border: transparent;
}

/* Destructive (soft style alinhado ao restante do projeto)
 * WCAG: bg colorido + border colorida + texto foreground (contraste 4.5:1). */
.nds-badge-destructive {
  --badge-bg: hsl(var(--destructive) / 0.1);
  --badge-fg: hsl(var(--foreground));
  --badge-border: hsl(var(--destructive) / 0.3);
}
.dark .nds-badge-destructive {
  --badge-bg: hsl(var(--destructive) / 0.15);
}
.nds-badge-destructive:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 5px hsl(var(--destructive) / 0.4);
}

/* Outline */
.nds-badge-outline {
  --badge-bg: transparent;
  --badge-fg: hsl(var(--foreground));
  --badge-border: hsl(var(--border));
}

/* ── Prioridade (usado em DocsTestes — tabelas funcional/visual) ──────────────
 * WCAG: bg/border sinalizam a cor; texto sempre --foreground (contraste 4.5:1). */
.nds-badge-high {
  --badge-bg: hsl(var(--destructive) / 0.12);
  --badge-fg: hsl(var(--foreground));
  --badge-border: hsl(var(--destructive) / 0.35);
}
.nds-badge-medium {
  --badge-bg: hsl(var(--warning) / 0.15);
  --badge-fg: hsl(var(--foreground));
  --badge-border: hsl(var(--warning) / 0.4);
}
.nds-badge-low {
  --badge-bg: hsl(var(--success) / 0.12);
  --badge-fg: hsl(var(--foreground));
  --badge-border: hsl(var(--success) / 0.35);
}

/* Hover em link wrapping badge */
a > .nds-badge:hover,
a.nds-badge:hover {
  filter: brightness(0.95);
}

/* ── prefers-reduced-motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nds-badge { transition: none; }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */












/* ── nortear-design-system\src\styles\components\kbd.css ── */
/*
 * ─── nds-kbd ─────────────────────────────────────────────────────────────────
 * Tecla de teclado física. Usado para atalhos, ícones de comando (⌘ ⇧ ⌥ ⌃),
 * teclas (Ctrl, Enter, Esc, ↑↓←→) e níveis WCAG (A, AA, AAA) em docs pages.
 *
 *   <kbd class="nds-kbd">Ctrl</kbd>
 *
 *   <kbd class="nds-kbd-group">
 *     <kbd class="nds-kbd">Ctrl</kbd>
 *     <span>+</span>
 *     <kbd class="nds-kbd">B</kbd>
 *   </kbd>
 *
 * Visual: bg muted, border + shadow para dar profundidade de tecla.
 * Tokens: --background, --foreground, --muted, --border, --spacing-*
 */

.nds-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 1.5rem;                    /* 24px — largura mínima de tecla */
  padding-inline: var(--spacing-1-5, 0.375rem);
  padding-block: var(--spacing-0-5);    /* 2px */

  font-family: ui-monospace, Menlo, Monaco, "Cascadia Code", "Roboto Mono", monospace;
  font-size: 0.6875rem;                 /* 11px — text-[11px] */
  font-weight: 600;
  line-height: 1;
  color: hsl(var(--foreground));

  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;              /* 6px — cantos suaves de tecla */

  /* Profundidade de tecla: sombra interna no topo (highlight) +
     sombra externa embaixo (base apoiada). */
  box-shadow:
    inset 0 1px 0 0 hsl(var(--background) / 0.6),
    0 1px 0 0 hsl(var(--border)),
    0 2px 0 0 hsl(var(--border) / 0.5);

  flex-shrink: 0;
  user-select: none;
  white-space: nowrap;
}

.dark .nds-kbd {
  box-shadow:
    inset 0 1px 0 0 hsl(var(--foreground) / 0.08),
    0 1px 0 0 hsl(var(--border)),
    0 2px 0 0 hsl(var(--border) / 0.6);
}

/* Pressionado / hover ativo */
.nds-kbd[data-pressed="true"],
.nds-kbd:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px 0 hsl(var(--border) / 0.5),
    0 0 0 0 transparent;
}

/* ── nds-kbd-group ─────────────────────────────────────────────────────────
 * Container para atalhos compostos (Ctrl + B, ⌘⇧⌥⌃, etc.).
 * Renderizado também como <kbd> para preservar a semântica HTML do shadcn.
 */
.nds-kbd-group {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);                /* 4px entre teclas */
  font-family: inherit;
}

.nds-kbd-group > span {
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Code", "Roboto Mono", monospace;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  user-select: none;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */













/* ── nortear-design-system\src\styles\components\card.css ── */
/*
 * ─── nds-card ────────────────────────────────────────────────────────────────
 * Container standalone — zero dependência de Tailwind ou basecoat-css.
 *
 * Estrutura (todos opcionais):
 *   <div class="nds-card" data-size="default|sm">
 *     <div class="nds-card-header">
 *       <h3 class="nds-card-title">Título</h3>
 *       <div class="nds-card-description">Descrição</div>
 *       <div class="nds-card-action"><Button /></div>
 *     </div>
 *     <div class="nds-card-content">Conteúdo</div>
 *     <div class="nds-card-footer">Rodapé</div>
 *   </div>
 *
 * Comportamentos:
 *   - Footer presente: card-content perde padding-bottom (footer cola na base)
 *   - Imagem como primeiro filho: card perde padding-top
 *   - Imagem com classes nds-card-img-first/last: cantos arredondados conforme posição
 *   - data-size="sm": gap/padding reduzidos
 *
 * Tokens: --card, --card-foreground, --foreground, --muted, --border,
 *         --radius-card, --spacing-*
 */

.nds-card {
  --card-bg: hsl(var(--card));
  --card-fg: hsl(var(--card-foreground));
  --card-ring: hsl(var(--foreground) / 0.1);

  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);                        /* 16px */
  overflow: hidden;

  border-radius: var(--radius-card, 0.625rem);
  background-color: var(--card-bg);
  color: var(--card-fg);
  box-shadow: 0 0 0 1px var(--card-ring);

  padding-block: var(--spacing-4);              /* 16px top/bottom */
  padding-inline: var(--spacing-4);             /* 16px left/right */
  font-size: 0.875rem;                          /* 14px */
}

/* Tamanho sm */
.nds-card[data-size="sm"] {
  gap: var(--spacing-2);                        /* 8px */
  padding-block: var(--spacing-2);
  padding-inline: var(--spacing-2);             /* 8px left/right */
}

/* Imagem como primeiro filho — perde padding-top do card */
.nds-card:has(> img:first-child) { padding-top: 0; }
/* Imagem como último filho — perde padding-bottom do card */
.nds-card:has(> img:last-child) { padding-bottom: 0; }

/* Imagens rompem o padding-inline do card (full-bleed lateral),
 * compensando com margin-inline negativa proporcional ao tamanho. */
.nds-card > img:first-child,
.nds-card > img:last-child,
.nds-card .nds-card-img-first,
.nds-card .nds-card-img-last {
  margin-inline: calc(var(--spacing-4) * -1);
  width: calc(100% + var(--spacing-4) * 2);
  max-width: none;
}
.nds-card[data-size="sm"] > img:first-child,
.nds-card[data-size="sm"] > img:last-child,
.nds-card[data-size="sm"] .nds-card-img-first,
.nds-card[data-size="sm"] .nds-card-img-last {
  margin-inline: calc(var(--spacing-2) * -1);
  width: calc(100% + var(--spacing-2) * 2);
}

/* Imagens com cantos arredondados conforme posição */
.nds-card > img:first-child,
.nds-card .nds-card-img-first {
  border-top-left-radius: var(--radius-card, 0.625rem);
  border-top-right-radius: var(--radius-card, 0.625rem);
}
.nds-card > img:last-child,
.nds-card .nds-card-img-last {
  border-bottom-left-radius: var(--radius-card, 0.625rem);
  border-bottom-right-radius: var(--radius-card, 0.625rem);
}

/* Footer presente → zera padding-bottom do card (footer encosta na base) */
.nds-card:has(> .nds-card-footer) { padding-bottom: 0; }

/* ── Header ────────────────────────────────────────────────────────────────── */
.nds-card-header {
  display: grid;
  grid-auto-rows: min-content;
  align-items: start;
  gap: var(--spacing-1);                        /* 4px */
  /* padding-inline herdado do .nds-card */
}

/* Header com action → grid 2 colunas (texto / action) */
.nds-card-header:has(> .nds-card-action) {
  grid-template-columns: 1fr auto;
}
.nds-card-header:has(> .nds-card-description) {
  grid-template-rows: auto auto;
}

/* ── Title ─────────────────────────────────────────────────────────────────── */
.nds-card-title {
  margin: 0;
  font-size: 1rem;                              /* 16px */
  line-height: 1.4;
  font-weight: var(--font-weight-medium, 500);
}
.nds-card[data-size="sm"] .nds-card-title {
  font-size: 0.875rem;                          /* 14px */
}

/* ── Description ───────────────────────────────────────────────────────────── */
.nds-card-description {
  font-size: 0.875rem;                          /* 14px */
  color: hsl(var(--muted-foreground));
}

/* ── Action ────────────────────────────────────────────────────────────────── */
.nds-card-action {
  grid-column-start: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
}

/* ── Content ───────────────────────────────────────────────────────────────── */
.nds-card-content {
  /* padding-inline herdado do .nds-card */
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
/* Footer "rompe" o padding-inline do card via margin negativa,
 * permitindo bg-muted full-bleed até as bordas. */
.nds-card-footer {
  display: flex;
  align-items: center;
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted) / 0.5);
  padding: var(--spacing-4);                    /* 16px */
  margin-inline: calc(var(--spacing-4) * -1);   /* compensa padding-inline do card */
  border-bottom-left-radius: var(--radius-card, 0.625rem);
  border-bottom-right-radius: var(--radius-card, 0.625rem);
}
.nds-card[data-size="sm"] .nds-card-footer {
  padding: var(--spacing-2);
  margin-inline: calc(var(--spacing-2) * -1);
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */














/* ── nortear-design-system\src\styles\components\related-card.css ── */
/*
 * ─── nds-related-card ────────────────────────────────────────────────────────
 * Card clicável usado em "Componentes Relacionados" das docs pages.
 *
 * Visual = button outline (border 1px + bg-background + hover accent),
 * mas layout de card (vertical, multi-linha, padding generoso, sem inline-flex).
 *
 * Tokens: --background, --border, --foreground, --primary, --muted-foreground,
 *         --accent, --accent-foreground, --ring, --radius-button, --spacing-*
 */

.nds-related-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-button, 0.625rem);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  outline: none;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-related-card:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nds-related-card:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 5px hsl(var(--ring) / 0.5);
}

.dark .nds-related-card {
  border-color: hsl(var(--input));
  background-color: hsl(var(--input) / 0.3);
}
.dark .nds-related-card:hover {
  background-color: hsl(var(--accent) / 0.5);
}

/* Conteúdo */
.nds-related-card-title {
  font-size: 0.875rem;                          /* 14px */
  line-height: 1.25;
  font-weight: 600;
  color: hsl(var(--primary));
}

.nds-related-card-description {
  font-size: 0.75rem;                           /* 12px */
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}

/* Hover dos textos: herdam cor do card (accent-foreground) */
.nds-related-card:hover .nds-related-card-title,
.nds-related-card:hover .nds-related-card-description {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .nds-related-card {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */















/* ── nortear-design-system\src\styles\components\docs-nav.css ── */
/*
 * ─── nds-docs-nav ─────────────────────────────────────────────────────────────
 * Navegação lateral dentro das docs pages — botões de sub-seção que rolam
 * suavemente para anchors da página atual.
 *
 *   <div class="nds-docs-nav">
 *     <div class="nds-docs-nav-group">
 *       <p class="nds-docs-nav-label">Visão Geral</p>
 *       <ul class="nds-docs-nav-list">
 *         <li><button class="nds-docs-nav-button">Demonstração</button></li>
 *       </ul>
 *     </div>
 *   </div>
 */

.nds-docs-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);                            /* 24px entre grupos */
}

.nds-docs-nav-group {
  display: block;
}

.nds-docs-nav-label {
  font-size: 0.75rem;                               /* text-xs */
  font-weight: var(--font-weight-semi-bold, 600);
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--spacing-2) 0;                   /* mb-2 */
  padding-inline: var(--spacing-2);                 /* px-2 */
}

.nds-docs-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);                            /* 4px */
  padding: 0;
  margin: 0;
}

.nds-docs-nav-button {
  display: block;
  width: 100%;
  text-align: left;
  padding-inline: var(--spacing-2);                 /* 8px */
  padding-block: 6px;                                /* py-1.5 */
  font-family: var(--font-family, inherit);
  font-size: 0.875rem;                              /* text-sm */
  line-height: 1.25;
  background: transparent;
  border: 0;
  border-radius: var(--radius-button, 0.625rem);
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  outline: none;
  transition: background-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-docs-nav-button:hover {
  background-color: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
}

.nds-docs-nav-button:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--ring));
}

.nds-docs-nav-button[aria-current="location"] {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  font-weight: var(--font-weight-medium, 500);
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */
















/* ── nortear-design-system\src\styles\components\docs-demo.css ── */
/*
 * ─── nds-docs-demo ────────────────────────────────────────────────────────────
 * Card wrapper para demonstrações dentro das docs pages.
 * Estende .nds-card adicionando alinhamento centralizado e margin-top
 * consistente com o ritmo vertical das seções.
 */

.nds-docs-demo {
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-2);                   /* 8px — espaçamento da seção anterior */
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */

















/* ── nortear-design-system\src\styles\components\docs-icons.css ── */
/*
 * ─── nds-icon-search ─ Página de Foundations/Icons ───────────────────────────
 * Componentes específicos da galeria Lucide na docs page de Icons.
 */

/* ── Campo de busca com ícone search à esquerda ──────────────────────────── */
.nds-icon-search-wrap {
  position: relative;
}

.nds-icon-search-svg {
  position: absolute;
  left: 0.75rem;                            /* 12px = ~spacing-3 */
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;                              /* 16px */
  height: 1rem;
  pointer-events: none;
  color: hsl(var(--muted-foreground));
}

.nds-icon-search-input {
  width: 100%;
  background-color: hsl(var(--input-background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-md, 0.5rem);
  padding-inline: 2.25rem 0.75rem;          /* left 36px (para o ícone), right 12px */
  padding-block: var(--spacing-1);          /* 4px */
  height: 2.25rem;                          /* 36px */
  font-family: var(--font-family, inherit);
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-icon-search-input:focus-visible {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
}

/* ── Empty state quando busca não retorna nada ────────────────────────────── */
.nds-icon-empty-state {
  display: none;                            /* mostrado via .is-visible */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--spacing-20);         /* 80px */
  color: hsl(var(--muted-foreground));
  gap: var(--spacing-2);
}
.nds-icon-empty-state.is-visible {
  display: flex;
}
.nds-icon-empty-state-svg {
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.5;
}

/* ── Grade de ícones (auto-fill, mínimo 96px) ─────────────────────────────── */
.nds-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--spacing-1);                    /* 4px */
  list-style: none;
  padding: 0;
  margin: 0;
}
.nds-icon-grid.is-hidden {
  display: none;
}

.nds-icon-grid-item {
  list-style: none;
}
.nds-icon-grid-item.is-hidden {
  display: none;
}

/* ── Botão individual do ícone — clicável, com hover/focus ─────────────────── */
.nds-icon-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--spacing-2);                    /* 8px */
  padding: var(--spacing-3, 0.75rem);       /* 12px */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-lg, 0.625rem);
  cursor: pointer;
  overflow: visible;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
  font-family: var(--font-family, inherit);
}

.nds-icon-tile:hover {
  background-color: hsl(var(--muted) / 0.5);
  border-color: hsl(var(--border));
}

.nds-icon-tile:focus-visible {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}

.nds-icon-tile-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;                           /* 20px = nds-icon-lg */
  height: 1.25rem;
  color: hsl(var(--foreground) / 0.8);
  transition: color var(--duration-fast);
}
/* Hover no tile destaca o ícone em primary */
.nds-icon-tile:hover .nds-icon-tile-svg {
  color: hsl(var(--primary));
}

.nds-icon-tile-name {
  width: 100%;
  font-family: ui-monospace, Menlo, Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  font-size: 10px;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
  text-align: center;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Divider de seção: borda superior + padding-top ───────────────────────── */
.nds-docs-section-divider {
  border-top: 1px solid hsl(var(--border) / 0.5);
  padding-top: var(--spacing-8);              /* 32px */
}

/* ── Bloco de código padrão da docs page ───────────────────────────────────
 * Consolidado: bg-muted, border-default, padding 16, caption (12px),
 * mono font, overflow-x. Substitui o "amontoado" de 7 utilitários no className.
 */
.nds-docs-code {
  display: block;
  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg, 0.625rem);
  padding: var(--spacing-4);                /* 16px */
  font-family: ui-monospace, Menlo, Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  font-size: 0.75rem;                       /* 12px */
  line-height: 1.625;
  color: hsl(var(--foreground));
  overflow-x: auto;
  margin: 0;
}
.nds-docs-code > code {
  font: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
}

/* ── Callout (caixa decorativa pra exemplos do/dont nas docs) ───────────────
 * Bg/border soft em uma cor semântica; conteúdo herda layout via nds-stack.
 */
.nds-docs-callout {
  border-radius: var(--radius-lg, 0.625rem);
  padding: var(--spacing-2);                /* 8px */
  background-color: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
}
.nds-docs-callout[data-tone="success"] {
  background-color: hsl(var(--success) / 0.08);
  border-color: hsl(var(--success) / 0.3);
}
.nds-docs-callout[data-tone="info"] {
  background-color: hsl(var(--info) / 0.08);
  border-color: hsl(var(--info) / 0.3);
}
.nds-docs-callout[data-tone="warning"] {
  background-color: hsl(var(--warning) / 0.08);
  border-color: hsl(var(--warning) / 0.3);
}
.nds-docs-callout[data-tone="destructive"] {
  background-color: hsl(var(--destructive) / 0.08);
  border-color: hsl(var(--destructive) / 0.3);
}

/* ── Tooltip "Copiado" sobre o tile (estado on-hover ou pós-click) ────────── */
.nds-icon-tile-tooltip {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm, 0.25rem);
  font-size: 10px;
  white-space: nowrap;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast);
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */


















/* ── nortear-design-system\src\styles\components\docs-swatches.css ── */
/*
 * ─── nds-swatch ─ Página de Foundations/Cores e Temas ────────────────────────
 * Componentes específicos da galeria de tokens de cor, temas, modos, densidade
 * e fontes. Reaproveita .nds-docs-section-divider e .nds-icon-tile-tooltip de
 * docs-icons.css. Nenhuma cor é hard-coded: tudo via hsl(var(--TOKEN)).
 * Spacing: somente tokens on-grid (--spacing-2 = 8px, --spacing-4 = 16px).
 * --spacing-3 (12px) NÃO existe no projeto (fora do grid de 8) — não usar.
 */

/* ── Sub-grupo dentro da paleta (Superfícies, Marca, etc.) ─────────────────── */
.nds-swatch-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);                        /* 8px */
}
.nds-swatch-group-title {
  font-size: 0.8125rem;                       /* 13px */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* ── Grade de swatches (auto-fill, mínimo 150px) ──────────────────────────── */
.nds-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--spacing-2);                        /* 8px */
  list-style: none;
  padding: 0;
  margin: 0;
}
.nds-swatch-grid-item {
  list-style: none;
}

/* ── Swatch clicável (horizontal): chip de cor + --token + valor HSL ──────── */
/* Layout em linha — chip à esquerda, metadados à direita — espelhando as
 * demais stacks. O token é aplicado via style.setProperty no JS sobre
 * --swatch-color (variável, não cor literal). */
.nds-swatch {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2);                        /* 8px */
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: var(--radius-lg, 0.625rem);
  padding: var(--spacing-2);                    /* 8px */
  cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
  font-family: var(--font-family, inherit);
}
.nds-swatch:hover {
  border-color: hsl(var(--border));
  background-color: hsl(var(--muted) / 0.4);
}
.nds-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring)), 0 0 0 4px hsl(var(--background));
}

.nds-swatch-color {
  width: 2.5rem;                                /* 40px */
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-md, 0.5rem);
  background-color: hsl(var(--swatch-color));
  border: 1px solid hsl(var(--border) / 0.5);
}

.nds-swatch-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;                                 /* permite truncamento */
}
.nds-swatch-token {
  font-family: ui-monospace, Menlo, Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  font-size: 0.75rem;                          /* 12px */
  font-weight: 500;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nds-swatch-value {
  font-family: ui-monospace, Menlo, Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  font-size: 0.625rem;                         /* 10px */
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Cards de tema/modo: cada um isola seu próprio escopo de tokens ────────── */
/* auto-fit + 1fr: com 3 cards (marca) vira 3 colunas iguais; com 2 (light/dark)
 * vira 2 colunas iguais — espelhando o grid-cols-3 / grid-cols-2 das outras
 * stacks sem precisar de breakpoints. */
.nds-theme-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-4);                        /* 16px */
}
/* Wrapper transparente — apenas ocupa a célula do grid. A borda/padding/tema
 * ficam no scope (único box visível), como nas demais stacks (div único). */
.nds-theme-card {
  display: flex;
  flex-direction: column;
}
/* O scope aplica a classe de tema/modo; herda os tokens recalculados e pinta
 * seu próprio background/foreground/border. */
.nds-theme-card-scope {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);                        /* 8px */
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg, 0.625rem);
  padding: var(--spacing-4);                    /* 16px */
}
.nds-theme-card-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

/* ── Fileira de mini-swatches (amostra compacta de uma paleta) ────────────── */
.nds-miniswatch-row {
  display: flex;
  gap: var(--spacing-2);                        /* 8px */
  flex-wrap: wrap;
}
.nds-miniswatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.nds-miniswatch-chip {
  width: 2rem;                                  /* 32px */
  height: 2rem;
  border-radius: var(--radius-md, 0.5rem);
  background-color: hsl(var(--swatch-color));
  border: 1px solid hsl(var(--border) / 0.6);
}
.nds-miniswatch-name {
  font-family: ui-monospace, Menlo, Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  font-size: 0.625rem;                          /* 10px */
  color: hsl(var(--muted-foreground));
}

/* ── Grades de eixo: densidade (3 col) e fontes (4 col) ───────────────────── */
/* Espelha grid-cols-3 / grid-cols-4 das demais stacks. auto-fit + min(100%, …)
 * mantém o número de colunas no desktop e colapsa em telas estreitas — sem
 * media query (regra do projeto). */
.nds-axis-grid {
  display: grid;
  gap: var(--spacing-4);                        /* 16px */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.nds-axis-grid[data-cols="4"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

/* ── Amostras de densidade e fonte ────────────────────────────────────────── */
.nds-axis-sample {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);                        /* 8px */
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg, 0.625rem);
  padding: var(--spacing-4);                    /* 16px */
}
.nds-axis-sample-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
/* Wrapper de demonstração de DENSIDADE. Recebe a classe densidade-* (que
 * redefine --spacing-base no escopo). */
.nds-axis-scope {
  display: block;
}

/* Tabela específica das demonstrações de densidade. ESCOPADA a esta página
 * (Cores e Temas) — NÃO usar em outras tabelas.
 *
 * Por quê uma classe própria: os tokens intermediários (--spacing-2, -10) têm
 * o `var(--spacing-base)` substituído no :root no momento da computed-value e
 * inheritam como um calc com a literal 0.25rem dentro. Então, mesmo quando um
 * descendente recebe `.densidade-condensado { --spacing-base: 0.20rem }`, as
 * regras `padding: var(--spacing-2)` continuam resolvendo com 0.25rem — não
 * escalam. Escrevendo `calc(var(--spacing-base) * N)` DIRETO na propriedade,
 * o `--spacing-base` é substituído no elemento de uso (a th/td dentro do
 * escopo densidade-*), recomputando para a base escopada. */
/* Especificidade dupla (.nds-table.nds-axis-density-table) é necessária porque
 * table.css é importado DEPOIS de docs-swatches.css no globals.css; sem isso
 * `.nds-table td` venceria por ordem de cascata em igualdade de specificity. */
.nds-table.nds-axis-density-table th {
  height: calc(var(--spacing-base) * 10);
  padding-inline: calc(var(--spacing-base) * 2);
}
.nds-table.nds-axis-density-table td {
  padding: calc(var(--spacing-base) * 2);
}
/* Texto de amostra das fontes — herda --font-family-active recalculado */
.nds-font-sample {
  font-family: var(--font-family-active, var(--font-family, inherit));
  font-size: 1.75rem;                           /* 28px */
  font-weight: 500;
  color: hsl(var(--foreground));
  line-height: 1.2;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */



















/* ── nortear-design-system\src\styles\components\language-switcher.css ── */
/*
 * ─── nds-lang-switcher ────────────────────────────────────────────────────────
 * Toggle group de 3 botões compactos (PT / EN / ES) usado no header das docs.
 * Visual: segmented control com bg muted-soft, item ativo destacado.
 */

.nds-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);                          /* 4px */
  padding: var(--spacing-1);                      /* 4px */
  background-color: hsl(var(--muted) / 0.3);
  border: 1px solid hsl(var(--border) / 0.4);
  border-radius: var(--radius-input, 0.5rem);
}

.nds-lang-switcher-button {
  padding-inline: var(--spacing-2);               /* 8px */
  padding-block: var(--spacing-0-5);              /* 2px */
  font-family: var(--font-family, inherit);
  font-size: 0.625rem;                            /* 10px — bem compacto */
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.5;
  letter-spacing: 0.02em;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border: 0;
  border-radius: var(--radius-button, 0.625rem);
  cursor: pointer;
  outline: none;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-lang-switcher-button:hover {
  background-color: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
}

.nds-lang-switcher-button[aria-pressed="true"] {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.nds-lang-switcher-button:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--ring));
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */




















/* ── nortear-design-system\src\styles\components\accordion.css ── */
/*
 * ─── nds-accordion ──────────────────────────────────────────────────────────
 * Componente standalone — zero dependência de Tailwind ou basecoat-css.
 *
 * Estrutura:
 *   <div class="nds-accordion" data-slot="accordion">
 *     <div class="nds-accordion-item" data-slot="accordion-item">
 *       <h3 class="nds-accordion-header">
 *         <button class="nds-accordion-trigger" data-slot="accordion-trigger"
 *                 aria-expanded="false" aria-controls="...">
 *           <span>Pergunta</span>
 *           <svg class="nds-accordion-icon">...</svg>
 *         </button>
 *       </h3>
 *       <div class="nds-accordion-content" data-slot="accordion-content"
 *            role="region" aria-labelledby="..." hidden>
 *         <div class="nds-accordion-content-inner">Resposta</div>
 *       </div>
 *     </div>
 *   </div>
 *
 * Tokens: --border, --foreground, --muted-foreground, --ring, --spacing-*
 */

.nds-accordion {
  width: 100%;
}

/* ── Item ────────────────────────────────────────────────────────────────── */
.nds-accordion-item {
  border-bottom: 1px solid hsl(var(--border));
}
.nds-accordion-item:last-child {
  border-bottom: 0;
}

/* ── Header (wrapper do trigger; mantém semântica de heading) ────────────── */
.nds-accordion-header {
  display: flex;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ── Trigger ─────────────────────────────────────────────────────────────── */
.nds-accordion-trigger {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);                   /* 16px */

  padding-block: var(--spacing-4);         /* 16px */
  padding-inline: 0;

  background: transparent;
  border: 0;
  border-radius: var(--radius, 0.5rem);
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;                     /* 14px */
  font-weight: var(--font-weight-medium, 500);
  color: hsl(var(--foreground));
  cursor: pointer;
  outline: 0;

  transition: color var(--duration-fast);
}

.nds-accordion-trigger:hover > span:first-child {
  text-decoration: underline;
}

.nds-accordion-trigger:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}

.nds-accordion-trigger:disabled,
.nds-accordion-trigger[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Chevron icon ────────────────────────────────────────────────────────── */
.nds-accordion-icon {
  width: var(--spacing-4);                 /* 16px */
  height: var(--spacing-4);
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  transition: transform var(--duration-base);
}

.nds-accordion-trigger[data-state="open"] .nds-accordion-icon {
  transform: rotate(180deg);
}

/* ── Content ─────────────────────────────────────────────────────────────── */
.nds-accordion-content {
  overflow: hidden;
  font-size: 0.875rem;                     /* 14px */
  color: hsl(var(--foreground));
}

.nds-accordion-content-inner {
  padding-top: 0;
  padding-bottom: var(--spacing-4);        /* 16px */
  line-height: 1.5;
}

/* ── prefers-reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nds-accordion-trigger,
  .nds-accordion-icon {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */





















/* ── nortear-design-system\src\styles\components\alert-dialog.css ── */
/*
 * ─── nds-alert-dialog ──────────────────────────────────────────────────────
 * Componente standalone — zero dependência de Tailwind ou basecoat-css.
 *
 * Estrutura (portal — root é body):
 *   <div class="nds-alert-dialog-overlay" />
 *   <div class="nds-alert-dialog-content" role="alertdialog" aria-modal="true">
 *     <div class="nds-alert-dialog-header">
 *       <h2 class="nds-alert-dialog-title">Título</h2>
 *       <p  class="nds-alert-dialog-description">Descrição</p>
 *     </div>
 *     <div class="nds-alert-dialog-footer">
 *       <button>Cancelar</button>
 *       <button>Confirmar</button>
 *     </div>
 *   </div>
 *
 * Sem overlay-click-to-close e sem Escape-to-close — comportamento canônico
 * de alert dialog (decisão crítica, exige escolha explícita do usuário).
 *
 * Tokens: --background, --foreground, --muted-foreground, --border,
 *         --radius-dialog, --spacing-*
 */

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.nds-alert-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: hsl(0 0% 0% / 0.8);
}

/* ── Content panel ───────────────────────────────────────────────────────── */
.nds-alert-dialog-content {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;

  display: grid;
  gap: var(--spacing-4);                          /* 16px entre header e footer */

  width: calc(100% - var(--spacing-8));           /* 100% - 32px de margem */
  max-width: 32rem;                               /* 512px — tamanho lg confortável */
  translate: -50% -50%;

  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-dialog, 0.625rem);
  padding: var(--spacing-6);                      /* 24px */
  box-shadow:
    0 10px 15px -3px hsl(0 0% 0% / 0.1),
    0 4px 6px -4px hsl(0 0% 0% / 0.1);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.nds-alert-dialog-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);                          /* 8px entre título e descrição */
  text-align: center;
}

@media (min-width: 40rem) {
  .nds-alert-dialog-header {
    text-align: left;
  }
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.nds-alert-dialog-title {
  margin: 0;
  font-size: 1.125rem;                            /* 18px — text-lg */
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}

/* ── Description ─────────────────────────────────────────────────────────── */
.nds-alert-dialog-description {
  margin: 0;
  font-size: 0.875rem;                            /* 14px */
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.nds-alert-dialog-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--spacing-2);                          /* 8px entre botões empilhados */
}

@media (min-width: 40rem) {
  .nds-alert-dialog-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */






















/* ── nortear-design-system\src\styles\components\aspect-ratio.css ── */
/*
 * ─── nds-aspect-ratio ───────────────────────────────────────────────────────
 * Container que preserva proporção arbitrária via CSS `aspect-ratio` nativo.
 * Substitui o "padding-bottom trick" — `aspect-ratio` é suportado por todos
 * os browsers modernos (>= 2021) e respeita `min-height`/`max-height`.
 *
 * Estrutura:
 *   <div class="nds-aspect-ratio" style="--ratio: 16/9">
 *     <img src="..." />        ← filhos preenchem o container
 *   </div>
 *
 *   Default `--ratio` é 1 (quadrado). Para alterar:
 *     style="--ratio: 16/9"    ou aspect-ratio inline.
 *
 * O filho recebe `position: absolute; inset: 0` para garantir cobertura
 * uniforme mesmo se o conteúdo tiver dimensões intrínsecas (img/iframe).
 */

.nds-aspect-ratio {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 1);
}

.nds-aspect-ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */























/* ── nortear-design-system\src\styles\components\avatar.css ── */
/*
 * ─── nds-avatar ─────────────────────────────────────────────────────────────
 * Componente standalone — zero dependência de Tailwind ou basecoat-css.
 *
 * Estrutura:
 *   <span class="nds-avatar" data-slot="avatar">
 *     <img class="nds-avatar-image" data-slot="avatar-image" src="..." alt="...">
 *     <span class="nds-avatar-fallback" data-slot="avatar-fallback">JS</span>
 *   </span>
 *
 * Tamanhos: padrão 32px (grid-8). Use data-size="sm" (24px) ou "lg" (48px),
 * ou sobrescreva `--avatar-size` via style/classe externa.
 *
 * Tokens: --muted, --muted-foreground, --background, --spacing-*
 */

.nds-avatar {
  --avatar-size: var(--spacing-8);          /* 32px default */

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--avatar-size);
  height: var(--avatar-size);
  flex-shrink: 0;

  border-radius: 9999px;
  overflow: hidden;
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-family: inherit;
  font-size: calc(var(--avatar-size) * 0.4);  /* tipografia proporcional */
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  user-select: none;
}

/* Tamanhos preset */
.nds-avatar[data-size="sm"]  { --avatar-size: var(--spacing-6);  }  /* 24px */
.nds-avatar[data-size="md"]  { --avatar-size: var(--spacing-8);  }  /* 32px */
.nds-avatar[data-size="lg"]  { --avatar-size: var(--spacing-10); }  /* 40px */
.nds-avatar[data-size="xl"]  { --avatar-size: var(--spacing-12); }  /* 48px */
.nds-avatar[data-size="2xl"] { --avatar-size: var(--spacing-16); }  /* 64px */

/* ── Image ───────────────────────────────────────────────────────────────── */
.nds-avatar-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;                        /* evita distorção em imgs não-quadradas */
  display: block;
}

/* ── Fallback (iniciais/ícone) ───────────────────────────────────────────── */
.nds-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* ── Group (sobreposição de avatares) ────────────────────────────────────── */
.nds-avatar-group {
  display: inline-flex;
  align-items: center;
}

.nds-avatar-group > .nds-avatar {
  border: 2px solid hsl(var(--background));
  margin-left: calc(var(--spacing-2) * -1);  /* -8px overlap */
}

.nds-avatar-group > .nds-avatar:first-child {
  margin-left: 0;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */
























/* ── nortear-design-system\src\styles\components\separator.css ── */
/*
 * ─── nds-separator ──────────────────────────────────────────────────────────
 * Linha divisória horizontal ou vertical de 1px.
 *
 *   <div class="nds-separator" data-orientation="horizontal" role="none"></div>
 *   <div class="nds-separator" data-orientation="vertical"   role="separator"></div>
 *
 * Decorativo por default (role="none" + aria-hidden). Para uso semântico,
 * usar role="separator" + aria-orientation.
 *
 * Tokens: --border
 */

.nds-separator {
  flex-shrink: 0;
  background-color: hsl(var(--border));
}

.nds-separator[data-orientation="horizontal"] {
  width: 100%;
  height: 1px;
}

.nds-separator[data-orientation="vertical"] {
  width: 1px;
  height: 100%;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */

























/* ── nortear-design-system\src\styles\components\label.css ── */
/*
 * ─── nds-label ──────────────────────────────────────────────────────────────
 * Rótulo de campo de formulário.
 *
 *   <label class="nds-label" for="email">E-mail</label>
 *
 * Comportamento:
 *   - Reduz opacidade quando o controle associado (irmão com .peer) está :disabled
 *   - Reduz opacidade quando ancestral com data-disabled="true" (form/fieldset)
 *
 * Tokens: --foreground, --spacing-*
 *
 * Acessibilidade: usar `for` (htmlFor) para associar ao input. Sem altura
 * fixa (WCAG 1.4.4 — Resize Text 200%).
 */

.nds-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);                    /* 8px entre texto e ícone */

  font-family: inherit;
  font-size: 0.875rem;                      /* 14px — text-sm */
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  color: hsl(var(--foreground));
  user-select: none;
}

/* Controle irmão (.peer) desabilitado → label fica esmaecida */
.peer:disabled ~ .nds-label,
.nds-label:has(~ .peer:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Form/fieldset desabilitado → labels descendentes esmaecidas */
[data-disabled="true"] .nds-label,
fieldset:disabled .nds-label {
  pointer-events: none;
  opacity: 0.5;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */


























/* ── nortear-design-system\src\styles\components\skeleton.css ── */
/*
 * ─── nds-skeleton ────────────────────────────────────────────────────────────
 * Placeholder animado durante carregamento de dados.
 *
 *   <div class="nds-skeleton" style="height: 16px; width: 200px"></div>
 *
 * Default sem dimensão própria — o consumidor define width/height via style
 * ou utilitárias. Pulsa via opacity, respeita prefers-reduced-motion.
 *
 * Tokens: --primary (cor de fundo soft), --radius
 */

.nds-skeleton {
  display: block;
  background-color: hsl(var(--primary) / 0.1);
  border-radius: var(--radius, 0.5rem);
  animation: nds-skeleton-pulse 1.5s var(--ease-standard) infinite;
}

@keyframes nds-skeleton-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .nds-skeleton {
    animation: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */



























/* ── nortear-design-system\src\styles\components\progress.css ── */
/*
 * ─── nds-progress ───────────────────────────────────────────────────────────
 * Barra de progresso linear (determinada).
 *
 *   <div class="nds-progress" role="progressbar" aria-valuenow="40">
 *     <div class="nds-progress-indicator" style="--value: 40"></div>
 *   </div>
 *
 * O indicador usa `transform: translateX` controlado pela CSS custom property
 * `--value` (0–100), permitindo transição suave sem JS adicional.
 *
 * Tokens: --primary (preenchimento), --radius-full
 */

.nds-progress {
  position: relative;
  width: 100%;
  height: var(--spacing-2);                /* 8px */
  background-color: hsl(var(--primary) / 0.2);
  border-radius: 9999px;
  overflow: hidden;
}

.nds-progress-indicator {
  width: 100%;
  height: 100%;
  background-color: hsl(var(--primary));
  transform: translateX(calc((var(--value, 0) - 100) * 1%));
  transition: transform var(--duration-base) var(--ease-entrance);
}

@media (prefers-reduced-motion: reduce) {
  .nds-progress-indicator {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */




























/* ── nortear-design-system\src\styles\components\input.css ── */
/*
 * ─── nds-input ──────────────────────────────────────────────────────────────
 * Campo de entrada de texto single-line.
 *
 *   <input class="nds-input" type="text" />
 *
 * Sem altura fixa (WCAG 1.4.4) — usa padding-block + line-height.
 * Tokens: --input (bg), --border, --foreground, --muted-foreground, --ring,
 *         --destructive, --radius
 */

.nds-input {
  display: block;
  width: 100%;

  padding-block: var(--spacing-2);              /* 8px */
  padding-inline: var(--spacing-3, 0.75rem);    /* 12px */

  font-family: inherit;
  font-size: 0.875rem;                          /* 14px */
  line-height: 1.5;
  color: hsl(var(--foreground));

  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input, var(--border)));
  border-radius: var(--radius, 0.5rem);

  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  outline: 0;
}

.nds-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.nds-input:hover:not(:disabled):not([aria-invalid="true"]) {
  border-color: hsl(var(--ring) / 0.4);
}

.nds-input:focus-visible {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.3);
}

.nds-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: hsl(var(--muted) / 0.3);
}

.nds-input[aria-invalid="true"] {
  border-color: hsl(var(--destructive));
}

.nds-input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.3);
}

/* File input — herda do .nds-input mas tem reset específico do button nativo */
.nds-input[type="file"] {
  padding-block: var(--spacing-1-5, 0.375rem);
  cursor: pointer;
}

.nds-input[type="file"]::file-selector-button {
  margin-right: var(--spacing-2);
  padding-block: var(--spacing-1, 0.25rem);
  padding-inline: var(--spacing-2);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
  border: 0;
  border-radius: var(--radius-sm, 0.25rem);
  cursor: pointer;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */





























/* ── nortear-design-system\src\styles\components\textarea.css ── */
/*
 * ─── nds-textarea ───────────────────────────────────────────────────────────
 * Campo de entrada multilinha.
 *
 *   <textarea class="nds-textarea" rows="3"></textarea>
 *
 * Compartilha tokens com .nds-input. Resize vertical apenas (horizontal
 * normalmente quebra layout). min-height proporcional ao input para um
 * "campo curto" coerente.
 *
 * Tokens: --input (border), --background, --foreground, --muted-foreground,
 *         --ring, --destructive, --radius, --spacing-*
 */

.nds-textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--spacing-8) * 2);       /* ~64px — placeholder mínimo */

  padding-block: var(--spacing-2);              /* 8px */
  padding-inline: var(--spacing-3, 0.75rem);    /* 12px */

  font-family: inherit;
  font-size: 0.875rem;                          /* 14px */
  line-height: 1.5;
  color: hsl(var(--foreground));

  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input, var(--border)));
  border-radius: var(--radius, 0.5rem);

  resize: vertical;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  outline: 0;
}

.nds-textarea::placeholder {
  color: hsl(var(--muted-foreground));
}

.nds-textarea:hover:not(:disabled):not([aria-invalid="true"]) {
  border-color: hsl(var(--ring) / 0.4);
}

.nds-textarea:focus-visible {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.3);
}

.nds-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  resize: none;
  background-color: hsl(var(--muted) / 0.3);
}

.nds-textarea[aria-invalid="true"] {
  border-color: hsl(var(--destructive));
}

.nds-textarea[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.3);
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */






























/* ── nortear-design-system\src\styles\components\checkbox.css ── */
/*
 * ─── nds-checkbox ───────────────────────────────────────────────────────────
 * Checkbox vanilla com semântica ARIA (role="checkbox") sobre <div>.
 *
 *   <div class="nds-checkbox" role="checkbox" tabindex="0"
 *        aria-checked="false" data-state="unchecked">
 *     <input type="checkbox" aria-hidden="true" ... />  ← native sr-only
 *     <span class="nds-checkbox-indicator">              ← visual check
 *       <svg>...</svg>
 *     </span>
 *   </div>
 *
 * Tokens: --primary, --primary-foreground, --input, --border, --ring,
 *         --destructive, --background, --radius-sm
 */

.nds-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: var(--spacing-4);                      /* 16px */
  height: var(--spacing-4);

  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input, var(--border)));
  border-radius: 0.25rem;                        /* 4px — radius-sm */
  cursor: pointer;
  outline: 0;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-checkbox:focus-visible {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
}

.nds-checkbox[data-state="checked"] {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.nds-checkbox[aria-disabled="true"],
.nds-checkbox:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

.nds-checkbox[aria-invalid="true"] {
  border-color: hsl(var(--destructive));
}

.nds-checkbox[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.3);
}

/* ── Indicator ───────────────────────────────────────────────────────────── */
.nds-checkbox-indicator {
  display: grid;
  place-content: center;
  color: currentColor;
}

.nds-checkbox-indicator > svg {
  width: 0.875rem;                              /* 14px */
  height: 0.875rem;
}

/* Native input visualmente oculto (mas presente para forms) */
.nds-checkbox > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */































/* ── nortear-design-system\src\styles\components\switch.css ── */
/*
 * ─── nds-switch ─────────────────────────────────────────────────────────────
 * Toggle binário (liga/desliga) com aparência de switch físico.
 *
 *   <button class="nds-switch" role="switch" aria-checked="false"
 *           data-state="unchecked">
 *     <span class="nds-switch-thumb" data-state="unchecked"></span>
 *   </button>
 *
 * Track: 36×20px (grid-8 mais bonus 4px). Thumb: 16×16px (grid-8).
 *
 * Tokens: --primary (track on), --input (track off), --background (thumb),
 *         --ring, --spacing-*
 */

.nds-switch {
  display: inline-flex;
  align-items: center;

  width: calc(var(--spacing-8) + var(--spacing-1));   /* 32 + 4 = 36px */
  height: var(--spacing-5, 1.25rem);                  /* 20px */
  padding: 2px;

  background-color: hsl(var(--input, var(--border)));
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  outline: 0;
  transition: background-color var(--duration-base);
}

.nds-switch:focus-visible {
  box-shadow:
    0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring) / 0.5);
}

.nds-switch[data-state="checked"] {
  background-color: hsl(var(--primary));
}

.nds-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── Thumb ───────────────────────────────────────────────────────────────── */
.nds-switch-thumb {
  display: block;
  width: var(--spacing-4);                            /* 16px */
  height: var(--spacing-4);

  background-color: hsl(var(--background));
  border-radius: 9999px;
  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.2);
  pointer-events: none;

  transform: translateX(0);
  transition: transform var(--duration-base);
}

.nds-switch-thumb[data-state="checked"] {
  transform: translateX(var(--spacing-4));            /* 16px deslocamento */
}

@media (prefers-reduced-motion: reduce) {
  .nds-switch,
  .nds-switch-thumb {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */
































/* ── nortear-design-system\src\styles\components\radio-group.css ── */
/*
 * ─── nds-radio-group ────────────────────────────────────────────────────────
 * Grupo de radios mutuamente exclusivos.
 *
 *   <fieldset class="nds-radio-group" data-slot="radio-group">
 *     <div class="nds-radio-row">
 *       <button class="nds-radio-item" role="radio" aria-checked="false">
 *         <span class="nds-radio-indicator"><svg>...</svg></span>
 *         <input type="radio" />        ← native sr-only
 *       </button>
 *       <label class="nds-radio-label">Opção</label>
 *     </div>
 *   </fieldset>
 *
 * Tokens: --primary, --background, --border, --ring, --spacing-*
 */

.nds-radio-group {
  display: grid;
  gap: var(--spacing-2);                          /* 8px entre rows */
  margin: 0;
  padding: 0;
  border: 0;
}

/* ── Row (item + label) ──────────────────────────────────────────────────── */
.nds-radio-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);                          /* 8px entre radio e label */
}

/* ── Item (botão visual com semântica role="radio") ──────────────────────── */
.nds-radio-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: var(--spacing-4);                        /* 16px */
  height: var(--spacing-4);

  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--primary));
  border-radius: 9999px;
  cursor: pointer;
  outline: 0;
  padding: 0;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-radio-item:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}

.nds-radio-item:disabled,
.nds-radio-item[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── Indicator (círculo central) ─────────────────────────────────────────── */
.nds-radio-indicator {
  display: grid;
  place-content: center;
}

.nds-radio-indicator > svg {
  width: 0.625rem;                                /* 10px — círculo interno */
  height: 0.625rem;
  fill: hsl(var(--primary));
}

/* Native input visualmente oculto (mas presente para forms) */
.nds-radio-item > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.nds-radio-label {
  font-family: inherit;
  font-size: 0.875rem;                            /* 14px */
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  color: hsl(var(--foreground));
  user-select: none;
  cursor: pointer;
}

.nds-radio-row:has(.nds-radio-item:disabled) .nds-radio-label {
  cursor: not-allowed;
  opacity: 0.5;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */

































/* ── nortear-design-system\src\styles\components\tabs.css ── */
/*
 * ─── nds-tabs ───────────────────────────────────────────────────────────────
 * Componente de abas com lista de triggers + painéis de conteúdo.
 *
 * Estrutura:
 *   <div class="nds-tabs" data-slot="tabs">
 *     <div class="nds-tabs-list" role="tablist">
 *       <button class="nds-tabs-trigger" role="tab" data-state="active|inactive">…</button>
 *       …
 *     </div>
 *     <div class="nds-tabs-content" role="tabpanel" hidden|visible>…</div>
 *   </div>
 *
 * Tokens: --muted (track), --background (active bg), --foreground (active fg),
 *         --muted-foreground (inactive fg), --ring, --radius, --spacing-*
 */

.nds-tabs {
  width: 100%;
}

/* ── List (track de triggers) ────────────────────────────────────────────── */
.nds-tabs-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--spacing-9, 2.25rem);          /* 36px — fora grid-8 (padrão shadcn) */
  padding: var(--spacing-1, 0.25rem);          /* 4px interno */

  background-color: hsl(var(--muted));
  border-radius: var(--radius, 0.5rem);
  color: hsl(var(--muted-foreground));
}

/* ── Trigger ─────────────────────────────────────────────────────────────── */
.nds-tabs-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: var(--spacing-1);

  padding-inline: var(--spacing-3, 0.75rem);
  padding-block: var(--spacing-1, 0.25rem);

  background: transparent;
  border: 0;
  border-radius: calc(var(--radius, 0.5rem) - 0.125rem);
  font-family: inherit;
  font-size: 0.875rem;                          /* 14px */
  font-weight: var(--font-weight-medium, 500);
  color: inherit;
  cursor: pointer;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-tabs-trigger:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.5);
}

.nds-tabs-trigger[data-state="active"] {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.05);
}

.nds-tabs-trigger:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* ── Content (painel) ────────────────────────────────────────────────────── */
.nds-tabs-content {
  margin-top: var(--spacing-2);                 /* 8px */
  outline: 0;
}

.nds-tabs-content:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.5);
  border-radius: var(--radius, 0.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .nds-tabs-trigger {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */


































/* ── nortear-design-system\src\styles\components\breadcrumb.css ── */
/*
 * ─── nds-breadcrumb ─────────────────────────────────────────────────────────
 * Navegação de trilha (rastro de páginas até a atual).
 *
 * Estrutura:
 *   <nav class="nds-breadcrumb" aria-label="breadcrumb">
 *     <ol class="nds-breadcrumb-list">
 *       <li class="nds-breadcrumb-item">
 *         <a class="nds-breadcrumb-link" href="/">Home</a>
 *       </li>
 *       <li class="nds-breadcrumb-separator" aria-hidden="true">›</li>
 *       <li class="nds-breadcrumb-item">
 *         <span class="nds-breadcrumb-page" aria-current="page">Atual</span>
 *       </li>
 *     </ol>
 *   </nav>
 *
 * Tokens: --foreground, --muted-foreground
 */

.nds-breadcrumb {
  /* nav é landmark — nenhum estilo próprio */
}

/* ── List ────────────────────────────────────────────────────────────────── */
.nds-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1-5, 0.375rem);            /* 6px */
  margin: 0;
  padding: 0;
  list-style: none;
  word-break: break-word;
  font-size: 0.875rem;                           /* 14px */
  color: hsl(var(--muted-foreground));
}

/* ── Item ────────────────────────────────────────────────────────────────── */
.nds-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);                         /* 4px */
}

/* ── Link ────────────────────────────────────────────────────────────────── */
.nds-breadcrumb-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast);
}

.nds-breadcrumb-link:hover {
  color: hsl(var(--foreground));
}

.nds-breadcrumb-link:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.5);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ── Page (atual, não navegável) ─────────────────────────────────────────── */
.nds-breadcrumb-page {
  font-weight: var(--font-weight-normal, 400);
  color: hsl(var(--foreground));
}

/* ── Separator (chevron/›) ───────────────────────────────────────────────── */
.nds-breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.nds-breadcrumb-separator > svg {
  width: 0.875rem;                               /* 14px */
  height: 0.875rem;
}

/* ── Ellipsis (overflow) ─────────────────────────────────────────────────── */
.nds-breadcrumb-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-5, 1.25rem);              /* 20px */
  height: var(--spacing-5, 1.25rem);
}

.nds-breadcrumb-ellipsis > svg {
  width: var(--spacing-4);                       /* 16px */
  height: var(--spacing-4);
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */



































/* ── nortear-design-system\src\styles\components\pagination.css ── */
/*
 * ─── nds-pagination ─────────────────────────────────────────────────────────
 * Navegação de página numerada com prev/next + chevrons + ellipsis.
 *
 * Estrutura:
 *   <nav class="nds-pagination" aria-label="Pagination">
 *     <ul class="nds-pagination-list">
 *       <li><a class="nds-pagination-link nds-pagination-icon">‹</a></li>
 *       <li><a class="nds-pagination-link" aria-current="page">1</a></li>
 *       <li><a class="nds-pagination-link">2</a></li>
 *       <li><span class="nds-pagination-ellipsis">…</span></li>
 *       <li><a class="nds-pagination-link nds-pagination-icon">›</a></li>
 *     </ul>
 *   </nav>
 *
 * Tokens: --accent, --accent-foreground, --ring, --radius, --spacing-*
 */

.nds-pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-inline: auto;
}

/* ── List ────────────────────────────────────────────────────────────────── */
.nds-pagination-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-1);                        /* 4px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.nds-pagination-list > li {
  list-style: none;
}

/* ── Link (item numérico) ────────────────────────────────────────────────── */
.nds-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);

  height: var(--spacing-9, 2.25rem);            /* 36px */
  padding-inline: var(--spacing-4);             /* 16px */
  padding-block: var(--spacing-2);              /* 8px */

  background: transparent;
  border: 0;
  border-radius: var(--radius, 0.5rem);
  font-family: inherit;
  font-size: 0.875rem;                          /* 14px */
  font-weight: var(--font-weight-medium, 500);
  color: hsl(var(--foreground));
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-pagination-link:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nds-pagination-link:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}

/* Página atual — não navegável */
.nds-pagination-link[aria-current="page"] {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  pointer-events: none;
}

/* Variante icon (prev/next chevrons) — quadrado */
.nds-pagination-link.nds-pagination-icon {
  width: var(--spacing-9, 2.25rem);             /* 36×36 */
  padding-inline: 0;
}

.nds-pagination-link.nds-pagination-icon > svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
}

/* Estado desabilitado (prev em página 1, next em última) */
.nds-pagination-link[aria-disabled="true"],
.nds-pagination-link.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* ── Ellipsis (…) ────────────────────────────────────────────────────────── */
.nds-pagination-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-9, 2.25rem);
  height: var(--spacing-9, 2.25rem);
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

@media (prefers-reduced-motion: reduce) {
  .nds-pagination-link {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */




































/* ── nortear-design-system\src\styles\components\collapsible.css ── */
/*
 * ─── nds-collapsible ────────────────────────────────────────────────────────
 * Disclosure primitivo — trigger + content que alterna visibilidade.
 * Sem visual próprio: o consumidor estiliza trigger e content como quiser.
 *
 * Estrutura:
 *   <div class="nds-collapsible" data-slot="collapsible">
 *     <button data-slot="collapsible-trigger" data-state="open|closed"
 *             aria-controls="..." aria-expanded="true|false">…</button>
 *     <div data-slot="collapsible-content" data-state="open|closed"
 *          aria-hidden="true|false" hidden>…</div>
 *   </div>
 */

.nds-collapsible {
  width: 100%;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */





































/* ── nortear-design-system\src\styles\components\toggle.css ── */
/*
 * ─── nds-toggle ─────────────────────────────────────────────────────────────
 * Botão de dois estados (on/off) via aria-pressed + data-state="on|off".
 *
 *   <button class="nds-toggle" role="button" aria-pressed="false"
 *           data-state="off" data-size="default|sm|lg">
 *     Bold
 *   </button>
 *
 * Variantes: default (sem borda) e outline (com borda).
 * Tokens: --muted, --muted-foreground, --accent, --accent-foreground,
 *         --border, --input, --ring, --radius, --spacing-*
 */

.nds-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);

  height: var(--spacing-9, 2.25rem);             /* 36px default */
  padding-inline: var(--spacing-2);              /* 8px */
  min-width: var(--spacing-9, 2.25rem);

  background: transparent;
  border: 0;
  border-radius: var(--radius, 0.5rem);
  font-family: inherit;
  font-size: 0.875rem;                            /* 14px */
  font-weight: var(--font-weight-medium, 500);
  color: inherit;
  cursor: pointer;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-toggle:hover {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.nds-toggle:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}

.nds-toggle:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Pressionado (on) */
.nds-toggle[data-state="on"] {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* ── Sizes ───────────────────────────────────────────────────────────────── */
.nds-toggle[data-size="sm"] {
  height: var(--spacing-8);                      /* 32px */
  padding-inline: var(--spacing-1-5, 0.375rem);
  min-width: var(--spacing-8);
}

.nds-toggle[data-size="lg"] {
  height: var(--spacing-10, 2.5rem);             /* 40px */
  padding-inline: var(--spacing-2-5, 0.625rem);
  min-width: var(--spacing-10, 2.5rem);
}

/* ── Variante outline ────────────────────────────────────────────────────── */
.nds-toggle[data-variant="outline"] {
  border: 1px solid hsl(var(--input, var(--border)));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.05);
}

.nds-toggle[data-variant="outline"]:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* ── Ícones internos ─────────────────────────────────────────────────────── */
.nds-toggle > svg {
  width: var(--spacing-4);                       /* 16px */
  height: var(--spacing-4);
  flex-shrink: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nds-toggle {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */






































/* ── nortear-design-system\src\styles\components\toggle-group.css ── */
/*
 * ─── nds-toggle-group ───────────────────────────────────────────────────────
 * Grupo de toggles (single ou multiple). Variante outline emenda os toggles
 * em um único container com borda compartilhada.
 *
 *   <div class="nds-toggle-group" role="group" data-variant="default|outline">
 *     <button class="nds-toggle" …>B</button>
 *     <button class="nds-toggle" …>I</button>
 *     <button class="nds-toggle" …>U</button>
 *   </div>
 *
 * Tokens: --input, --border, --radius
 */

.nds-toggle-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);                          /* 4px entre toggles */
}

/* ── Variante outline (toggles emendados num único container) ────────────── */
.nds-toggle-group[data-variant="outline"] {
  gap: 0;
  border: 1px solid hsl(var(--input, var(--border)));
  border-radius: var(--radius, 0.5rem);
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.05);
  overflow: hidden;
}

/* Toggles internos do outline group perdem a borda própria */
.nds-toggle-group[data-variant="outline"] > .nds-toggle {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Divisor entre toggles do outline group */
.nds-toggle-group[data-variant="outline"] > .nds-toggle + .nds-toggle {
  border-left: 1px solid hsl(var(--input, var(--border)));
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */







































/* ── nortear-design-system\src\styles\components\tooltip.css ── */
/*
 * ─── nds-tooltip ────────────────────────────────────────────────────────────
 * Mensagem curta exibida ao hover/focus do trigger. Renderizada em portal
 * (body), posicionada absolutamente pelo JS.
 *
 *   <div class="nds-tooltip-content" role="tooltip" id="tooltip-1"
 *        style="top: …; left: …">Salvar alterações</div>
 *
 * Tokens: --primary (bg), --primary-foreground (fg), --radius-sm, --spacing-*
 */

.nds-tooltip-content {
  position: absolute;
  z-index: 50;

  padding-inline: var(--spacing-3, 0.75rem);    /* 12px */
  padding-block: var(--spacing-1-5, 0.375rem);  /* 6px */

  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 0.375rem;                       /* 6px */
  font-family: inherit;
  font-size: 0.75rem;                            /* 12px */
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1);
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */








































/* ── nortear-design-system\src\styles\components\popover.css ── */
/*
 * ─── nds-popover ────────────────────────────────────────────────────────────
 * Painel flutuante ancorado a um trigger, com conteúdo customizado.
 * Renderizado em portal (body), posicionado absolutamente pelo JS.
 *
 *   <div class="nds-popover-content" role="dialog" id="popover-1"
 *        style="top: …; left: …">
 *     [conteúdo customizado]
 *   </div>
 *
 * Tokens: --popover (bg), --popover-foreground (fg), --border, --radius,
 *         --spacing-*
 */

.nds-popover-content {
  position: absolute;
  z-index: 50;
  width: 18rem;                                  /* 288px — w-72 */

  padding: var(--spacing-4);                     /* 16px */

  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem);
  box-shadow:
    0 10px 15px -3px hsl(0 0% 0% / 0.1),
    0 4px 6px -4px hsl(0 0% 0% / 0.1);
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */









































/* ── nortear-design-system\src\styles\components\hover-card.css ── */
/*
 * ─── nds-hover-card ─────────────────────────────────────────────────────────
 * Painel ancorado exibido ao hover — útil para preview de links ou perfis.
 * Render em portal (body). Mantém aberto enquanto o mouse está sobre o painel
 * (hide com pequeno delay).
 *
 *   <div class="nds-hover-card-content" role="dialog" id="hover-card-1"
 *        style="top: …; left: …">
 *     [conteúdo customizado]
 *   </div>
 *
 * Difere do popover apenas pela largura padrão (20rem ao invés de 18rem).
 *
 * Tokens: --popover (bg), --popover-foreground (fg), --border, --radius
 */

.nds-hover-card-content {
  position: absolute;
  z-index: 50;
  width: 20rem;                                  /* 320px — w-80 */

  padding: var(--spacing-4);                     /* 16px */

  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem);
  box-shadow:
    0 10px 15px -3px hsl(0 0% 0% / 0.1),
    0 4px 6px -4px hsl(0 0% 0% / 0.1);
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */










































/* ── nortear-design-system\src\styles\components\dropdown-menu.css ── */
/*
 * ─── nds-dropdown-menu ──────────────────────────────────────────────────────
 * Menu suspenso disparado por um trigger. Renderizado em portal (body) com
 * navegação por teclado (Arrow/Home/End/Escape) e foco automático no primeiro
 * item ao abrir.
 *
 *   <ul class="nds-dropdown-menu-content" role="menu" id="dropdown-menu-1">
 *     <li class="nds-dropdown-menu-label">Conta</li>
 *     <li class="nds-dropdown-menu-item" role="menuitem">Perfil</li>
 *     <li class="nds-dropdown-menu-separator" role="separator"></li>
 *     <li class="nds-dropdown-menu-item" role="menuitem">Sair</li>
 *   </ul>
 *
 * Tokens: --popover, --popover-foreground, --accent, --accent-foreground,
 *         --muted, --muted-foreground, --border, --radius, --radius-sm
 */

.nds-dropdown-menu-content {
  position: absolute;
  z-index: 50;
  min-width: 8rem;                                /* 128px */

  margin: 0;
  padding: var(--spacing-1, 0.25rem);             /* 4px interno */
  list-style: none;
  overflow: hidden;

  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem);
  box-shadow:
    0 10px 15px -3px hsl(0 0% 0% / 0.1),
    0 4px 6px -4px hsl(0 0% 0% / 0.1);
}

/* ── Item ────────────────────────────────────────────────────────────────── */
.nds-dropdown-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);

  padding-inline: var(--spacing-2);               /* 8px */
  padding-block: var(--spacing-1-5, 0.375rem);    /* 6px */

  border-radius: 0.25rem;                          /* 4px — radius-sm */
  font-size: 0.875rem;                             /* 14px */
  color: inherit;
  cursor: default;
  user-select: none;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-dropdown-menu-item:focus,
.nds-dropdown-menu-item:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nds-dropdown-menu-item[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

/* ── Label (não-interativo) ──────────────────────────────────────────────── */
.nds-dropdown-menu-label {
  padding-inline: var(--spacing-2);
  padding-block: var(--spacing-1-5, 0.375rem);
  font-size: 0.75rem;                              /* 12px */
  font-weight: var(--font-weight-semibold, 600);
  color: hsl(var(--muted-foreground));
}

/* ── Separator ───────────────────────────────────────────────────────────── */
.nds-dropdown-menu-separator {
  height: 1px;
  margin-inline: calc(var(--spacing-1) * -1);     /* -4px (rasga até as bordas) */
  margin-block: var(--spacing-1);                  /* 4px */
  background-color: hsl(var(--muted));
}

@media (prefers-reduced-motion: reduce) {
  .nds-dropdown-menu-item {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */











































/* ── nortear-design-system\src\styles\components\dialog.css ── */
/*
 * ─── nds-dialog ─────────────────────────────────────────────────────────────
 * Modal centralizado com overlay translúcido + painel arredondado.
 * Render via portal (body). Estado via data-state="open|closed".
 *
 * Estrutura:
 *   <div class="nds-dialog-overlay" data-state="open" />
 *   <div class="nds-dialog-content" role="dialog" aria-modal="true" data-state="open">
 *     <div class="nds-dialog-header">
 *       <h2 class="nds-dialog-title">Título</h2>
 *       <p  class="nds-dialog-description">Descrição</p>
 *     </div>
 *     <div class="nds-dialog-body">[conteúdo]</div>
 *     <div class="nds-dialog-footer">[ações]</div>
 *     <button class="nds-dialog-close" aria-label="Close">✕</button>
 *   </div>
 *
 * Tokens: --popover (bg), --popover-foreground (fg), --foreground (ring),
 *         --muted (footer bg), --border, --radius-xl, --spacing-*
 */

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.nds-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  isolation: isolate;
  background-color: hsl(0 0% 0% / 0.1);
  animation: nds-dialog-fade-in var(--duration-fast) var(--ease-entrance);
}

@supports (backdrop-filter: blur(4px)) {
  .nds-dialog-overlay {
    backdrop-filter: blur(4px);
  }
}

.nds-dialog-overlay[data-state="closed"] {
  animation: nds-dialog-fade-out var(--duration-fast) var(--ease-exit);
}

/* ── Content panel ───────────────────────────────────────────────────────── */
.nds-dialog-content {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;
  translate: -50% -50%;

  display: grid;
  gap: var(--spacing-4);                          /* 16px */

  width: calc(100% - var(--spacing-8));
  max-width: 32rem;                                /* 512px — lg */

  padding: var(--spacing-4);                       /* 16px */

  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.1);
  border-radius: 0;
  animation: nds-dialog-zoom-in var(--duration-fast) var(--ease-entrance);
}

@media (min-width: 40rem) {
  .nds-dialog-content {
    border-radius: 0.75rem;                        /* 12px — rounded-xl */
  }
}

.nds-dialog-content[data-state="closed"] {
  animation: nds-dialog-zoom-out var(--duration-fast) var(--ease-exit);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.nds-dialog-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1-5, 0.375rem);              /* 6px */
  text-align: center;
}

@media (min-width: 40rem) {
  .nds-dialog-header {
    text-align: left;
  }
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.nds-dialog-title {
  margin: 0;
  font-size: 1rem;                                 /* 16px — text-base */
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  color: hsl(var(--foreground));
}

/* ── Description ─────────────────────────────────────────────────────────── */
.nds-dialog-description {
  margin: 0;
  font-size: 0.875rem;                             /* 14px */
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.nds-dialog-body {
  /* sem estilos próprios — o consumidor define padding/spacing do conteúdo */
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.nds-dialog-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--spacing-2);                           /* 8px */

  margin-inline: calc(var(--spacing-4) * -1);     /* -16px — rasga até as bordas */
  margin-bottom: calc(var(--spacing-4) * -1);
  padding: var(--spacing-4);

  background-color: hsl(var(--muted) / 0.5);
  border-top: 1px solid hsl(var(--border));
  border-end-start-radius: 0.75rem;
  border-end-end-radius: 0.75rem;
}

@media (min-width: 40rem) {
  .nds-dialog-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* ── Close button ────────────────────────────────────────────────────────── */
.nds-dialog-close {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);

  background: transparent;
  border: 0;
  border-radius: 0.25rem;                          /* 4px — radius-sm */
  padding: var(--spacing-1);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-dialog-close:hover {
  opacity: 1;
}

.nds-dialog-close:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}

.nds-dialog-close > svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
  color: currentColor;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes nds-dialog-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nds-dialog-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes nds-dialog-zoom-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes nds-dialog-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .nds-dialog-overlay,
  .nds-dialog-content {
    animation: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */












































/* ── nortear-design-system\src\styles\components\sheet.css ── */
/*
 * ─── nds-sheet ──────────────────────────────────────────────────────────────
 * Painel deslizante a partir de uma das bordas (top/right/bottom/left).
 * Render via portal. Drawer reusa o sheet com side="bottom".
 *
 * Estrutura:
 *   <div class="nds-sheet-overlay" />
 *   <div class="nds-sheet-content" data-side="right" role="dialog" aria-modal="true">
 *     <div class="nds-sheet-header">…</div>
 *     <div class="nds-sheet-body">…</div>
 *     <div class="nds-sheet-footer">…</div>
 *     <button class="nds-sheet-close" aria-label="Close">…</button>
 *   </div>
 *
 * Tokens: --background, --foreground, --muted-foreground, --border,
 *         --ring, --spacing-*
 */

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.nds-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: hsl(0 0% 0% / 0.8);
  animation: nds-sheet-fade-in var(--duration-base) var(--ease-entrance);
}

/* ── Content panel ───────────────────────────────────────────────────────── */
.nds-sheet-content {
  position: fixed;
  z-index: 50;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);                          /* 16px */
  padding: var(--spacing-6);                       /* 24px */

  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow:
    0 25px 50px -12px hsl(0 0% 0% / 0.25),
    0 0 0 1px hsl(0 0% 0% / 0.05);
}

/* ── Sides ───────────────────────────────────────────────────────────────── */
.nds-sheet-content[data-side="right"] {
  inset-block: 0;
  right: 0;
  height: 100%;
  width: 75%;
  max-width: 24rem;                                /* 384px — sm:max-w-sm */
  border-left: 1px solid hsl(var(--border));
  animation: nds-sheet-slide-in-right var(--duration-base) var(--ease-entrance);
}

.nds-sheet-content[data-side="left"] {
  inset-block: 0;
  left: 0;
  height: 100%;
  width: 75%;
  max-width: 24rem;
  border-right: 1px solid hsl(var(--border));
  animation: nds-sheet-slide-in-left var(--duration-base) var(--ease-entrance);
}

.nds-sheet-content[data-side="top"] {
  inset-inline: 0;
  top: 0;
  height: auto;
  border-bottom: 1px solid hsl(var(--border));
  animation: nds-sheet-slide-in-top var(--duration-base) var(--ease-entrance);
}

.nds-sheet-content[data-side="bottom"] {
  inset-inline: 0;
  bottom: 0;
  height: auto;
  border-top: 1px solid hsl(var(--border));
  animation: nds-sheet-slide-in-bottom var(--duration-base) var(--ease-entrance);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.nds-sheet-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1-5, 0.375rem);
  margin-bottom: var(--spacing-4);
  text-align: center;
}

@media (min-width: 40rem) {
  .nds-sheet-header {
    text-align: left;
  }
}

.nds-sheet-title {
  margin: 0;
  font-size: 1.125rem;                             /* 18px — text-lg */
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}

.nds-sheet-description {
  margin: 0;
  font-size: 0.875rem;                             /* 14px */
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.nds-sheet-body {
  flex: 1;
  overflow: auto;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.nds-sheet-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

@media (min-width: 40rem) {
  .nds-sheet-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* ── Close button ────────────────────────────────────────────────────────── */
.nds-sheet-close {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);

  background: transparent;
  border: 0;
  border-radius: 0.25rem;
  padding: var(--spacing-1);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-sheet-close:hover {
  opacity: 1;
}

.nds-sheet-close:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}

.nds-sheet-close > svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
  color: currentColor;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes nds-sheet-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nds-sheet-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes nds-sheet-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes nds-sheet-slide-in-top {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes nds-sheet-slide-in-bottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nds-sheet-overlay,
  .nds-sheet-content {
    animation: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */













































/* ── nortear-design-system\src\styles\components\table.css ── */
/*
 * ─── nds-table ──────────────────────────────────────────────────────────────
 * Tabela de dados acessível.
 *
 *   <div class="nds-table-wrapper">
 *     <table class="nds-table">
 *       <thead>
 *         <tr>
 *           <th>Coluna</th>
 *         </tr>
 *       </thead>
 *       <tbody>
 *         <tr>
 *           <td>Valor</td>
 *         </tr>
 *       </tbody>
 *     </table>
 *   </div>
 *
 * Tokens: --foreground, --muted-foreground, --muted, --border, --spacing-*
 */

.nds-table-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

.nds-table {
  width: 100%;
  caption-side: bottom;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 0.875rem;                            /* 14px */
}

/* Caption — alinha legenda da tabela */
.nds-table > caption {
  margin-top: var(--spacing-4);                   /* 16px */
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

/* ── Linhas ──────────────────────────────────────────────────────────────── */
.nds-table thead tr,
.nds-table tbody tr,
.nds-table tfoot tr {
  border-bottom: 1px solid hsl(var(--border));
}

.nds-table tbody tr:last-child {
  border-bottom: 0;
}

.nds-table tbody tr:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.nds-table tbody tr[data-state="selected"] {
  background-color: hsl(var(--muted));
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.nds-table th {
  height: var(--spacing-10, 2.5rem);              /* 40px */
  padding-inline: var(--spacing-2);               /* 8px */
  text-align: left;
  vertical-align: middle;
  font-weight: var(--font-weight-medium, 500);
  color: hsl(var(--muted-foreground));
  white-space: normal;
}

/* ── Cells ───────────────────────────────────────────────────────────────── */
.nds-table td {
  padding: var(--spacing-2);                       /* 8px */
  vertical-align: middle;
  white-space: normal;
  color: hsl(var(--foreground));
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.nds-table tfoot tr {
  background-color: hsl(var(--muted) / 0.5);
  font-weight: var(--font-weight-medium, 500);
}

.nds-table tfoot tr:last-child {
  border-bottom: 0;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */














































/* ── nortear-design-system\src\styles\components\data-table.css ── */
/*
 * ─── nds-data-table ─────────────────────────────────────────────────────────
 * DataTable: tabela avançada sobre TanStack Table v8.
 * Reusa .nds-table como base; adiciona toolbar, filtros, paginação, resize,
 * pin e virtualização. Todos os valores seguem o grid de 8.
 *
 * Tokens: --background, --foreground, --muted, --muted-foreground, --border,
 *         --input, --primary, --ring, --radius, --spacing-*
 */

.nds-data-table {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: 100%;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.nds-data-table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.nds-data-table-search {
  position: relative;
  flex: 1;
  max-width: 24rem;
  min-width: 12rem;
}

.nds-data-table-search > svg {
  position: absolute;
  left: var(--spacing-2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.nds-data-table-search-input {
  padding-left: var(--spacing-8, 2rem);
  width: 100%;
}

.nds-data-table-columns-wrap {
  position: relative;
  margin-left: auto;
}

.nds-data-table-columns-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

.nds-data-table-columns-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--spacing-1, 0.25rem));
  z-index: 50;
  min-width: 16rem;
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1);
  padding: var(--spacing-2);
}

.nds-data-table-columns-menu-header {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: var(--spacing-1);
}

.nds-data-table-columns-menu-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm, 0.25rem);
}

.nds-data-table-columns-menu-row:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.nds-data-table-columns-menu-label {
  flex: 1;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}

.nds-data-table-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-6, 1.5rem);
  height: var(--spacing-6, 1.5rem);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm, 0.25rem);
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.nds-data-table-pin-btn:hover {
  background-color: hsl(var(--muted));
}

.nds-data-table-pin-btn.is-active {
  color: hsl(var(--primary));
}

/* ── Scroll container ──────────────────────────────────────────────────── */
.nds-data-table-scroll {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem);
}

.nds-data-table-table-wrapper {
  overflow: visible;
}

.nds-table-fixed {
  table-layout: fixed;
}

/* ── Header / cells ────────────────────────────────────────────────────── */
.nds-data-table-th {
  position: relative;
  height: var(--spacing-10, 2.5rem);
  padding-inline: var(--spacing-2);
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.nds-data-table-th-inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-1, 0.25rem);
}

.nds-data-table-th-label {
  flex: 1;
}

.nds-data-table-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  flex: 1;
  background: transparent;
  border: 0;
  padding: var(--spacing-1) var(--spacing-1);
  font: inherit;
  color: inherit;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm, 0.25rem);
}

.nds-data-table-sort-btn:hover {
  color: hsl(var(--primary));
}

.nds-data-table-sort-btn:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.5);
  outline-offset: 2px;
}

.nds-data-table-td {
  padding: var(--spacing-2);
  vertical-align: middle;
  color: hsl(var(--foreground));
}

.nds-data-table-tr[data-state="selected"] {
  background-color: hsl(var(--muted));
}

.nds-data-table-tr:hover {
  background-color: hsl(var(--muted) / 0.5);
}

/* ── Filter row ────────────────────────────────────────────────────────── */
.nds-data-table-filter-row > th {
  padding: var(--spacing-1) var(--spacing-2);
}

.nds-data-table-filter-input,
.nds-data-table-filter-select {
  width: 100%;
  height: var(--spacing-8, 2rem);
  font-size: 0.75rem;
  padding-inline: var(--spacing-2);
  border: 1px solid hsl(var(--input));
  background-color: transparent;
  border-radius: var(--radius-sm, 0.25rem);
  color: hsl(var(--foreground));
}

.nds-data-table-filter-input:focus-visible,
.nds-data-table-filter-select:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.5);
  outline-offset: 2px;
}

/* ── Resize handle ─────────────────────────────────────────────────────── */
.nds-data-table-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 4px;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

.nds-data-table-resize-handle:hover,
.nds-data-table-resize-handle.is-resizing {
  background-color: hsl(var(--primary) / 0.5);
}

/* ── Editable cell ─────────────────────────────────────────────────────── */
.nds-data-table-editable {
  display: block;
  width: 100%;
}

.nds-data-table-edit-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--spacing-1);
  font: inherit;
  color: inherit;
  border-radius: var(--radius-sm, 0.25rem);
  cursor: pointer;
}

.nds-data-table-edit-btn:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.nds-data-table-edit-btn:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.5);
  outline-offset: 2px;
}

.nds-data-table-edit-input {
  width: 100%;
  height: var(--spacing-8, 2rem);
  font-size: 0.875rem;
  padding-inline: var(--spacing-2);
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.nds-data-table-empty {
  height: var(--spacing-24, 6rem);
  text-align: center;
  color: hsl(var(--muted-foreground));
}

/* ── Pagination ────────────────────────────────────────────────────────── */
.nds-data-table-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  font-size: 0.875rem;
}

.nds-data-table-pagination-count {
  color: hsl(var(--muted-foreground));
}

.nds-data-table-pagination-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
}

.nds-data-table-page-size {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.nds-data-table-page-size-select {
  height: var(--spacing-8, 2rem);
  padding-inline: var(--spacing-2);
  border: 1px solid hsl(var(--input));
  background-color: transparent;
  border-radius: var(--radius-sm, 0.25rem);
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}

.nds-data-table-page-size-select:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.5);
  outline-offset: 2px;
}

.nds-data-table-pagination-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-1, 0.25rem);
}

/* ── Icon classes used inside data-table SVGs ─────────────────────────── */
.nds-dt-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.nds-dt-icon-muted {
  color: hsl(var(--muted-foreground));
}

.nds-dt-icon-grip {
  cursor: grab;
  color: hsl(var(--muted-foreground) / 0.6);
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */















































/* ── nortear-design-system\src\styles\components\select.css ── */
/*
 * ─── nds-select ─────────────────────────────────────────────────────────────
 * <select> nativo estilizado com aparência consistente. Sem altura fixa
 * (WCAG 1.4.4) — usa padding-block + line-height.
 *
 *   <select class="nds-select">
 *     <option value="">Selecione…</option>
 *     <option value="a">Opção A</option>
 *   </select>
 *
 * Tokens: --input (border), --background, --foreground, --muted-foreground,
 *         --ring, --destructive, --radius, --spacing-*
 */

.nds-select {
  display: block;
  width: 100%;

  padding-block: var(--spacing-2);                /* 8px */
  padding-inline: var(--spacing-3, 0.75rem);      /* 12px */
  padding-inline-end: var(--spacing-8);           /* 32px — espaço pro chevron */

  font-family: inherit;
  font-size: 0.875rem;                            /* 14px */
  line-height: 1.5;
  color: hsl(var(--foreground));

  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input, var(--border)));
  border-radius: var(--radius, 0.5rem);

  /* Chevron SVG inline (cor controlada via stroke=currentColor) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2-5, 0.625rem) center;
  background-size: 1rem;

  /* Esconde o chevron padrão do browser */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
  outline: 0;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.nds-select:hover:not(:disabled):not([aria-invalid="true"]) {
  border-color: hsl(var(--ring) / 0.4);
}

.nds-select:focus-visible {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.3);
}

.nds-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: hsl(var(--muted) / 0.3);
}

.nds-select[aria-invalid="true"] {
  border-color: hsl(var(--destructive));
}

.nds-select[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.3);
}

/* Opções do select — limitado pelo browser, mas algumas propriedades funcionam */
.nds-select > option {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.nds-select > option:disabled {
  color: hsl(var(--muted-foreground));
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */
















































/* ── nortear-design-system\src\styles\components\slider.css ── */
/*
 * ─── nds-slider ─────────────────────────────────────────────────────────────
 * Controle deslizante (input range estilizado). O <input type="range"> nativo
 * fica invisível sobreposto à track visual, capturando toda a interação.
 *
 *   <div class="nds-slider">
 *     <div class="nds-slider-track">
 *       <div class="nds-slider-range" style="width: 40%"></div>
 *       <span class="nds-slider-thumb" style="left: calc(40% - 0.5rem)"></span>
 *       <input type="range" />
 *     </div>
 *   </div>
 *
 * Tokens: --primary (range fill), --primary/0.2 (track), --primary/0.5 (thumb border),
 *         --background (thumb bg), --ring (focus), --spacing-*
 */

.nds-slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

/* ── Track (barra cinza) ─────────────────────────────────────────────────── */
.nds-slider-track {
  position: relative;
  flex-grow: 1;
  height: 0.375rem;                               /* 6px — h-1.5 */
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background-color: hsl(var(--primary) / 0.2);
}

/* ── Range (barra preenchida) ────────────────────────────────────────────── */
.nds-slider-range {
  position: absolute;
  height: 100%;
  background-color: hsl(var(--primary));
  border-radius: 9999px;
}

/* ── Thumb (alça arrastável) ─────────────────────────────────────────────── */
.nds-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  display: block;
  width: var(--spacing-4);                        /* 16px */
  height: var(--spacing-4);

  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--primary) / 0.5);
  border-radius: 9999px;
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.1);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

/* Focus visual: aplicado quando o native input está focado */
.nds-slider:has(input:focus-visible) .nds-slider-thumb {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.3);
}

/* Disabled */
.nds-slider:has(input:disabled) {
  pointer-events: none;
  opacity: 0.5;
}

/* ── Native input — invisível, sobreposto à track ────────────────────────── */
.nds-slider > .nds-slider-track > input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.nds-slider > .nds-slider-track > input[type="range"]:disabled {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .nds-slider-thumb {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */

















































/* ── nortear-design-system\src\styles\components\command.css ── */
/*
 * ─── nds-command ────────────────────────────────────────────────────────────
 * Paleta de comando (search + lista filtrada por grupos). Geralmente
 * apresentada dentro de um Dialog, mas funciona standalone.
 *
 *   <div class="nds-command" data-slot="command">
 *     <div class="nds-command-input-wrapper">
 *       <svg>…</svg>
 *       <input class="nds-command-input" type="text" role="combobox" />
 *     </div>
 *     <div class="nds-command-list" role="listbox">
 *       <div class="nds-command-group">
 *         <div class="nds-command-group-heading">Categoria</div>
 *         <div class="nds-command-item" role="option" aria-selected="false">…</div>
 *       </div>
 *       <p class="nds-command-empty">No results found.</p>
 *     </div>
 *   </div>
 *
 * Tokens: --popover, --popover-foreground, --foreground, --muted-foreground,
 *         --accent, --accent-foreground, --border, --radius, --spacing-*
 */

.nds-command {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border-radius: var(--radius, 0.5rem);
}

/* ── Input wrapper (com ícone de busca) ──────────────────────────────────── */
.nds-command-input-wrapper {
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-3, 0.75rem);
  border-bottom: 1px solid hsl(var(--border));
}

.nds-command-input-wrapper > svg {
  width: var(--spacing-4);                        /* 16px */
  height: var(--spacing-4);
  margin-right: var(--spacing-2);
  flex-shrink: 0;
  opacity: 0.5;
}

/* ── Input ───────────────────────────────────────────────────────────────── */
.nds-command-input {
  display: flex;
  width: 100%;
  height: 2.5rem;                                  /* 40px */
  padding-block: var(--spacing-3, 0.75rem);
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 0.875rem;                             /* 14px */
  color: inherit;
  outline: 0;
}

.nds-command-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.nds-command-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── List ────────────────────────────────────────────────────────────────── */
.nds-command-list {
  max-height: 18.75rem;                            /* 300px */
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Group ───────────────────────────────────────────────────────────────── */
.nds-command-group {
  overflow: hidden;
  padding: var(--spacing-1, 0.25rem);
  color: hsl(var(--foreground));
}

.nds-command-group-heading {
  padding-inline: var(--spacing-2);
  padding-block: var(--spacing-1-5, 0.375rem);
  font-size: 0.75rem;                              /* 12px */
  font-weight: var(--font-weight-medium, 500);
  color: hsl(var(--muted-foreground));
}

/* ── Item ────────────────────────────────────────────────────────────────── */
.nds-command-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);

  padding-inline: var(--spacing-2);
  padding-block: var(--spacing-1-5, 0.375rem);

  border-radius: 0.25rem;                          /* 4px */
  font-size: 0.875rem;                             /* 14px */
  cursor: pointer;
  user-select: none;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-command-item:hover,
.nds-command-item[aria-selected="true"] {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nds-command-item[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Empty (sem resultados) ──────────────────────────────────────────────── */
.nds-command-empty {
  padding-block: var(--spacing-6);                 /* 24px */
  text-align: center;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

@media (prefers-reduced-motion: reduce) {
  .nds-command-item {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */


















































/* ── nortear-design-system\src\styles\components\menubar.css ── */
/*
 * ─── nds-menubar ────────────────────────────────────────────────────────────
 * Barra horizontal de menus suspensos (ex.: macOS / aplicativos desktop).
 * Cada trigger abre um panel ancorado abaixo.
 *
 *   <div class="nds-menubar" role="menubar">
 *     <div class="nds-menubar-menu">
 *       <button class="nds-menubar-trigger" role="menuitem"
 *               aria-haspopup="true" aria-expanded="false" data-state="closed">File</button>
 *       <div class="nds-menubar-panel" role="menu">
 *         <div class="nds-menubar-item" role="menuitem">
 *           <span>New</span>
 *           <span class="nds-menubar-shortcut">⌘N</span>
 *         </div>
 *         <div class="nds-menubar-separator" role="separator"></div>
 *       </div>
 *     </div>
 *   </div>
 *
 * Tokens: --background, --popover, --popover-foreground, --accent,
 *         --accent-foreground, --muted, --muted-foreground, --border, --radius
 */

.nds-menubar {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);                          /* 4px */

  height: var(--spacing-9, 2.25rem);              /* 36px */
  padding: var(--spacing-1);

  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem);
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.05);
}

/* ── Menu (wrapper de cada trigger + panel) ──────────────────────────────── */
.nds-menubar-menu {
  position: relative;
}

/* ── Trigger ─────────────────────────────────────────────────────────────── */
.nds-menubar-trigger {
  display: flex;
  align-items: center;

  padding-inline: var(--spacing-3, 0.75rem);
  padding-block: var(--spacing-1);

  background: transparent;
  border: 0;
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  color: inherit;
  cursor: default;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-menubar-trigger:focus,
.nds-menubar-trigger:hover,
.nds-menubar-trigger[data-state="open"] {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.nds-menubar-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  margin-top: var(--spacing-1);

  min-width: 8rem;
  padding: var(--spacing-1);
  overflow: hidden;

  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem);
  box-shadow:
    0 10px 15px -3px hsl(0 0% 0% / 0.1),
    0 4px 6px -4px hsl(0 0% 0% / 0.1);
}

/* ── Item ────────────────────────────────────────────────────────────────── */
.nds-menubar-item {
  position: relative;
  display: flex;
  align-items: center;

  padding-inline: var(--spacing-2);
  padding-block: var(--spacing-1-5, 0.375rem);

  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-menubar-item:focus,
.nds-menubar-item:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nds-menubar-item[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

/* ── Shortcut (atalho de teclado à direita) ──────────────────────────────── */
.nds-menubar-shortcut {
  margin-left: auto;
  padding-left: var(--spacing-3);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground));
  opacity: 0.6;
}

/* ── Label (não-interativo) ──────────────────────────────────────────────── */
.nds-menubar-label {
  padding-inline: var(--spacing-2);
  padding-block: var(--spacing-1-5, 0.375rem);
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold, 600);
  color: hsl(var(--muted-foreground));
}

/* ── Separator ───────────────────────────────────────────────────────────── */
.nds-menubar-separator {
  height: 1px;
  margin-inline: calc(var(--spacing-1) * -1);
  margin-block: var(--spacing-1);
  background-color: hsl(var(--muted));
}

@media (prefers-reduced-motion: reduce) {
  .nds-menubar-trigger,
  .nds-menubar-item {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */



















































/* ── nortear-design-system\src\styles\components\navigation-menu.css ── */
/*
 * ─── nds-navigation-menu ────────────────────────────────────────────────────
 * Navegação principal com links e dropdowns aninhados (estilo header de site).
 *
 *   <nav class="nds-navigation-menu" aria-label="Main navigation">
 *     <ul class="nds-navigation-menu-list" role="menubar">
 *       <li><a class="nds-navigation-menu-link" href="…">Home</a></li>
 *       <li>
 *         <div class="nds-navigation-menu-item">
 *           <button class="nds-navigation-menu-trigger" data-state="closed"
 *                   aria-haspopup="true" aria-expanded="false">
 *             Products <svg class="nds-navigation-menu-chevron">…</svg>
 *           </button>
 *           <div class="nds-navigation-menu-content" role="menu" hidden>
 *             <a class="nds-navigation-menu-child" href="…">
 *               <div>Label</div>
 *               <p>Description</p>
 *             </a>
 *           </div>
 *         </div>
 *       </li>
 *     </ul>
 *   </nav>
 *
 * Tokens: --background, --popover, --popover-foreground, --accent,
 *         --accent-foreground, --muted-foreground, --border, --radius, --spacing-*
 */

.nds-navigation-menu {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1;
  max-width: max-content;
  align-items: center;
  justify-content: center;
}

/* ── List ────────────────────────────────────────────────────────────────── */
.nds-navigation-menu-list {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);

  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Item (wrapper de trigger + content) ─────────────────────────────────── */
.nds-navigation-menu-item {
  position: relative;
}

/* ── Trigger / Link (sem submenu) ────────────────────────────────────────── */
.nds-navigation-menu-trigger,
.nds-navigation-menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--spacing-9, 2.25rem);              /* 36px */
  padding-inline: var(--spacing-4);                /* 16px */
  padding-block: var(--spacing-2);                 /* 8px */

  background-color: hsl(var(--background));
  border: 0;
  border-radius: var(--radius, 0.5rem);
  font-family: inherit;
  font-size: 0.875rem;                             /* 14px */
  font-weight: var(--font-weight-medium, 500);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-navigation-menu-trigger:hover,
.nds-navigation-menu-trigger:focus,
.nds-navigation-menu-link:hover,
.nds-navigation-menu-link:focus {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nds-navigation-menu-trigger:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* ── Chevron (rotaciona no estado open) ──────────────────────────────────── */
.nds-navigation-menu-chevron {
  width: 0.75rem;                                  /* 12px */
  height: 0.75rem;
  margin-left: var(--spacing-1);
  display: inline-block;
  transition: transform var(--duration-base);
}

.nds-navigation-menu-trigger[data-state="open"] .nds-navigation-menu-chevron {
  transform: rotate(180deg);
}

/* ── Content (panel dropdown) ────────────────────────────────────────────── */
.nds-navigation-menu-content {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  margin-top: var(--spacing-1-5, 0.375rem);        /* 6px */

  min-width: 11.25rem;                             /* 180px */
  padding: var(--spacing-2);

  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem);
  box-shadow:
    0 10px 15px -3px hsl(0 0% 0% / 0.1),
    0 4px 6px -4px hsl(0 0% 0% / 0.1);
}

/* ── Child link (item dentro do dropdown) ────────────────────────────────── */
.nds-navigation-menu-child {
  display: block;
  padding: var(--spacing-3, 0.75rem);              /* 12px */

  border-radius: 0.375rem;                          /* 6px */
  color: inherit;
  text-decoration: none;
  outline: 0;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-navigation-menu-child:hover,
.nds-navigation-menu-child:focus {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nds-navigation-menu-child-label {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
}

.nds-navigation-menu-child-description {
  margin: var(--spacing-1) 0 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: hsl(var(--muted-foreground));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .nds-navigation-menu-trigger,
  .nds-navigation-menu-link,
  .nds-navigation-menu-chevron,
  .nds-navigation-menu-child {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */




















































/* ── nortear-design-system\src\styles\components\scroll-area.css ── */
/*
 * ─── nds-scroll-area ────────────────────────────────────────────────────────
 * Container com altura/largura fixa que rola o conteúdo interno via scrollbar
 * nativo do browser. Sem scrollbar customizado (padrão consistente com OS).
 *
 *   <div class="nds-scroll-area" style="height: 200px">
 *     <div class="nds-scroll-area-viewport">[conteúdo longo]</div>
 *   </div>
 */

.nds-scroll-area {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

.nds-scroll-area-viewport {
  width: 100%;
  height: 100%;
  overflow: auto;
  border-radius: inherit;
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */





















































/* ── nortear-design-system\src\styles\components\resizable.css ── */
/*
 * ─── nds-resizable ──────────────────────────────────────────────────────────
 * Containers redimensionáveis com handles arrastáveis entre painéis.
 *
 *   <div class="nds-resizable" data-direction="horizontal|vertical">
 *     <div class="nds-resizable-panel">…</div>
 *     <div class="nds-resizable-handle" role="separator" tabindex="0">
 *       <div class="nds-resizable-grip"><svg>…</svg></div>
 *     </div>
 *     <div class="nds-resizable-panel">…</div>
 *   </div>
 *
 * Tokens: --border, --ring, --background, --radius-sm
 */

.nds-resizable {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nds-resizable[data-direction="horizontal"] { flex-direction: row;    }
.nds-resizable[data-direction="vertical"]   { flex-direction: column; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.nds-resizable-panel {
  flex-shrink: 0;
  overflow: auto;
}

/* ── Handle (linha arrastável) ───────────────────────────────────────────── */
.nds-resizable-handle {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  background-color: hsl(var(--border));
  outline: 0;
  transition: background-color var(--duration-fast);
}

.nds-resizable[data-direction="horizontal"] > .nds-resizable-handle {
  width: 1px;
  cursor: col-resize;
}

.nds-resizable[data-direction="vertical"] > .nds-resizable-handle {
  height: 1px;
  cursor: row-resize;
}

.nds-resizable-handle:hover {
  background-color: hsl(var(--ring));
}

.nds-resizable-handle:focus-visible {
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

/* ── Grip (alça com pontos) ──────────────────────────────────────────────── */
.nds-resizable-grip {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.75rem;                                  /* 12px */
  height: var(--spacing-4);                        /* 16px */

  background-color: hsl(var(--border));
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
}

.nds-resizable[data-direction="vertical"] > .nds-resizable-handle > .nds-resizable-grip {
  transform: rotate(90deg);
}

.nds-resizable-grip > svg {
  width: 0.625rem;                                 /* 10px */
  height: 0.625rem;
}

@media (prefers-reduced-motion: reduce) {
  .nds-resizable-handle {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */






















































/* ── nortear-design-system\src\styles\components\input-otp.css ── */
/*
 * ─── nds-input-otp ──────────────────────────────────────────────────────────
 * Input de código OTP (One-Time Password) com slots individuais conectados.
 *
 *   <div class="nds-input-otp" role="group" aria-label="One-time password input">
 *     <input class="nds-input-otp-slot" type="text" inputmode="numeric" maxlength="1" />
 *     <input class="nds-input-otp-slot" type="text" inputmode="numeric" maxlength="1" />
 *     <div class="nds-input-otp-separator">—</div>
 *     <input class="nds-input-otp-slot" type="text" inputmode="numeric" maxlength="1" />
 *     <input class="nds-input-otp-slot" type="text" inputmode="numeric" maxlength="1" />
 *   </div>
 *
 * Tokens: --input, --background, --foreground, --muted-foreground, --ring,
 *         --radius, --spacing-*
 */

.nds-input-otp {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);                          /* 8px entre grupos com separador */
}

/* ── Slot (cada input de 1 caractere) ────────────────────────────────────── */
.nds-input-otp-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--spacing-9, 2.25rem);               /* 36px */
  height: var(--spacing-9, 2.25rem);
  padding: 0;

  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-block: 1px solid hsl(var(--input, var(--border)));
  border-inline-end: 1px solid hsl(var(--input, var(--border)));
  border-inline-start: 0;
  font-family: inherit;
  font-size: 0.875rem;                            /* 14px */
  text-align: center;
  outline: 0;
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.05);
  transition: box-shadow var(--duration-fast), border-color var(--duration-fast);
}

/* Primeiro slot do grupo (mesmo após separator): borda esquerda + radius esquerdo */
.nds-input-otp > .nds-input-otp-slot:first-child,
.nds-input-otp-separator + .nds-input-otp-slot {
  border-inline-start: 1px solid hsl(var(--input, var(--border)));
  border-start-start-radius: var(--radius, 0.5rem);
  border-end-start-radius: var(--radius, 0.5rem);
}

/* Último slot do grupo (antes de separator ou no fim): radius direito */
.nds-input-otp > .nds-input-otp-slot:last-child,
.nds-input-otp-slot:has(+ .nds-input-otp-separator) {
  border-start-end-radius: var(--radius, 0.5rem);
  border-end-end-radius: var(--radius, 0.5rem);
}

.nds-input-otp-slot:focus {
  z-index: 1;
  box-shadow: 0 0 0 1px hsl(var(--ring));
  border-color: hsl(var(--ring));
}

.nds-input-otp-slot:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Separator (— entre grupos) ──────────────────────────────────────────── */
.nds-input-otp-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  user-select: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nds-input-otp-slot {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */























































/* ── nortear-design-system\src\styles\components\calendar.css ── */
/*
 * ─── nds-calendar ───────────────────────────────────────────────────────────
 * Date picker visual com grid mensal navegável.
 *
 *   <div class="nds-calendar">
 *     <div class="nds-calendar-nav">
 *       <button class="nds-calendar-nav-button">‹</button>
 *       <div class="nds-calendar-month-label">Janeiro 2026</div>
 *       <button class="nds-calendar-nav-button">›</button>
 *     </div>
 *     <table class="nds-calendar-grid" role="grid">
 *       <thead><tr><th>Dom</th>…</tr></thead>
 *       <tbody><tr><td><button class="nds-calendar-day">1</button></td>…</tr></tbody>
 *     </table>
 *   </div>
 *
 * Tokens: --background, --foreground, --muted-foreground, --primary,
 *         --primary-foreground, --accent, --accent-foreground, --input,
 *         --ring, --radius, --spacing-*
 */

.nds-calendar {
  padding: var(--spacing-3, 0.75rem);             /* 12px */
  user-select: none;
}

/* ── Nav (header com mês + setas) ────────────────────────────────────────── */
.nds-calendar-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}

.nds-calendar-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;                                  /* 28px */
  height: 1.75rem;

  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input, var(--border)));
  border-radius: var(--radius, 0.5rem);
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-calendar-nav-button:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nds-calendar-nav-button:focus-visible {
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

.nds-calendar-nav-button > svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
}

.nds-calendar-month-label {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  color: hsl(var(--foreground));
}

/* ── Grid (tabela com dias) ──────────────────────────────────────────────── */
.nds-calendar-grid {
  width: 100%;
  border-collapse: collapse;
}

.nds-calendar-grid > thead > tr {
  display: flex;
}

.nds-calendar-grid > thead > tr > th {
  width: var(--spacing-8, 2rem);                  /* 32px */
  text-align: center;
  font-size: 0.8rem;                               /* 12.8px */
  font-weight: var(--font-weight-normal, 400);
  color: hsl(var(--muted-foreground));
}

.nds-calendar-grid > tbody > tr {
  display: flex;
  width: 100%;
  margin-top: var(--spacing-2);
}

.nds-calendar-grid > tbody > tr > td {
  position: relative;
  padding: 0;
  text-align: center;
}

/* ── Day button ──────────────────────────────────────────────────────────── */
.nds-calendar-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--spacing-8, 2rem);                   /* 32px */
  height: var(--spacing-8, 2rem);
  padding: 0;

  background: transparent;
  border: 0;
  border-radius: var(--radius, 0.5rem);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--font-weight-normal, 400);
  color: inherit;
  cursor: pointer;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-calendar-day:hover:not(:disabled):not([aria-selected="true"]) {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nds-calendar-day:focus-visible {
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

/* Estado: hoje (sem seleção) — fundo accent suave */
.nds-calendar-day[data-today="true"]:not([aria-selected="true"]) {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Estado: selecionado — fundo primary */
.nds-calendar-day[aria-selected="true"] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.nds-calendar-day:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .nds-calendar-nav-button,
  .nds-calendar-day {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */
























































/* ── nortear-design-system\src\styles\components\toast.css ── */
/*
 * ─── nds-toast / nds-toaster ────────────────────────────────────────────────
 * Notificação flutuante temporária. Compartilhado entre Sonner e Toast factories.
 *
 *   <div class="nds-toaster" data-position="bottom-right">
 *     <div class="nds-toast" role="status" data-type="success">
 *       <span class="nds-toast-icon"><svg>…</svg></span>
 *       <div class="nds-toast-content">
 *         <p class="nds-toast-title">Salvo</p>
 *         <p class="nds-toast-description">Alterações aplicadas.</p>
 *         <button class="nds-toast-action">Desfazer</button>
 *       </div>
 *       <button class="nds-toast-close" aria-label="Close">…</button>
 *     </div>
 *   </div>
 *
 * Tokens: --background, --foreground, --muted-foreground, --border, --primary,
 *         --success, --destructive, --warning, --info, --spacing-*
 */

/* ── Toaster (container fixed posicionado) ───────────────────────────────── */
.nds-toaster {
  position: fixed;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  max-width: 26.25rem;                            /* 420px */
  width: 100%;
  pointer-events: none;
}

/* Posições */
.nds-toaster[data-position="top-right"]    { top: var(--spacing-4); right: var(--spacing-4); align-items: flex-end; }
.nds-toaster[data-position="top-left"]     { top: var(--spacing-4); left:  var(--spacing-4); align-items: flex-start; }
.nds-toaster[data-position="top-center"]   { top: var(--spacing-4); left: 50%; transform: translateX(-50%); align-items: center; }
.nds-toaster[data-position="bottom-right"] { bottom: var(--spacing-4); right: var(--spacing-4); align-items: flex-end; }
.nds-toaster[data-position="bottom-left"]  { bottom: var(--spacing-4); left:  var(--spacing-4); align-items: flex-start; }
.nds-toaster[data-position="bottom-center"]{ bottom: var(--spacing-4); left: 50%; transform: translateX(-50%); align-items: center; }

/* ── Toast (notificação individual) ──────────────────────────────────────── */
.nds-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3, 0.75rem);                 /* 12px */

  width: 100%;
  padding: var(--spacing-4);                       /* 16px */

  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem);
  box-shadow:
    0 10px 15px -3px hsl(0 0% 0% / 0.1),
    0 4px 6px -4px hsl(0 0% 0% / 0.1);

  pointer-events: auto;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--duration-base), transform var(--duration-base);
}

.nds-toast[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* ── Variantes coloridas (rich-colors) ───────────────────────────────────── */
.nds-toast[data-rich-colors="true"][data-type="success"] {
  background-color: hsl(var(--success) / 0.1);
  color: hsl(var(--foreground));
  border-color: hsl(var(--success) / 0.3);
}
.nds-toast[data-rich-colors="true"][data-type="success"] .nds-toast-icon { color: hsl(var(--success)); }

.nds-toast[data-rich-colors="true"][data-type="error"] {
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--foreground));
  border-color: hsl(var(--destructive) / 0.3);
}
.nds-toast[data-rich-colors="true"][data-type="error"] .nds-toast-icon { color: hsl(var(--destructive)); }

.nds-toast[data-rich-colors="true"][data-type="warning"] {
  background-color: hsl(var(--warning) / 0.1);
  color: hsl(var(--foreground));
  border-color: hsl(var(--warning) / 0.3);
}
.nds-toast[data-rich-colors="true"][data-type="warning"] .nds-toast-icon { color: hsl(var(--warning)); }

.nds-toast[data-rich-colors="true"][data-type="info"] {
  background-color: hsl(var(--info) / 0.1);
  color: hsl(var(--foreground));
  border-color: hsl(var(--info) / 0.3);
}
.nds-toast[data-rich-colors="true"][data-type="info"] .nds-toast-icon { color: hsl(var(--info)); }

/* ── Icon ────────────────────────────────────────────────────────────────── */
.nds-toast-icon {
  flex-shrink: 0;
  margin-top: var(--spacing-0-5);                 /* 2px — alinha com 1ª linha */
}

.nds-toast-icon > svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
}

/* Spinner para tipo loading */
.nds-toast-icon-spin {
  animation: nds-toast-spin 1s linear infinite;
}

@keyframes nds-toast-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Content ─────────────────────────────────────────────────────────────── */
.nds-toast-content {
  flex: 1;
  min-width: 0;
}

.nds-toast-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
}

.nds-toast-description {
  margin: var(--spacing-1) 0 0;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

/* ── Action button (Desfazer/Retry) ──────────────────────────────────────── */
.nds-toast-action {
  margin-top: var(--spacing-2);
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  color: hsl(var(--primary));
  cursor: pointer;
  text-underline-offset: 4px;
}

.nds-toast-action:hover {
  text-decoration: underline;
}

/* ── Close button ────────────────────────────────────────────────────────── */
.nds-toast-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: color var(--duration-fast);
}

.nds-toast-close:hover {
  color: hsl(var(--foreground));
}

.nds-toast-close > svg {
  width: 0.875rem;
  height: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  .nds-toast,
  .nds-toast-close,
  .nds-toast-icon-spin {
    transition: none;
    animation: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */

























































/* ── nortear-design-system\src\styles\components\carousel.css ── */
/*
 * ─── nds-carousel ───────────────────────────────────────────────────────────
 * Carrossel de slides com setas de navegação e suporte a autoplay.
 *
 *   <div class="nds-carousel" role="region" aria-roledescription="carousel">
 *     <div class="nds-carousel-overflow">
 *       <div class="nds-carousel-track">
 *         <div class="nds-carousel-slide" role="group">[slide]</div>
 *       </div>
 *     </div>
 *     <button class="nds-carousel-button nds-carousel-button-prev">‹</button>
 *     <button class="nds-carousel-button nds-carousel-button-next">›</button>
 *   </div>
 *
 * Tokens: --background, --foreground, --border, --ring, --accent,
 *         --accent-foreground, --radius, --spacing-*
 */

.nds-carousel {
  position: relative;
}

/* ── Overflow (recorta os slides fora da viewport) ───────────────────────── */
.nds-carousel-overflow {
  overflow: hidden;
}

/* ── Track (linha horizontal com todos os slides) ────────────────────────── */
.nds-carousel-track {
  display: flex;
  transition: transform var(--duration-moderate) var(--ease-standard);
}

/* ── Slide ───────────────────────────────────────────────────────────────── */
.nds-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-left: var(--spacing-4);                 /* 16px */
}

/* ── Navigation buttons ──────────────────────────────────────────────────── */
.nds-carousel-button {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-9, 2.25rem);               /* 36px */
  height: var(--spacing-9, 2.25rem);

  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  cursor: pointer;
  outline: 0;
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.05);
  transition: background-color var(--duration-fast), color var(--duration-fast), opacity var(--duration-fast);
}

.nds-carousel-button-prev { left: var(--spacing-2); }
.nds-carousel-button-next { right: var(--spacing-2); }

.nds-carousel-button:hover:not(:disabled) {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nds-carousel-button:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}

.nds-carousel-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nds-carousel-button > svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
}

@media (prefers-reduced-motion: reduce) {
  .nds-carousel-track,
  .nds-carousel-button {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */


























































/* ── nortear-design-system\src\styles\components\sidebar.css ── */
/*
 * ─── nds-sidebar ────────────────────────────────────────────────────────────
 * Sidebar lateral fixa com modos expanded/collapsed e variantes.
 * Reusa custom properties --sidebar-width (16rem) e --sidebar-width-icon (3rem).
 *
 * Estrutura:
 *   <div class="nds-sidebar-wrapper">
 *     <div class="nds-sidebar-root" data-state="expanded" data-side="left" data-variant="sidebar">
 *       <div class="nds-sidebar-gap" data-state="expanded">
 *         <div class="nds-sidebar-gap-inner"></div>
 *       </div>
 *       <div class="nds-sidebar-panel">
 *         <div class="nds-sidebar-inner" data-sidebar="sidebar">
 *           <div class="nds-sidebar-header">…</div>
 *           <div class="nds-sidebar-content">…</div>
 *           <div class="nds-sidebar-footer">…</div>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *
 * Tokens: --sidebar (bg), --sidebar-foreground, --sidebar-accent,
 *         --sidebar-accent-foreground, --sidebar-border, --sidebar-ring,
 *         --radius, --spacing-*
 */

/* ── Provider wrapper ────────────────────────────────────────────────────── */
.nds-sidebar-wrapper {
  display: flex;
  width: 100%;
  min-height: 100svh;
  --sidebar-width: 16rem;
  --sidebar-width-icon: 3rem;
}

/* ── Root ────────────────────────────────────────────────────────────────── */
.nds-sidebar-root {
  /* container que envolve gap + panel */
}

/* ── Gap (espaço reservado no fluxo) ─────────────────────────────────────── */
.nds-sidebar-gap {
  display: none;
  color: hsl(var(--sidebar-foreground));
}

@media (min-width: 48rem) {
  .nds-sidebar-gap {
    display: block;
  }
}

.nds-sidebar-gap-inner {
  position: relative;
  height: 100svh;
  width: var(--sidebar-width);
  transition: width var(--duration-base) linear;
}

.nds-sidebar-gap[data-state="collapsed"] .nds-sidebar-gap-inner {
  width: var(--sidebar-width-icon);
}

/* ── Panel (sidebar fixa) ────────────────────────────────────────────────── */
.nds-sidebar-panel {
  position: fixed;
  inset-block: 0;
  z-index: 10;
  height: 100svh;
  width: var(--sidebar-width);

  display: none;
  transition: width var(--duration-base) linear, left var(--duration-base) linear, right var(--duration-base) linear;
}

@media (min-width: 48rem) {
  .nds-sidebar-panel {
    display: flex;
  }
}

.nds-sidebar-root[data-side="left"] .nds-sidebar-panel  { left:  0; }
.nds-sidebar-root[data-side="right"] .nds-sidebar-panel { right: 0; }

.nds-sidebar-root[data-side="left"][data-variant="sidebar"] .nds-sidebar-panel  { border-right: 1px solid hsl(var(--sidebar-border)); }
.nds-sidebar-root[data-side="right"][data-variant="sidebar"] .nds-sidebar-panel { border-left:  1px solid hsl(var(--sidebar-border)); }

.nds-sidebar-root[data-state="collapsed"] .nds-sidebar-panel {
  width: var(--sidebar-width-icon);
}

/* ── Inner (conteúdo da sidebar) ─────────────────────────────────────────── */
.nds-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: hsl(var(--sidebar));
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.nds-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
}

/* ── Content (área principal scrollável) ─────────────────────────────────── */
.nds-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.nds-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
}

/* ── Group (seção dentro da sidebar com label opcional) ──────────────────── */
.nds-sidebar-group {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: var(--spacing-2);
}

.nds-sidebar-group-label {
  display: flex;
  align-items: center;
  height: var(--spacing-8, 2rem);
  flex-shrink: 0;

  padding-inline: var(--spacing-2);
  border-radius: var(--radius, 0.5rem);

  font-size: 0.75rem;
  font-weight: var(--font-weight-medium, 500);
  color: hsl(var(--sidebar-foreground) / 0.7);
}

/* ── Menu (lista de itens) ───────────────────────────────────────────────── */
.nds-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Menu item (li wrapper) ──────────────────────────────────────────────── */
.nds-sidebar-menu-item {
  position: relative;
}

/* ── Menu button (link ou button dentro do item) ─────────────────────────── */
.nds-sidebar-menu-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);

  width: 100%;
  padding: var(--spacing-2);
  overflow: hidden;

  background: transparent;
  border: 0;
  border-radius: var(--radius, 0.5rem);
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: 0;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.nds-sidebar-menu-button:hover {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
}

.nds-sidebar-menu-button:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--sidebar-ring) / 0.5);
}

.nds-sidebar-menu-button:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.nds-sidebar-menu-button[data-active="true"] {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
  font-weight: var(--font-weight-medium, 500);
}

.nds-sidebar-menu-button > svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
  flex-shrink: 0;
}

.nds-sidebar-menu-button > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge à direita (numeric counter) */
.nds-sidebar-menu-button-badge {
  margin-left: auto;
}

/* ── Separator ───────────────────────────────────────────────────────────── */
.nds-sidebar-separator {
  height: 1px;
  margin-inline: var(--spacing-2);
  background-color: hsl(var(--sidebar-border));
}

@media (prefers-reduced-motion: reduce) {
  .nds-sidebar-gap-inner,
  .nds-sidebar-panel,
  .nds-sidebar-menu-button {
    transition: none;
  }
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */



























































/* ── nortear-design-system\src\styles\components\form.css ── */
/*
 * ─── nds-form ───────────────────────────────────────────────────────────────
 * Helpers de formulário: field (label + input + description + error) e
 * fieldset (legend + children).
 *
 *   <div class="nds-form-field">
 *     <label class="nds-form-label">Email</label>
 *     <input class="nds-input" type="email" />
 *     <p class="nds-form-description">Não compartilharemos.</p>
 *     <p class="nds-form-error" aria-live="polite">Email inválido</p>
 *   </div>
 *
 *   <fieldset class="nds-form-fieldset">
 *     <legend class="nds-form-legend">Endereço</legend>
 *     [.nds-form-field × N]
 *   </fieldset>
 *
 * Tokens: --foreground, --muted-foreground, --destructive, --spacing-*
 */

.nds-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1-5, 0.375rem);              /* 6px */
}

.nds-form-label {
  font-family: inherit;
  font-size: 0.875rem;                            /* 14px */
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  color: hsl(var(--foreground));
}

.nds-form-description {
  margin: 0;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.nds-form-error {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  color: hsl(var(--destructive));
}

/* ── Fieldset ────────────────────────────────────────────────────────────── */
.nds-form-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);                          /* 16px entre fields */
  margin: 0;
  padding: 0;
  border: 0;
}

.nds-form-legend {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  color: hsl(var(--foreground));
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */




























































/* ── nortear-design-system\src\styles\components\chart.css ── */
/*
 * ─── nds-chart ──────────────────────────────────────────────────────────────
 * Container responsivo para gráficos SVG. Cores e tipo (bar/line) vêm da factory.
 *
 *   <div class="nds-chart">
 *     <svg viewBox="…">…</svg>
 *   </div>
 *
 * Tokens: cores delegadas à factory (--primary, --secondary, etc).
 */

.nds-chart {
  width: 100%;
  overflow: hidden;
}

.nds-chart > svg {
  display: block;
  width: 100%;
}

.nds-chart-empty {
  padding-block: var(--spacing-4);
  text-align: center;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */





























































/* Customizações Storybook Docs */

/* ── nortear-design-system\src\styles\storybook-docs.css ── */
/*
 * ─── .ds-docs: customizações pontuais do Storybook ───────────────────────────
 *
 * A neutralização do prose-style do emotion-css é feita pela classe oficial
 * .sb-unstyled aplicada no root da docs page (ver DocsPageLayout.ts). Ela
 * desliga as 84 regras `.css-XXXX :where(p|h1|table|li|span|...)` que o
 * @storybook/blocks injeta — todas usam `:not(.sb-unstyled, .sb-unstyled <tag>)`
 * como saída oficial.
 *
 * Por isso este arquivo é mínimo: cobre apenas o que está FORA da subárvore
 * .sb-unstyled — wrappers do próprio Storybook (.sbdocs-*) no dark mode e
 * CSS vars de tema internas.
 */

/* Dark mode: bg/cor que emotion hardcoda em branco nos wrappers externos. */
.dark .sbdocs-wrapper,
.dark .sbdocs-content,
.dark .docs-story {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}
.dark .sbdocs-preview {
  background-color: hsl(var(--card));
  border-color: hsl(var(--border));
}
.dark .sbdocs-info {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* CSS vars internas do Storybook + reset de herança vinda dos wrappers do
 * @storybook/blocks. Embora .sb-unstyled desligue as regras emotion na
 * subárvore, os <div> wrappers ANTES do nosso root recebem font-family
 * "Nunito Sans" e a herança propaga pra baixo. Aqui forçamos a fonte do
 * projeto no próprio root para cortar essa herança. */
.ds-docs {
  font-family: var(--font-family);
  color: hsl(var(--foreground));
  --sb-docs-color-text: hsl(var(--foreground));
  --sb-docs-color-secondary-text: hsl(var(--muted-foreground));
}
/* ── Tokens e temas compartilhados entre todos os stacks ─────────────────── */



/* ── Componentes standalone .nds-* ───────────────────────────────────────── */





























































/* Customizações Storybook Docs */


/* ── Keyframes globais (antes em @theme inline) ──────────────────────────── */
@keyframes accordion-down {
  from { height: 0; }
  to   { height: var(--radix-accordion-content-height); }
}
@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to   { height: 0; }
}
@keyframes progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Reset base ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  border-color: hsl(var(--border));
  outline-color: hsl(var(--ring) / 0.5);
}
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ════ Landing (landing/landing.css) ════ */
/*
 * ─── Landing — estilos específicos de página ──────────────────────────────────
 * Camada fina SOBRE o design system. Consome só tokens do tema (hsl(var(--*)))
 * e a tipografia de marca Nortear; nenhuma cor hardcoded. Os componentes
 * (.nds-button, .nds-card, .nds-badge, .nds-separator) vêm do design system.
 *
 * Este arquivo é concatenado em styles.css por scripts/build-landing-css.mjs.
 */

:root {
  --lp-container: 70rem; /* 1120px */
}

html { scroll-behavior: smooth; }

body { min-height: 100vh; }

.lp-container {
  width: 100%;
  max-width: var(--lp-container);
  margin-inline: auto;
  padding-inline: var(--spacing-6);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.lp-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: hsl(var(--background) / 0.85);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid hsl(var(--border));
}
.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--spacing-4);
}
.lp-logo {
  display: inline-flex;
  align-items: center;
  color: hsl(var(--foreground)); /* wordmark herda via currentColor → acompanha light/dark */
}
.lp-logo-svg {
  display: block;
  height: 2.25rem; /* 36px */
  width: auto;
}
.lp-nav { display: flex; align-items: center; gap: var(--spacing-6); }
.lp-nav a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--transition-fast) var(--transition-timing);
}
.lp-nav a:hover { color: hsl(var(--foreground)); }
@media (max-width: 40rem) {
  .lp-nav a[data-nav="anchor"] { display: none; }
}

/* ── Display / kicker (marca) ────────────────────────────────────────────── */
.lp-display {
  font-family: var(--font-family-display, var(--font-family));
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 4.25rem); /* 40 → 68px */
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}
.lp-display em { font-style: normal; color: hsl(var(--primary)); }

.lp-section-title {
  font-family: var(--font-family-display, var(--font-family));
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem); /* 28 → 40px */
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: hsl(var(--foreground));
}

.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-family-display, var(--font-family));
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}
.lp-kicker::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: hsl(var(--primary));
}

.lp-muted { color: hsl(var(--muted-foreground)); }
.lp-lead {
  max-width: 40rem;
  color: hsl(var(--muted-foreground));
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lp-hero {
  text-align: center;
  padding-block: clamp(var(--spacing-12), 9vw, var(--spacing-24)) var(--spacing-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
}
.lp-hero .lp-lead { margin-inline: auto; }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--spacing-6);
  width: 100%;
  margin-top: var(--spacing-6);
  padding-block: var(--spacing-8);
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
}
.lp-stat { text-align: center; }
.lp-stat-num {
  font-family: var(--font-family-display, var(--font-family));
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--primary));
}
.lp-stat-label {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin-top: var(--spacing-1);
}

/* ── Section rhythm ──────────────────────────────────────────────────────── */
.lp-section { padding-block: clamp(var(--spacing-12), 7vw, var(--spacing-20)); }
.lp-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-8);
  max-width: 38rem;
}

/* ── Cards de stack/feature — links sobre o nds-card ─────────────────────── */
a.lp-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform var(--transition-fast) var(--transition-timing),
              box-shadow var(--transition-fast) var(--transition-timing),
              border-color var(--transition-fast) var(--transition-timing);
}
a.lp-card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-xl);
}
a.lp-card-link:hover .nds-card { border-color: hsl(var(--primary) / 0.5); }
.lp-card-engine {
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Code", monospace;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
.lp-card-cta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--primary));
}
.lp-card-cta::after { content: " →"; }

/* ── Code block ──────────────────────────────────────────────────────────── */
.lp-code {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  padding: var(--spacing-6);
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Code", monospace;
  font-size: 0.875rem;
  line-height: 1.8;
  overflow-x: auto;
}
.lp-code .c-comment { color: hsl(var(--muted-foreground)); }
.lp-code .c-cmd { color: hsl(var(--primary)); font-weight: 600; }
.lp-code a { color: hsl(var(--primary)); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.lp-footer {
  border-top: 1px solid hsl(var(--border));
  padding-block: var(--spacing-12);
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}
.lp-footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}
.lp-footer a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  margin-left: var(--spacing-4);
  transition: color var(--transition-fast) var(--transition-timing);
}
.lp-footer a:first-child { margin-left: 0; }
.lp-footer a:hover { color: hsl(var(--foreground)); }