/*
 * BRAIZONE design tokens.
 * Components only read semantic tokens; themes redefine them under [data-theme].
 * Default (no attribute) is BRAIZONE Original / Blue.
 */
:root {
  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 0.6875rem;  /* 11px  metadata */
  --text-xs: 0.75rem;     /* 12px  labels */
  --text-sm: 0.8125rem;   /* 13px  secondary */
  --text-base: 0.875rem;  /* 14px  body */
  --text-md: 0.9375rem;   /* 15px  emphasis */
  --text-lg: 1.0625rem;   /* 17px  section titles */
  --text-xl: 1.375rem;    /* 22px  card numbers */
  --text-2xl: 1.75rem;    /* 28px  page titles */
  --text-3xl: 2.25rem;    /* 36px  hero numbers */
  --text-display: 2.75rem;/* 44px  primary KPI */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.02em;
  --tracking-display: -0.035em;
  --tracking-label: 0.06em;
  --weight-regular: 400;
  --weight-medium: 520;
  --weight-semibold: 600;
  --weight-bold: 680;

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* Layout */
  --sidebar: 248px;
  --content-max: 1360px;
  --content-narrow: 760px;
  --gutter: var(--space-7);
  --gap: var(--space-4);
  --gap-lg: var(--space-6);
  --header-h: 56px;
  --tabbar-h: 64px;
  --touch: 44px;

  /* Shape */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Motion */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 280ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-color: ease;
  --press-scale: 0.97;

  /* Z layers */
  --z-sidebar: 30;
  --z-header: 40;
  --z-tabbar: 50;
  --z-sheet: 60;
  --z-skip: 100;
}

