/*
 * tokens.css — Design Tokens do TRM SaaS
 * Camada de tokens semânticos. Cada [data-theme] redefine os mesmos tokens;
 * os componentes tematizam sozinhos. Tema default: Paper Workspace (PostHog).
 *
 * 7 temas originais: paper | dark-ops | midnight | clean | corporate | shadcn | sauce
 * 4 temas Velzon:    velzon-default | velzon-sass | velzon-corporate | velzon-galaxy
 * 2 temas Horizon:   horizon | horizon-dark
 */

/* ── Fonte + Efeitos globais ─────────────────────── */
:root {
  /* ── Escala tipográfica (item 6a do HANDOFF_UIUX) ────────────────────
     Global, não por tema: tamanho é estrutura, não identidade visual.
     Tamanhos de ÍCONE (.mdi, *-icon, chevrons) ficam fora desta escala —
     são glifos, não texto, e seguem o tamanho do componente. */
  --fs-2xs: 10px;      /* rótulos de grupo, legendas do mapa */
  --fs-xs: 11px;       /* timestamps, metadados */
  --fs-sm: 12px;       /* texto de apoio, badges, itens de menu */
  --fs-base: 13px;     /* corpo: tabelas, formulários */
  --fs-md: 14px;       /* corpo do app (body), nomes de card */
  --fs-lg: 15px;       /* títulos de card e de seção */
  --fs-xl: 18px;       /* títulos de página */
  --fs-display: 24px;  /* números de KPI */
  --font-brand: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow-xl: rgba(0,0,0,.25) 0px 25px 50px -12px;
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.06);

  /* Tokens de forma — padrão Velzon-inspired */
  --radius-window: 8px;
  --radius-card: 8px;
  --radius-btn: 6px;
  --radius-input: 6px;
  --radius-panel: 8px;
  --shadow-soft: 0 1px 2px 0 rgba(0,0,0,.05);
  --btn-pad: 8px 16px;
  --card-pad: 20px 24px;
  --lift: -2px;
  --glow: 0 0 16px color-mix(in srgb, var(--accent) 32%, transparent);

  /* ── Paper Workspace (default) ───────────────────── */
  --canvas: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #eef0f2;
  --text: #212529;
  --text-2: #495057;
  --text-muted: #6d6f7b;
  --border: #e9ebec;
  --accent: #405189;
  --brand: #405189;
  --brand-fg: #ffffff;
  --brand-hover: #364374;
  --btn2-border: #405189;
  --btn2-fg: #405189;
  --risk-low: #0ab39c;
  --risk-medium: #f7b84b;
  --risk-high: #f06548;
  --risk-critical: #ef4444;
  /* Sidebar tokens — Paper usa sidebar escura estilo Velzon */
  --sidebar-bg: #1e2a4a;
  --sidebar-border: #212d45;
  --sidebar-text: rgba(255,255,255,.6);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,.07);
  --sidebar-item-active: rgba(255,255,255,.13);
  --sidebar-accent: #405189;
  --sidebar-section-label: rgba(255,255,255,.3);
  /* aliases */
  --bg-primary: var(--canvas);
  --bg-card: var(--surface);
  --bg-card-hover: var(--surface-3);
  --text-primary: var(--text);
}

/* ── Dark Ops ──────────────────────────────────────── */
[data-theme="dark-ops"] {
  --canvas: #0f1729;
  --surface: #1e2d4f;
  --surface-2: #182640;
  --surface-3: #243660;
  --text: #e2e8f0;
  --text-2: #cbd5e1;
  --text-muted: #94a3b8;
  --border: #2d3f6b;
  --accent: #38bdf8;
  --brand: #0ea5e9;
  --brand-fg: #04263a;
  --brand-hover: #0284c7;
  --btn2-border: #33507f;
  --btn2-fg: #cbd5e1;
  --risk-low: #22c55e;
  --risk-medium: #f59e0b;
  --risk-high: #fb8b3c;
  --risk-critical: #ef4444;
  --sidebar-bg: #0d1830;
  --sidebar-border: #182640;
  --sidebar-text: rgba(203,213,225,.65);
  --sidebar-text-active: #e2e8f0;
  --sidebar-item-hover: rgba(255,255,255,.06);
  --sidebar-item-active: rgba(56,189,248,.15);
  --sidebar-accent: #38bdf8;
  --sidebar-section-label: rgba(148,163,184,.4);
}

