/**
 * Design tokens — aligned with shadcn/Tailwind v4 mockup (OKLCH).
 * Loaded before style.css. Wrapper fonts: brand (Open Sans) vs app (system-ui stack).
 */

:root {
    --radius: 0.75rem;
    --radius-pill: 1rem;
    --background: oklch(97.5% .005 250);
    --foreground: oklch(20% .04 260);
    --card: oklch(100% 0 0);
    --card-foreground: oklch(20% .04 260);
    --popover: oklch(100% 0 0);
    --popover-foreground: oklch(20% .04 260);
    --primary: oklch(24% .06 260);
    --primary-foreground: oklch(98.5% .003 250);
    --secondary: oklch(94% .025 250);
    --secondary-foreground: oklch(24% .06 260);
    --muted: oklch(96% .008 250);
    --muted-foreground: oklch(50% .03 258);
    --accent: oklch(62% .16 255);
    --accent-foreground: oklch(98.5% .003 250);
    --destructive: oklch(58% .22 27);
    --destructive-foreground: oklch(98.5% .003 250);
    --info: oklch(62% .16 255);
    --warning: oklch(78% .15 75);
    --success: oklch(59.6% .145 163.225);
    --border: oklch(91% .012 255);
    --input: oklch(91% .012 255);
    --ring: oklch(62% .16 255);
    --sidebar: oklch(20% .05 260);
    --sidebar-foreground: oklch(92% .015 250);
    --sidebar-primary: oklch(62% .16 255);
    --sidebar-primary-foreground: oklch(98.5% .003 250);
    --sidebar-accent: oklch(28% .06 260);
    --sidebar-accent-foreground: oklch(98.5% .003 250);
    --sidebar-border: oklch(30% .05 260);
    --sidebar-ring: oklch(62% .16 255);
    --brand-navy: oklch(20% .05 260);
    --brand-navy-deep: oklch(16% .045 260);
    --brand-blue: oklch(62% .16 255);
    /* color previo oklch(0.59 0.09 244.34) */
    --brand-blue-soft: oklch(94% .025 250);
    --shadow-card: 0 1px 2px oklch(20% .05 260 / 0.04), 0 4px 16px oklch(20% .05 260 / 0.05);
    /* Categorical palette (badges / KPI types) */
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-violet-700: oklch(49.1% .27 292.581);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-700: oklch(45.7% .24 277.023);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-pink-500: oklch(65.6% .241 354.308);
    --color-pink-700: oklch(52.5% .223 3.958);
    --color-sky-500: oklch(68.5% .169 237.323);
    --color-sky-700: oklch(50% .134 242.749);
    --color-white: #fff;
    /* Layout micro-tokens (sidebar/header coinciden con el shell Homer actual) */
    --sidebar-width: 250px;
    --header-height: 60px;
    --ribbon-height: 2.5rem;
    --icon-button-size: 1.75rem;
    /* Sidebar nav (theme-layer + MetisMenu) */
    --sidebar-item-min-height: 2.125rem;
    --sidebar-icon-gap: 1rem;
    --sidebar-nav-padding-x: 0.5rem;
    --sidebar-nav-padding-bottom: 1rem;
    --sidebar-top-link-pad-x: 18px;
    /* Rama de módulo expandida / activa (caja semitransparente) */
    --sidebar-active-branch-margin: 10px;
    --sidebar-active-branch-bg: color-mix(in oklab, var(--sidebar-primary) 16%, transparent);
    --sidebar-child-indent-1: 36px;
    --sidebar-child-indent-2: 48px;
    --sidebar-child-indent-3: 58px;
    --font-sans-brand: "Open Sans", ui-sans-serif, system-ui, sans-serif;
    --font-sans-app: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-sans: var(--font-sans-app);
    /* Espaciados */
    --spacing: .25rem;
    --label-spacing: 3px;
    /* DD Digital AI Analysis — heatmap celdas competidor (mismos hex que scoring legacy) */
    --dd-analysis-heatmap-bg-not-mentioned: var(--card);
    --dd-analysis-heatmap-fg-not-mentioned: var(--muted-foreground);
    --dd-analysis-heatmap-bg-low: color-mix(in oklab, var(--brand-blue) 16%, var(--card));
    --dd-analysis-heatmap-fg-low: var(--brand-navy);
    --dd-analysis-heatmap-bg-medium: color-mix(in oklab, var(--brand-blue) 42%, var(--card));
    --dd-analysis-heatmap-fg-medium: var(--brand-navy);
    --dd-analysis-heatmap-bg-high: var(--brand-blue);
    --dd-analysis-heatmap-fg-high: var(--primary-foreground);
}

#account-wrapper,
#external-survey-wrapper,
#legal-wrapper,
#default-wrapper {
    font-family: var(--font-sans-brand);
}

#layout-wrapper {
    font-family: var(--font-sans-app);
}