/*
  Design tokens — BSystem (@bhubai/bhub-design-system 3.0.0, commit 639aa28), tema Cockpit.
  Fonte: src/styles.css do bhub-design-system (cópia em docs/design-system/,
  versão e procedimento de atualização em docs/design-system/SNAPSHOT.md). Os nomes seguem o DS; os nomes
  antigos do protótipo (surface, text-primary, brand-blue…) ficam no fim como
  aliases, para o CSS e o JS existentes continuarem funcionando. Nunca escreva
  um hex fora deste arquivo — use a variável.

  O Cockpit tem as mesmas cores do Hub (primária Mizu incluída) e troca só a
  tipografia editorial (display, title-lg, title, eyebrow) por Inter (D28).
  Toda página põe data-theme="cockpit" no <html>.
*/
:root {
  /* ── Rampas da marca ─────────────────────────────────────── */
  --color-mizu-50: #e6f0fb;
  --color-mizu-100: #cce2f8;
  --color-mizu-200: #a6ccf4;
  --color-mizu-300: #7dbbff;
  --color-mizu-400: #5aa6f5;
  --color-mizu-500: #2b88ea;
  --color-mizu-600: #0171e4; /* brand: Mizu */
  --color-mizu-700: #0167d1;
  --color-mizu-800: #1554a9;
  --color-mizu-900: #1f4984;
  --color-mizu-950: #1a2f51;

  --color-bushido-50: #f4f5f8;
  --color-bushido-100: #e8ecf2;
  --color-bushido-200: #c9d0dc;
  --color-bushido-300: #b9c1d0;
  --color-bushido-400: #8e9aae;
  --color-bushido-500: #707b8e;
  --color-bushido-600: #5b6578;
  --color-bushido-700: #2b3856;
  --color-bushido-800: #1e2b47;
  --color-bushido-900: #1a2640;
  --color-bushido-950: #0f1727; /* brand: Bushido Night */

  --color-sand-50: #faf9f7;
  --color-sand-300: #e1dccc; /* brand: Karesansui Sand */

  /* Coral: a rampa pink do DS (o coral da marca é o pink-500). */
  --color-pink-50: #fff0f6;
  --color-pink-400: #ff4d90;
  --color-pink-500: #ff0064;
  --color-pink-600: #db0057;

  /* ── Paleta primitiva (só os passos que os semânticos usam) ─ */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-700: #404040;
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-white: #ffffff;
  --color-black: #000000;

  /* ── Raio ────────────────────────────────────────────────── */
  --radius: 0.5rem; /* 8px, base do shadcn */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px: botão, campo, card, alert, tooltip, item da sidebar */
  --radius-xl: 0.75rem; /* 12px: contêiner da tabela */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px: frame do conteúdo (SidebarInset) */
  --radius-full: 9999px;

  /* ── Semânticos ──────────────────────────────────────────── */
  --background: #ffffff;
  --foreground: var(--color-bushido-950);

  --card: #ffffff;
  --card-foreground: var(--color-bushido-950);

  --popover: #ffffff;
  --popover-foreground: var(--color-bushido-950);

  /* Rosa do Cockpit (decisão do produto, 2026-10-26): a cor de ação e de
     acento deste protótipo é o rosa do Cockpit, não o Mizu do DS (D28).
     O Mizu fica em informação e links. `-text` é o tom escurecido para
     texto pequeno sobre branco (AA). */
  --brand-pink: #f25461;
  --brand-pink-hover: #e83d4d;
  --brand-pink-soft: #fde7ea;
  --brand-pink-text: #c2374a;
  --brand-pink-light: #f58f98; /* foco e barrinha sobre a sidebar escura */

  --primary: var(--brand-pink);
  --primary-foreground: var(--color-white);
  --primary-hover: var(--brand-pink-hover);

  --secondary: #f5f5f5;
  --secondary-foreground: var(--color-bushido-950);
  --secondary-hover: #fafafa;

  --muted: #f5f5f5;
  --muted-foreground: var(--color-bushido-600);

  --accent: var(--brand-pink-soft);
  --accent-foreground: var(--brand-pink-text);

  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --destructive-text: #b91c1c; /* red/700 · AA on subtle (D25) */
  --destructive-border: #ef4444;
  --destructive-subtle: #fef2f2;
  --destructive-hover: color-mix(in oklab, var(--destructive) 90%, transparent);

  /* ── Estados ─────────────────────────────────────────────── */
  --success: #16a34a; /* green/600 */
  --success-foreground: #ffffff;
  --success-text: #15803d; /* green/700 */
  --success-border: #22c55e; /* green/500 */
  --success-subtle: #f0fdf4; /* green/50 */
  --success-muted: #dcfce7; /* green/100 · hover do tonal */
  --success-strong: #166534; /* green/800 · texto do hover tonal */

  --warning: #f59e0b; /* amber/500 */
  --warning-foreground: #ffffff;
  --warning-text: #b45309; /* amber/700 */
  --warning-border: #f59e0b; /* amber/500 */
  --warning-subtle: #fffbeb; /* amber/50 */
  --warning-muted: #fef3c7; /* amber/100 */
  --warning-strong: #92400e; /* amber/800 */

  --info: var(--color-mizu-600);
  --info-foreground: #ffffff;
  --info-text: var(--color-mizu-700);
  --info-border: var(--color-mizu-400);
  --info-subtle: var(--color-mizu-50);
  --info-muted: var(--color-mizu-100);
  --info-strong: var(--color-mizu-800);

  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: var(--brand-pink);
  --focus-ring: var(--ring);
  --focus-ring-error: #fca5a5;

  /* ── Gerais ──────────────────────────────────────────────── */
  --foreground-alt: var(--color-bushido-700);
  --ghost: #ffffff00;
  --ghost-foreground: var(--color-bushido-700);
  --ghost-hover: #0000000c;
  --outline: #ffffff19;
  --outline-hover: #00000008;
  --outline-active: #0000000c;
  --link: var(--color-mizu-600);
  --link-hover: var(--color-mizu-700);
  --mid-alt: var(--color-bushido-600);
  --border-0: #fafafa;
  --border-1: #f5f5f5;
  --accent-2: #e5e5e5;
  --accent-3: #d4d4d4;
  --border-3: #d4d4d4;
  --border-4: #a3a3a3;
  --border-5: #737373;
  --backdrop: #00000099;
  --body-background: #ffffff;

  /* ── Decorativos ─────────────────────────────────────────── */
  --magic-subtle: var(--color-purple-50);
  --magic-bold: var(--color-purple-600);
  --magic-strong: var(--color-purple-700);
  --magic-muted: var(--color-purple-100);
  --dojo-steel-subtle: var(--color-neutral-50);
  --dojo-steel-bold: var(--color-neutral-700);
  --mizu-flow-subtle: var(--color-mizu-50);
  --mizu-flow-bold: var(--color-mizu-600);
  /* O detalhe de marca (barrinha ativa, sublinhado da aba, ponto do
     "Cockpit.") usa o mesmo rosa do Cockpit. */
  --coral-subtle: var(--brand-pink-soft);
  --coral-bold: var(--brand-pink);
  --coral-text: var(--brand-pink-text);
  --sand-subtle: var(--color-sand-50);
  --sand-bold: var(--color-sand-300);

  /* ── Sidebar (Bushido Night nos dois temas) ──────────────── */
  --sidebar: var(--color-bushido-950);
  --sidebar-foreground: var(--color-bushido-200);
  --sidebar-primary: var(--brand-pink); /* contador */
  --sidebar-primary-foreground: var(--color-white);
  --sidebar-accent: var(--color-bushido-800); /* item ativo e hover */
  --sidebar-accent-foreground: #f9f9f9;
  --sidebar-border: var(--color-bushido-700);
  --sidebar-ring: var(--brand-pink-light);
  --sidebar-muted: var(--color-bushido-400); /* texto e ícones secundários */
  --sidebar-subtle: var(--color-bushido-600); /* dica dispensável */
  --sidebar-elevated: var(--color-bushido-900);
  --sidebar-success: #10b981; /* ponto de status online */
  --sidebar-highlight: var(--coral-bold); /* "novo": ponto de notificação */
  --sidebar-indicator: var(--coral-bold); /* barrinha do item ativo */
  --sidebar-avatar: var(--color-bushido-800);
  --sidebar-avatar-foreground: var(--brand-pink-light);
  /* 17rem em vez dos 16rem do DS: a árvore do Autopilot tem três níveis, e
     com 16rem "Sindicato / Convenção" e "Cadastros Auxiliares" quebravam linha. */
  --sidebar-width: 17rem;
  --sidebar-width-icon: 3rem;

  /* ── Tabs ────────────────────────────────────────────────── */
  --tabs-indicator: var(--coral-bold); /* sublinhado da aba ativa (line) */

  /* ── Espaço ──────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Sombras (flat em repouso: só overlay e hover) ───────── */
  --shadow-2xs: 0 1px 0 0 #0000000c;
  --shadow-xs: 0 1px 2px 0 #0000000c;
  --shadow-sm: 0 1px 3px 0 #00000019, 0 1px 2px -1px #00000019;
  --shadow-md: 0 4px 6px -1px #00000019, 0 2px 4px -2px #00000019;
  --shadow-lg: 0 10px 15px -3px #00000019, 0 4px 6px -4px #00000019;
  --shadow-xl: 0 20px 25px -5px #00000019, 0 8px 10px -6px #00000019;
  --shadow-2xl: 0 25px 50px -12px #0000003f;
  /* Sombra interna do frame do conteúdo (SidebarInset, variante inset). */
  --shadow-inset-frame: inset 2px 0 8px rgba(0, 0, 0, 0.08);
  --overlay: rgba(0, 0, 0, 0.5); /* Dialog e Sheet: bg-black/50 */

  /* ── Tipografia ──────────────────────────────────────────── */
  --font-sans: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Escala de corpo (text-*) */
  --font-size-xs: 0.75rem; /* 12 */
  --line-height-xs: 1rem;
  --font-size-13: 0.8125rem; /* 13: corpo denso (D9) */
  --line-height-13: 1.125rem;
  --font-size-sm: 0.875rem; /* 14 */
  --line-height-sm: 1.25rem;
  --font-size-base: 1rem; /* 16 */
  --line-height-base: 1.5rem;
  --font-size-lg: 1.125rem; /* 18 */
  --line-height-lg: 1.75rem;
  --font-size-xl: 1.25rem; /* 20 */
  --line-height-xl: 1.75rem;
  --font-size-2xl: 1.5rem; /* 24: título de página */
  --line-height-2xl: 2rem;

  /* Estilos com nome, valores do Cockpit (D28) */
  --font-family-display: var(--font-sans);
  --font-weight-display: var(--font-weight-light);
  --font-size-display: 2.5rem;
  --line-height-display: 1.1;
  --letter-spacing-display: -0.025em;

  --font-family-title-lg: var(--font-sans);
  --font-weight-title-lg: var(--font-weight-light);
  --font-size-title-lg: 1.75rem;
  --line-height-title-lg: 1.1;
  --letter-spacing-title-lg: -0.025em;

  --font-family-title: var(--font-sans);
  --font-weight-title: var(--font-weight-regular);
  --font-size-title: 1.1875rem;
  --line-height-title: 1.375;
  --letter-spacing-title: -0.025em;

  --font-family-eyebrow: var(--font-sans);
  --font-weight-eyebrow: var(--font-weight-medium);
  --font-size-eyebrow: 0.6875rem; /* 11 */
  --line-height-eyebrow: 1rem;
  --letter-spacing-eyebrow: 0.14em;

  --font-size-kpi: 1.375rem; /* 22 */
  --line-height-kpi: 1.75rem;
  --font-size-mono-data: 0.75rem;
  --line-height-mono-data: 1rem;

  /* Escala antiga do protótipo (--fs-*), colapsada na escala do DS: o nome
     continua valendo, o valor passa a ser um dos degraus de text-*. */
  --fs-10-5: var(--font-size-eyebrow);
  --fs-11: var(--font-size-eyebrow);
  --fs-11-5: var(--font-size-xs);
  --fs-12: var(--font-size-xs);
  --fs-12-5: var(--font-size-xs);
  --fs-13: var(--font-size-13);
  --fs-13-5: var(--font-size-13);
  --fs-14: var(--font-size-sm);
  --fs-15: var(--font-size-sm);
  --fs-16: var(--font-size-base);
  --fs-17: var(--font-size-base);
  --fs-18: var(--font-size-lg);
  --fs-20: var(--font-size-xl);
  --fs-22: var(--font-size-kpi);

  /* ── Camadas ─────────────────────────────────────────────── */
  --z-sticky: 5;
  --z-header: 10;
  --z-popover: 20;
  --z-sidebar: 40;
  --z-overlay: 60;
  --z-sheet: 61;
  --z-fab: 65;
  --z-dialog-over-sheet: 66;
  --z-floating: 67;
  --z-toast: 70;
  --z-tooltip: 9999;

  /* ── Aliases dos nomes antigos do protótipo ──────────────── */
  --surface: var(--background);
  --surface-muted: var(--muted);
  --surface-subtle: var(--color-neutral-50);
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --text-tertiary: var(--muted-foreground);
  --border-strong: var(--border-3);
  --skeleton: var(--muted);
  --brand-blue: var(--link);
  --radius-field: var(--radius-lg);
  --radius-accordion: var(--radius-xl);
  --overlay-modal: var(--overlay);
  --overlay-drawer: var(--overlay);
  --shadow-modal: var(--shadow-lg);
  --shadow-toast: var(--shadow-lg);
}