/* ── Midnight SOC ─────────────────────────────────── */
[data-theme="midnight"] {
  --canvas: #0b1220;
  --surface: #131c2e;
  --surface-2: #0f1728;
  --surface-3: #1e2b45;
  --text: #e6edf7;
  --text-2: #c2cddd;
  --text-muted: #8593ab;
  --border: #243149;
  --accent: #38bdf8;
  --brand: #38bdf8;
  --brand-fg: #04202e;
  --brand-hover: #0ea5e9;
  --btn2-border: #2f3f5c;
  --btn2-fg: #c2cddd;
  --risk-low: #34d399;
  --risk-medium: #fbbf24;
  --risk-high: #fb923c;
  --risk-critical: #f26671;
  --sidebar-bg: #08101c;
  --sidebar-border: #0f1728;
  --sidebar-text: rgba(194,205,221,.6);
  --sidebar-text-active: #e6edf7;
  --sidebar-item-hover: rgba(255,255,255,.05);
  --sidebar-item-active: rgba(56,189,248,.12);
  --sidebar-accent: #38bdf8;
  --sidebar-section-label: rgba(133,147,171,.4);
}

/* ── Clean Light ──────────────────────────────────── */
[data-theme="clean"] {
  --canvas: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #fbfbfc;
  --surface-3: #eff1f4;
  --text: #17181a;
  --text-2: #3c4046;
  --text-muted: #6d7179;
  --border: #e6e8ec;
  --accent: #5b5bd6;
  --brand: #5b5bd6;
  --brand-fg: #ffffff;
  --brand-hover: #4a4ac2;
  --btn2-border: #d7d9de;
  --btn2-fg: #3c4046;
  --risk-low: #3fa863;
  --risk-medium: #d9930b;
  --risk-high: #e5591b;
  --risk-critical: #d1293d;
  --sidebar-bg: #1a1a2e;
  --sidebar-border: #16213e;
  --sidebar-text: rgba(255,255,255,.6);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,.06);
  --sidebar-item-active: rgba(91,91,214,.2);
  --sidebar-accent: #5b5bd6;
  --sidebar-section-label: rgba(255,255,255,.3);
}

/* ── Corporate Blue ───────────────────────────────── */
[data-theme="corporate"] {
  --canvas: #eef2f9;
  --surface: #ffffff;
  --surface-2: #f4f7fc;
  --surface-3: #e7edf7;
  --text: #0f2440;
  --text-2: #33465f;
  --text-muted: #616f83;
  --border: #d3ddec;
  --accent: #1d4ed8;
  --brand: #1d4ed8;
  --brand-fg: #ffffff;
  --brand-hover: #1740b0;
  --btn2-border: #1d4ed8;
  --btn2-fg: #1d4ed8;
  --risk-low: #2f9e5a;
  --risk-medium: #e0910c;
  --risk-high: #e35414;
  --risk-critical: #cf2436;
  --sidebar-bg: #0f2440;
  --sidebar-border: #162e52;
  --sidebar-text: rgba(255,255,255,.6);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,.07);
  --sidebar-item-active: rgba(29,78,216,.25);
  --sidebar-accent: #4d85f0;
  --sidebar-section-label: rgba(255,255,255,.3);
}

/* ── shadcn / ui ──────────────────────────────────── */
[data-theme="shadcn"] {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f4f4f5;
  --text: #09090b;
  --text-2: #3f3f46;
  --text-muted: #71717a;
  --border: #e4e4e7;
  --accent: #18181b;
  --brand: #18181b;
  --brand-fg: #fafafa;
  --brand-hover: #27272a;
  --btn2-border: #e4e4e7;
  --btn2-fg: #18181b;
  --risk-low: #16a34a;
  --risk-medium: #d97706;
  --risk-high: #ea580c;
  --risk-critical: #dc2626;
  --sidebar-bg: #18181b;
  --sidebar-border: #27272a;
  --sidebar-text: rgba(255,255,255,.6);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,.07);
  --sidebar-item-active: rgba(255,255,255,.12);
  --sidebar-accent: #ffffff;
  --sidebar-section-label: rgba(255,255,255,.3);
}