/* ============ BRAIZONE ORIGINAL · BLUE (default) ============ */
:root,
[data-theme="blue"] {
  color-scheme: dark;
  --bg: #09111f;
  --bg-secondary: #0e182a;
  --surface: #14233a;
  --surface-elevated: #1b2d47;
  --surface-subtle: #101c30;
  --surface-hover: #22385a;
  --surface-inset: #0b1526;
  --material: rgba(14, 24, 42, 0.82);
  --border: rgba(140, 180, 235, 0.13);
  --border-strong: rgba(140, 180, 235, 0.25);
  --text: #eef5ff;
  --text-secondary: #b6c6dd;
  --muted: #8395b0;
  --accent: #4fb8ff;
  --accent-hover: #7ccbff;
  --accent-strong: #3aa8f6;
  --accent-contrast: #061a2c;
  --accent-soft: rgba(79, 184, 255, 0.15);
  --accent-glow: rgba(79, 184, 255, 0.32);
  --accent-text: #8fd2ff;
  --orbit: rgba(120, 165, 255, 0.10);
  --success: #34e3a4;
  --success-soft: rgba(52, 227, 164, 0.12);
  --warning: #f3b64e;
  --warning-soft: rgba(243, 182, 78, 0.13);
  --danger: #ff6f81;
  --danger-soft: rgba(255, 111, 129, 0.13);
  --info: #5bc6ff;
  --info-soft: rgba(91, 198, 255, 0.12);
  --stock-available: #34e3a4;
  --stock-available-soft: rgba(52, 227, 164, 0.12);
  --stock-low: #f3b64e;
  --stock-low-soft: rgba(243, 182, 78, 0.13);
  --stock-out: #ff6f81;
  --stock-out-soft: rgba(255, 111, 129, 0.13);
  --chart: #64ceff;
  --chart-fill: rgba(100, 206, 255, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 64px rgba(0, 0, 0, 0.5);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --overlay: rgba(2, 5, 12, 0.66);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --theme-color: #09111f;
  --nav-active: #c6e9ff;
  --nav-active-text: #0a1d33;
  --hero-tint: #1e3d59;
  --panel-fill: linear-gradient(145deg, #1d2f4b, #14233a);
}

/* ============ BRAIZONE PASTEL PINK ============ */
[data-theme="pink"] {
  color-scheme: light;
  --bg: #f8f1f3;
  --bg-secondary: #f3e8ec;
  --surface: #fffdfd;
  --surface-elevated: #ffffff;
  --surface-subtle: #fbf5f7;
  --surface-hover: #f6ebef;
  --surface-inset: #f4e9ed;
  --material: rgba(255, 251, 252, 0.82);
  --border: rgba(120, 60, 85, 0.11);
  --border-strong: rgba(120, 60, 85, 0.2);
  --text: #2b1b23;
  --text-secondary: #5e4852;
  --muted: #776470;
  --accent: #b84f78;
  --accent-hover: #a5436a;
  --accent-strong: #b0476f;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(196, 92, 133, 0.11);
  --accent-glow: rgba(196, 92, 133, 0.22);
  --accent-text: #943859;
  --orbit: rgba(196, 92, 133, 0.10);
  --success: #25785a;
  --success-soft: rgba(47, 143, 107, 0.1);
  --warning: #8d5e16;
  --warning-soft: rgba(196, 140, 40, 0.13);
  --danger: #c13b55;
  --danger-soft: rgba(193, 59, 85, 0.09);
  --info: #33639f;
  --info-soft: rgba(63, 115, 184, 0.09);
  --stock-available: #626b78;     /* silver */
  --stock-available-soft: #eceef2;
  --stock-low: #9b3a62;
  --stock-low-soft: rgba(196, 92, 133, 0.12);
  --stock-out: #735205;           /* gold */
  --stock-out-soft: #f5e7c4;
  --chart: #c45c85;
  --chart-fill: rgba(196, 92, 133, 0.18);
  --shadow-sm: 0 1px 2px rgba(90, 40, 60, 0.06);
  --shadow-md: 0 1px 2px rgba(90, 40, 60, 0.05), 0 8px 24px rgba(90, 40, 60, 0.07);
  --shadow-lg: 0 2px 6px rgba(90, 40, 60, 0.07), 0 24px 64px rgba(90, 40, 60, 0.14);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --overlay: rgba(60, 30, 42, 0.32);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --theme-color: #f8f1f3;
  /* Superficies de tarjetas y navegación propias del tema: sin ellas heredaba los tonos azules de :root. */
  --nav-active: #f4d7e2;
  --nav-active-text: #6e2242;
  --hero-tint: #f9e6ed;
  --panel-fill: linear-gradient(145deg, #ffffff, #fdf6f8);
}

/* ============ BRAIZONE URBAN GLASS (carbón, gris humo, acentos amarillos) ============ */
/* El amarillo es el acento; las advertencias van en naranja para no confundirse con él. Contraste ≥ 4,5:1 medido. */
[data-theme="urban"] {
  color-scheme: dark;
  --bg: #121315;
  --bg-secondary: #17181b;
  --surface: #1c1d21;
  --surface-elevated: #25272c;
  --surface-subtle: #18191c;
  --surface-hover: #2d2f35;
  --surface-inset: #141518;
  --material: rgba(24, 25, 28, 0.84);
  --border: rgba(230, 226, 214, 0.12);
  --border-strong: rgba(230, 226, 214, 0.24);
  --text: #f2f1ec;
  --text-secondary: #c7c5bd;
  --muted: #a19f97;
  --accent: #f2c230;
  --accent-hover: #f6d055;
  --accent-strong: #e3b21c;
  --accent-contrast: #1a1500;
  --accent-soft: rgba(242, 194, 48, 0.14);
  --accent-glow: rgba(242, 194, 48, 0.26);
  --accent-text: #f6d468;
  --orbit: rgba(242, 194, 48, 0.08);
  --success: #5fd39a;
  --success-soft: rgba(95, 211, 154, 0.12);
  --warning: #ff9f43;
  --warning-soft: rgba(255, 159, 67, 0.13);
  --danger: #ff6f6f;
  --danger-soft: rgba(255, 111, 111, 0.13);
  --info: #7cbcff;
  --info-soft: rgba(124, 188, 255, 0.12);
  --stock-available: #5fd39a;
  --stock-available-soft: rgba(95, 211, 154, 0.12);
  --stock-low: #ff9f43;
  --stock-low-soft: rgba(255, 159, 67, 0.13);
  --stock-out: #ff6f6f;
  --stock-out-soft: rgba(255, 111, 111, 0.13);
  --chart: #f2c230;
  --chart-fill: rgba(242, 194, 48, 0.18);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.55);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --overlay: rgba(4, 4, 5, 0.7);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --theme-color: #121315;
  --nav-active: #f6d468;
  --nav-active-text: #1a1500;
  --hero-tint: #2a2a24;
  --panel-fill: linear-gradient(145deg, #26282d, #1c1d21);
}

/* ============ BRAIZONE ORGANIC GLASS (marrón, marfil, arena y salvia) ============ */
[data-theme="organic"] {
  color-scheme: light;
  --bg: #f6f1e7;
  --bg-secondary: #efe7d8;
  --surface: #fffcf5;
  --surface-elevated: #ffffff;
  --surface-subtle: #faf5ec;
  --surface-hover: #f1e9da;
  --surface-inset: #f0e8d9;
  --material: rgba(255, 252, 245, 0.84);
  --border: rgba(90, 70, 45, 0.13);
  --border-strong: rgba(90, 70, 45, 0.24);
  --text: #2e2419;
  --text-secondary: #5a4a3a;
  --muted: #6f604f;
  --accent: #4f6b4c;
  --accent-hover: #455f42;
  --accent-strong: #4a6547;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(79, 107, 76, 0.12);
  --accent-glow: rgba(79, 107, 76, 0.22);
  --accent-text: #3e573c;
  --orbit: rgba(120, 95, 60, 0.10);
  --success: #2f6b45;
  --success-soft: rgba(47, 107, 69, 0.1);
  --warning: #8a5a12;
  --warning-soft: rgba(196, 140, 40, 0.14);
  --danger: #a8392f;
  --danger-soft: rgba(168, 57, 47, 0.1);
  --info: #2f5f8a;
  --info-soft: rgba(47, 95, 138, 0.1);
  --stock-available: #2f6b45;
  --stock-available-soft: rgba(47, 107, 69, 0.1);
  --stock-low: #8a5a12;
  --stock-low-soft: rgba(196, 140, 40, 0.14);
  --stock-out: #a8392f;
  --stock-out-soft: rgba(168, 57, 47, 0.1);
  --chart: #6b8a67;
  --chart-fill: rgba(107, 138, 103, 0.2);
  --shadow-sm: 0 1px 2px rgba(70, 50, 25, 0.06);
  --shadow-md: 0 1px 2px rgba(70, 50, 25, 0.05), 0 8px 24px rgba(70, 50, 25, 0.08);
  --shadow-lg: 0 2px 6px rgba(70, 50, 25, 0.07), 0 24px 64px rgba(70, 50, 25, 0.14);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --overlay: rgba(50, 38, 22, 0.32);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --theme-color: #f6f1e7;
  /* Superficies de tarjetas y navegación propias del tema: sin ellas heredaba los tonos azules de :root. */
  --nav-active: #dde7d6;
  --nav-active-text: #2c4429;
  --hero-tint: #ece4d2;
  --panel-fill: linear-gradient(145deg, #fffefa, #faf4e8);
}

/* ============ BRAIZONE PURPLE ============ */
[data-theme="purple"] {
  color-scheme: dark;
  --bg: #09070f;
  --bg-secondary: #0e0b17;
  --surface: #14101f;
  --surface-elevated: #1b1629;
  --surface-subtle: #100d19;
  --surface-hover: #211a32;
  --surface-inset: #0b0912;
  --material: rgba(16, 12, 26, 0.8);
  --border: rgba(190, 165, 255, 0.11);
  --border-strong: rgba(190, 165, 255, 0.22);
  --text: #f3effc;
  --text-secondary: #c2b8d8;
  --muted: #958aac;
  --accent: #a586ff;
  --accent-hover: #b89dff;
  --accent-strong: #7552e6;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(165, 134, 255, 0.14);
  --accent-glow: rgba(165, 134, 255, 0.3);
  --accent-text: #c4adff;
  --orbit: rgba(180, 150, 255, 0.10);
  --success: #7fd9b6;
  --success-soft: rgba(127, 217, 182, 0.11);
  --warning: #eec27a;
  --warning-soft: rgba(238, 194, 122, 0.12);
  --danger: #ff8197;
  --danger-soft: rgba(255, 129, 151, 0.12);
  --info: #8fb8ff;
  --info-soft: rgba(143, 184, 255, 0.12);
  --stock-available: #d3d7e1;     /* silver */
  --stock-available-soft: rgba(211, 215, 225, 0.1);
  --stock-low: #f0a6c6;           /* rose quartz */
  --stock-low-soft: rgba(240, 166, 198, 0.11);
  --stock-out: #e9b949;           /* gold */
  --stock-out-soft: rgba(233, 185, 73, 0.17);
  --chart: #b39aff;
  --chart-fill: rgba(179, 154, 255, 0.22);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.55);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --overlay: rgba(4, 2, 10, 0.68);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --theme-color: #09070f;
  /* Superficies de tarjetas y navegación propias del tema: sin ellas heredaba los tonos azules de :root. */
  --nav-active: #e3d9ff;
  --nav-active-text: #1d1433;
  --hero-tint: #2a2142;
  --panel-fill: linear-gradient(145deg, #221b33, #1b1629);
}

/* ============ BRAIZONE LIGHT ============ */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fa;
  --bg-secondary: #edf1f7;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-subtle: #f8fafd;
  --surface-hover: #f0f4fa;
  --surface-inset: #eef2f8;
  --material: rgba(255, 255, 255, 0.84);
  --border: rgba(20, 40, 80, 0.09);
  --border-strong: rgba(20, 40, 80, 0.17);
  --text: #0c1424;
  --text-secondary: #3d4a60;
  --muted: #5d697e;
  --accent: #1f5fe8;
  --accent-hover: #1a52cc;
  --accent-strong: #1f5fe8;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(31, 95, 232, 0.08);
  --accent-glow: rgba(31, 95, 232, 0.2);
  --accent-text: #1b55d0;
  --orbit: rgba(31, 95, 232, 0.08);
  --success: #08774f;
  --success-soft: rgba(11, 138, 92, 0.09);
  --warning: #8a5300;
  --warning-soft: rgba(214, 140, 20, 0.12);
  --danger: #c62f47;
  --danger-soft: rgba(198, 47, 71, 0.08);
  --info: #1d6fb8;
  --info-soft: rgba(29, 111, 184, 0.08);
  --stock-available: #08774f;
  --stock-available-soft: rgba(11, 138, 92, 0.09);
  --stock-low: #8a5300;
  --stock-low-soft: rgba(214, 140, 20, 0.12);
  --stock-out: #c62f47;
  --stock-out-soft: rgba(198, 47, 71, 0.08);
  --chart: #2a6af0;
  --chart-fill: rgba(42, 106, 240, 0.14);
  --shadow-sm: 0 1px 2px rgba(15, 30, 60, 0.06);
  --shadow-md: 0 1px 2px rgba(15, 30, 60, 0.05), 0 8px 24px rgba(15, 30, 60, 0.07);
  --shadow-lg: 0 2px 6px rgba(15, 30, 60, 0.07), 0 24px 64px rgba(15, 30, 60, 0.16);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 1);
  --overlay: rgba(12, 20, 36, 0.3);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --theme-color: #f4f6fa;
  /* Superficies de tarjetas y navegación propias del tema: sin ellas heredaba los tonos azules de :root. */
  --nav-active: #dbe7ff;
  --nav-active-text: #123a8f;
  --hero-tint: #e3ecfb;
  --panel-fill: linear-gradient(145deg, #ffffff, #f8fafd);
}