/* ── Sauce Labs ───────────────────────────────────── */
[data-theme="sauce"] {
  --canvas: #132322;
  --surface: #0e1a19;
  --surface-2: #070f0f;
  --surface-3: #1a2625;
  --text: #ffffff;
  --text-2: #edf7f5;
  --text-muted: #97ddbc;
  --border: #22403a;
  --accent: #3ddc91;
  --brand: #3ddc91;
  --brand-fg: #132322;
  --brand-hover: #5be5a8;
  --btn2-border: #3ddc91;
  --btn2-fg: #3ddc91;
  --risk-low: #3ddc91;
  --risk-medium: #ffcd48;
  --risk-high: #fb923c;
  --risk-critical: #ff6b6b;
  --sidebar-bg: #0a1716;
  --sidebar-border: #132322;
  --sidebar-text: rgba(237,247,245,.55);
  --sidebar-text-active: #edf7f5;
  --sidebar-item-hover: rgba(61,220,145,.08);
  --sidebar-item-active: rgba(61,220,145,.18);
  --sidebar-accent: #3ddc91;
  --sidebar-section-label: rgba(151,221,188,.35);
  /* Pills + cantos Sauce */
  --radius-window: 16px;
  --radius-card: 12px;
  --radius-btn: 9999px;
  --radius-input: 10px;
  --radius-panel: 16px;
  --shadow-soft: 0 8px 30px rgba(0,0,0,.38);
  --glow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);
  --btn-pad: 10px 22px;
  --card-pad: 22px 24px;
  --lift: -3px;
}

/* ── Velzon Default (azul marinho institucional) ───── */
[data-theme="velzon-default"] {
  --canvas: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #f3f6f9;
  --surface-3: #e8ecf1;
  --text: #212529;
  --text-2: #495057;
  --text-muted: #6d6f7b;
  --border: #e9ebec;
  --accent: #405189;
  --brand: #405189;
  --brand-fg: #ffffff;
  --brand-hover: #364374;
  --btn2-border: #405189;
  --btn2-fg: #405189;
  --risk-low: #0ab39c;
  --risk-medium: #f7b84b;
  --risk-high: #f06548;
  --risk-critical: #ef4444;
  --sidebar-bg: #1e2a4a;
  --sidebar-border: #212d45;
  --sidebar-text: rgba(255,255,255,.6);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,.07);
  --sidebar-item-active: rgba(255,255,255,.13);
  --sidebar-accent: #405189;
  --sidebar-section-label: rgba(255,255,255,.3);
}

/* ── Velzon Sass (roxo elegante) ─────────────────── */
[data-theme="velzon-sass"] {
  --canvas: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #f3f6f9;
  --surface-3: #ece8f1;
  --text: #1a1529;
  --text-2: #4a3f5c;
  --text-muted: #786c85;
  --border: #e4e2ea;
  --accent: #7b5ea7;
  --brand: #7b5ea7;
  --brand-fg: #ffffff;
  --brand-hover: #6a4e93;
  --btn2-border: #7b5ea7;
  --btn2-fg: #7b5ea7;
  --risk-low: #0ab39c;
  --risk-medium: #f7b84b;
  --risk-high: #f06548;
  --risk-critical: #ef4444;
  --sidebar-bg: #3b285a;
  --sidebar-border: #42305f;
  --sidebar-text: rgba(255,255,255,.6);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,.07);
  --sidebar-item-active: rgba(123,94,167,.25);
  --sidebar-accent: #c196e8;
  --sidebar-section-label: rgba(255,255,255,.3);
}

/* ── Velzon Corporate (verde-azul corporativo) ───── */
[data-theme="velzon-corporate"] {
  --canvas: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #f3f6f9;
  --surface-3: #e5f4f2;
  --text: #152b2a;
  --text-2: #2e5553;
  --text-muted: #577673;
  --border: #d8e9e8;
  --accent: #0ab39c;
  --brand: #0ab39c;
  --brand-fg: #ffffff;
  --brand-hover: #099d88;
  --btn2-border: #0ab39c;
  --btn2-fg: #0ab39c;
  --risk-low: #0ab39c;
  --risk-medium: #f7b84b;
  --risk-high: #f06548;
  --risk-critical: #ef4444;
  --sidebar-bg: #183247;
  --sidebar-border: #1d3a52;
  --sidebar-text: rgba(255,255,255,.6);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,.07);
  --sidebar-item-active: rgba(10,179,156,.2);
  --sidebar-accent: #0ab39c;
  --sidebar-section-label: rgba(255,255,255,.3);
}

/* ── Velzon Galaxy (dark premium) ─────────────────── */
[data-theme="velzon-galaxy"] {
  --canvas: #16191e;
  --surface: #21262e;
  --surface-2: #1a1f26;
  --surface-3: #2a3040;
  --text: #e8ecf1;
  --text-2: #b7c0cc;
  --text-muted: #828d9e;
  --border: #2e3545;
  --accent: #7fd3c7;
  --brand: #7fd3c7;
  --brand-fg: #0a0e13;
  --brand-hover: #6bbfb3;
  --btn2-border: #3e4e62;
  --btn2-fg: #b7c0cc;
  --risk-low: #0ab39c;
  --risk-medium: #f7b84b;
  --risk-high: #f06548;
  --risk-critical: #ef4444;
  --sidebar-bg: #0b0f12;
  --sidebar-border: #131720;
  --sidebar-text: rgba(232,236,241,.5);
  --sidebar-text-active: #e8ecf1;
  --sidebar-item-hover: rgba(255,255,255,.05);
  --sidebar-item-active: rgba(127,211,199,.12);
  --sidebar-accent: #7fd3c7;
  --sidebar-section-label: rgba(108,122,141,.45);
}

/* ── Horizon UI (claro — lavanda + roxo, cantos suaves) ── */
[data-theme="horizon"] {
  --canvas: #f4f7fe;
  --surface: #ffffff;
  --surface-2: #f4f7fe;
  --surface-3: #eaeffc;
  --text: #1b2559;
  --text-2: #2b3674;
  --text-muted: #697187;
  --border: #e9edf7;
  --accent: #4318ff;
  --brand: #4318ff;
  --brand-fg: #ffffff;
  --brand-hover: #3311db;
  --btn2-border: #4318ff;
  --btn2-fg: #4318ff;
  --risk-low: #01b574;
  --risk-medium: #ffb547;
  --risk-high: #ff5b5b;
  --risk-critical: #e31a1a;
  --sidebar-bg: #111c44;
  --sidebar-border: #1b254b;
  --sidebar-text: rgba(163,174,208,.85);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,.06);
  --sidebar-item-active: rgba(67,24,255,.30);
  --sidebar-accent: #7551ff;
  --sidebar-section-label: rgba(163,174,208,.5);
  /* Horizon usa cartões bem arredondados e sombras suaves */
  --radius-window: 20px;
  --radius-card: 20px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --radius-panel: 20px;
  --shadow-soft: 0 18px 40px rgba(112,144,176,.18);
  --glow: 0 0 20px color-mix(in srgb, var(--accent) 35%, transparent);
  --card-pad: 22px 24px;
  --lift: -3px;
}

/* ── Horizon UI Dark (navy premium — roxo elétrico) ─────── */
[data-theme="horizon-dark"] {
  --canvas: #0b1437;
  --surface: #111c44;
  --surface-2: #0b1437;
  --surface-3: #1b254b;
  --text: #ffffff;
  --text-2: #a3aed0;
  --text-muted: #77879d;
  --border: #1b254b;
  --accent: #7551ff;
  --brand: #7551ff;
  --brand-fg: #ffffff;
  --brand-hover: #6440e6;
  --btn2-border: #3a457c;
  --btn2-fg: #a3aed0;
  --risk-low: #01b574;
  --risk-medium: #ffb547;
  --risk-high: #ff5b5b;
  --risk-critical: #e31a1a;
  --sidebar-bg: #060c26;
  --sidebar-border: #111c44;
  --sidebar-text: rgba(163,174,208,.7);
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255,255,255,.05);
  --sidebar-item-active: rgba(117,81,255,.25);
  --sidebar-accent: #7551ff;
  --sidebar-section-label: rgba(114,130,153,.5);
  --radius-window: 20px;
  --radius-card: 20px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --radius-panel: 20px;
  --shadow-soft: 0 18px 40px rgba(0,0,0,.35);
  --glow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);
  --card-pad: 22px 24px;
  --lift: -3px;
}