/* ============================================================================
   NEXO BARBER — DESIGN TOKENS v1.0
   Ejes: [data-theme] = obsidiana|lino|neo|clasica|alto
         [data-mode]  = light|dark   (siempre concreto; 'auto' se resuelve en JS)
   Todos los ratios de contraste verificados contra WCAG 2.1 AA.
   ========================================================================= */

/* ---------- 1. TOKENS GLOBALES NO CROMÁTICOS ---------- */
:root {
  --font-ui-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-ui-sys);
  --font-display: var(--font-ui-sys);
  --font-num: ui-monospace, "SF Mono", "Roboto Mono", "DejaVu Sans Mono", monospace;

  --fs-100: 11px;
  --fs-200: 12px;
  --fs-300: 13px;
  --fs-400: 15px;
  --fs-500: clamp(17px, 1.4vw + 14px, 18px);
  --fs-600: clamp(20px, 2vw + 16px, 22px);
  --fs-700: clamp(24px, 3vw + 18px, 30px);
  --fs-800: clamp(30px, 5vw + 18px, 42px);
  --fs-900: clamp(38px, 8vw + 16px, 64px);

  --lh-tight: 1.15;  --lh-snug: 1.3;  --lh-base: 1.55;  --lh-loose: 1.75;
  --ls-display: -.015em;  --ls-ui: 0;  --ls-caps: .08em;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700;    --fw-black: 800;

  --sp-0: 0;     --sp-1: 2px;  --sp-2: 4px;  --sp-3: 8px;  --sp-4: 12px;
  --sp-5: 16px;  --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 40px;
  --sp-10: 48px; --sp-11: 64px; --sp-12: 80px; --sp-13: 96px;
  --gutter: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tap: 48px;
  --navh: 62px;

  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;
  --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;
  --r-card: var(--r-lg);
  --r-control: var(--r-md);
  --r-image: var(--r-md);

  --bw: 1px;

  --shadow-rgb: 0 0 0;
  --shadow-a: 1;
  --sh-0: none;
  --sh-1: 0 1px 2px rgb(var(--shadow-rgb) / calc(.06 * var(--shadow-a)));
  --sh-2: 0 1px 2px rgb(var(--shadow-rgb) / calc(.05 * var(--shadow-a))),
          0 4px 12px rgb(var(--shadow-rgb) / calc(.07 * var(--shadow-a)));
  --sh-3: 0 2px 4px rgb(var(--shadow-rgb) / calc(.06 * var(--shadow-a))),
          0 10px 26px rgb(var(--shadow-rgb) / calc(.10 * var(--shadow-a)));
  --sh-4: 0 4px 8px rgb(var(--shadow-rgb) / calc(.08 * var(--shadow-a))),
          0 24px 56px rgb(var(--shadow-rgb) / calc(.18 * var(--shadow-a)));
  --sh-inset: inset 0 1px 0 rgb(255 255 255 / .04);
  --sh-accent: 0 0 0 transparent;

  --blur-glass: 0px;
  --blur-scrim: 0px;
  --glass-sat: 100%;
  --glass-bg: var(--surface);
  --glass-border: var(--border);

  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 320ms; --dur-5: 480ms;
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in:     cubic-bezier(.55, 0, 1, .45);
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  --z-base: 0;  --z-sticky: 10; --z-header: 20; --z-countdown: 30;
  --z-sheet: 40; --z-scrim: 50; --z-modal: 60; --z-popup: 70; --z-toast: 80;

  --accent-soft:  rgb(var(--accent-rgb)  / .10);
  --accent-soft2: rgb(var(--accent-rgb)  / .18);
  --success-soft: rgb(var(--success-rgb) / .12);
  --warning-soft: rgb(var(--warning-rgb) / .13);
  --danger-soft:  rgb(var(--danger-rgb)  / .13);
}

/* ---------- 1b. RED DE SEGURIDAD ----------
   Si por lo que sea no hay atributo de tema, la app igual pinta.
   Especificidad 0,1,0 → cualquier [data-nx-theme] gana. */
:root {
  --bg:#0B0C0F;  --bg-2:#111319;
  --surface:#14161B; --surface-2:#1C1F26; --surface-3:#22262F;
  --surface-sunken:#0E1015;
  --scrim: rgb(3 4 6 / .70);
  --border:#2F3440; --border-strong:#646C7E;
  --text:#F2F4F8; --text-2:#A3ABBA; --text-3:#6E7482;
  --accent:#D89A4E; --accent-hover:#C4863C; --accent-text:#E6AE63;
  --accent-on:#1A1206; --accent-rgb: 216 154 78; --accent-2:#7FB8FF;
  --success:#3DD68C;  --success-rgb: 61 214 140;
  --warning:#F0B429;  --warning-rgb: 240 180 41;
  --danger:#FF7A7A;   --danger-rgb: 255 122 122;
  --info:#7FB8FF; --focus:#E6AE63;
  --surface-rgb: 20 22 27;
}

/* ===================== OBSIDIANA ===================== */
[data-nx-theme="obsidiana"] {
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ls-display: -.015em;
  --lh-tight: 1.15;
  --r-card: 18px; --r-control: 14px; --r-image: 12px;
  --blur-glass: 18px; --glass-sat: 150%;
}
[data-nx-theme="obsidiana"][data-nx-mode="dark"] {
  color-scheme: dark;
  --bg:#0B0C0F;  --bg-2:#111319;
  --surface:#14161B; --surface-2:#1C1F26; --surface-3:#22262F;
  --surface-sunken:#0E1015;
  --scrim: rgb(3 4 6 / .70);
  --border:#2F3440; --border-strong:#646C7E;
  --text:#F2F4F8; --text-2:#A3ABBA; --text-3:#6E7482;
  --accent:#D89A4E; --accent-hover:#C4863C; --accent-text:#E6AE63;
  --accent-on:#1A1206; --accent-rgb: 216 154 78;
  --accent-2:#7FB8FF;
  --success:#3DD68C;  --success-rgb: 61 214 140;
  --warning:#F0B429;  --warning-rgb: 240 180 41;
  --danger:#FF7A7A;   --danger-rgb: 255 122 122;
  --info:#7FB8FF;
  --focus:#E6AE63;
  --shadow-rgb: 0 0 0; --shadow-a: 2.4;
  --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.28), 0 8px 28px rgb(var(--accent-rgb)/.20);
  --glass-bg: rgb(20 22 27 / .72);
  --glass-border: rgb(255 255 255 / .10);
  --surface-rgb: 20 22 27;
}
[data-nx-theme="obsidiana"][data-nx-mode="light"] {
  color-scheme: light;
  --bg:#F6F5F2;  --bg-2:#EFEDE7;
  --surface:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#FFFFFF;
  --surface-sunken:#F1EFEA;
  --scrim: rgb(28 24 18 / .55);
  --border:#DAD5CB; --border-strong:#8E8779;
  --text:#17181C; --text-2:#5C6270; --text-3:#8E8779;
  --accent:#8A5A22; --accent-hover:#734917; --accent-text:#8A5A22;
  --accent-on:#FFFFFF; --accent-rgb: 138 90 34;
  --accent-2:#0B5FA8;
  --success:#0F7A46;  --success-rgb: 15 122 70;
  --warning:#8A5A00;  --warning-rgb: 138 90 0;
  --danger:#B3261E;   --danger-rgb: 179 38 30;
  --info:#0B5FA8;
  --focus:#8A5A22;
  --shadow-rgb: 60 45 25; --shadow-a: 1;
  --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.30);
  --glass-bg: rgb(255 255 255 / .78);
  --glass-border: rgb(255 255 255 / .90);
  --surface-rgb: 255 255 255;
}

/* ===================== LINO ===================== */
[data-nx-theme="lino"] {
  --font-display: var(--font-ui-sys);
  --ls-display: -.022em;
  --lh-tight: 1.1;
  --fw-bold: 600;
  --r-card: 14px; --r-control: 10px; --r-image: 10px;
  --blur-glass: 0px;
}
[data-nx-theme="lino"][data-nx-mode="light"] {
  color-scheme: light;
  --bg:#F5F5F7;  --bg-2:#EFEFF2;
  --surface:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#FFFFFF;
  --surface-sunken:#F2F2F7;
  --scrim: rgb(0 0 0 / .40);
  --border:#D2D2D7; --border-strong:#86868B;
  --text:#1D1D1F; --text-2:#6E6E73; --text-3:#78787D;
  --accent:#0B6BCB; --accent-hover:#095AAD; --accent-text:#0B6BCB;
  --accent-on:#FFFFFF; --accent-rgb: 11 107 203;
  --accent-2:#0B6BCB;
  --success:#1A7F4B;  --success-rgb: 26 127 75;
  --warning:#8A5A00;  --warning-rgb: 138 90 0;
  --danger:#C2261C;   --danger-rgb: 194 38 28;
  --info:#0B6BCB;
  --focus:#0B6BCB;
  --shadow-rgb: 0 0 0; --shadow-a: .9;
  --glass-bg: rgb(255 255 255 / .86);
  --glass-border: rgb(0 0 0 / .06);
  --surface-rgb: 255 255 255;
}
[data-nx-theme="lino"][data-nx-mode="dark"] {
  color-scheme: dark;
  --bg:#000000;  --bg-2:#0A0A0C;
  --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-3:#333336;
  --surface-sunken:#141416;
  --scrim: rgb(0 0 0 / .68);
  --border:#38383A; --border-strong:#6E6E73;
  --text:#F5F5F7; --text-2:#9E9EA5; --text-3:#6E6E73;
  --accent:#4DA3FF; --accent-hover:#3B8FE8; --accent-text:#63B3FF;
  --accent-on:#00121F; --accent-rgb: 77 163 255;
  --accent-2:#63B3FF;
  --success:#4ADE9B;  --success-rgb: 74 222 155;
  --warning:#F5C24C;  --warning-rgb: 245 194 76;
  --danger:#FF7B72;   --danger-rgb: 255 123 114;
  --info:#63B3FF;
  --focus:#63B3FF;
  --shadow-rgb: 0 0 0; --shadow-a: 2.6;
  --glass-bg: rgb(28 28 30 / .80);
  --glass-border: rgb(255 255 255 / .08);
  --surface-rgb: 28 28 30;
}

/* ===================== NEO ===================== */
[data-nx-theme="neo"] {
  --font-display: "Anton", "Arial Narrow", Impact, var(--font-ui-sys);
  --ls-display: -.01em;
  --lh-tight: .92;
  --fw-bold: 800;
  --r-card: 4px; --r-control: 4px; --r-image: 4px;
  --bw: 2px;
  --blur-glass: 0px;
  --sh-2: 4px 4px 0 var(--border-strong);
  --sh-3: 6px 6px 0 var(--border-strong);
  --sh-4: 8px 8px 0 var(--border-strong);
}
[data-nx-theme="neo"][data-nx-mode="dark"] {
  color-scheme: dark;
  --bg:#0D0D0D;  --bg-2:#131313;
  --surface:#161616; --surface-2:#1F1F1F; --surface-3:#262626;
  --surface-sunken:#101010;
  --scrim: rgb(0 0 0 / .74);
  --border:#3A3A3A; --border-strong:#6B6B6B;
  --text:#FFFFFF; --text-2:#B8B8B8; --text-3:#6E6E6E;
  --accent:#D6FF3D; --accent-hover:#C2EA24; --accent-text:#D6FF3D;
  --accent-on:#0D1400; --accent-rgb: 214 255 61;
  --accent-2:#FF3D7F;
  --success:#4DE38A;  --success-rgb: 77 227 138;
  --warning:#FFC53D;  --warning-rgb: 255 197 61;
  --danger:#FF5C7A;   --danger-rgb: 255 92 122;
  --info:#63B3FF;
  --focus:#D6FF3D;
  --shadow-rgb: 0 0 0; --shadow-a: 1;
  --sh-accent: 0 0 0 2px var(--accent);
  --glass-bg: var(--surface);
  --glass-border: var(--border);
  --surface-rgb: 22 22 22;
}
[data-nx-theme="neo"][data-nx-mode="light"] {
  color-scheme: light;
  --bg:#FFFDF2;  --bg-2:#FFF8DE;
  --surface:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#FFFFFF;
  --surface-sunken:#F7F4E6;
  --scrim: rgb(17 17 17 / .58);
  --border:#191919; --border-strong:#191919;
  --text:#111111; --text-2:#4A4A4A; --text-3:#767676;
  --accent:#D6FF3D; --accent-hover:#C2EA24; --accent-text:#5C6B00;
  --accent-on:#111111; --accent-rgb: 214 255 61;
  --accent-2:#D6006B;
  --success:#1A7F4B;  --success-rgb: 26 127 75;
  --warning:#7A4E00;  --warning-rgb: 122 78 0;
  --danger:#C2261C;   --danger-rgb: 194 38 28;
  --info:#0B6BCB;
  --focus:#111111;
  --shadow-rgb: 25 25 25; --shadow-a: 1;
  --sh-accent: 0 0 0 2px #191919;
  --glass-bg: var(--surface);
  --glass-border: var(--border);
  --surface-rgb: 255 255 255;
}

/* ===================== CLÁSICA ===================== */
[data-nx-theme="clasica"] {
  --font-display: "Abril Fatface", Georgia, "Times New Roman", serif;
  --ls-display: 0;
  --lh-tight: 1.05;
  --lh-base: 1.6;
  --fw-bold: 700;
  --r-card: 10px; --r-control: 8px; --r-image: 6px;
}
[data-nx-theme="clasica"][data-nx-mode="light"] {
  color-scheme: light;
  --bg:#F7F4EE;  --bg-2:#F1EDE4;
  --surface:#FFFFFF; --surface-2:#FFFDF8; --surface-3:#FFFFFF;
  --surface-sunken:#F1EDE4;
  --scrim: rgb(27 26 23 / .58);
  --border:#D6CDBB; --border-strong:#8C8375;
  --text:#1B1A17; --text-2:#57514A; --text-3:#8C8375;
  --accent:#B3232C; --accent-hover:#991C24; --accent-text:#B3232C;
  --accent-on:#FFFFFF; --accent-rgb: 179 35 44;
  --accent-2:#1B3A6B;
  --brass:#A6822B;
  --success:#1A7F4B;  --success-rgb: 26 127 75;
  --warning:#8A6100;  --warning-rgb: 138 97 0;
  --danger:#A31219;   --danger-rgb: 163 18 25;
  --info:#1B3A6B;
  --focus:#1B3A6B;
  --shadow-rgb: 60 45 25; --shadow-a: 1.1;
  --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.35);
  --glass-bg: rgb(255 253 248 / .88);
  --glass-border: rgb(166 130 43 / .28);
  --surface-rgb: 255 255 255;
}
[data-nx-theme="clasica"][data-nx-mode="dark"] {
  color-scheme: dark;
  --bg:#141210;  --bg-2:#1A1713;
  --surface:#1D1A16; --surface-2:#26221C; --surface-3:#2E2921;
  --surface-sunken:#171410;
  --scrim: rgb(10 8 6 / .72);
  --border:#3B342B; --border-strong:#786C5C;
  --text:#F5EFE3; --text-2:#B5A992; --text-3:#786C5C;
  --accent:#E0656B; --accent-hover:#CE5158; --accent-text:#E0656B;
  --accent-on:#2B0507; --accent-rgb: 224 101 107;
  --accent-2:#7FA3D9;
  --brass:#D9AE4A;
  --success:#5FCB8E;  --success-rgb: 95 203 142;
  --warning:#E0BF4A;  --warning-rgb: 224 191 74;
  --danger:#FF8A8A;   --danger-rgb: 255 138 138;
  --info:#7FA3D9;
  --focus:#D9AE4A;
  --shadow-rgb: 0 0 0; --shadow-a: 2.4;
  --sh-accent: 0 0 0 1px rgb(217 174 74 / .35);
  --glass-bg: rgb(29 26 22 / .80);
  --glass-border: rgb(217 174 74 / .18);
  --surface-rgb: 29 26 22;
}

/* ===================== ALTO CONTRASTE ===================== */
[data-nx-theme="alto"] {
  --font-ui: "Atkinson Hyperlegible", var(--font-ui-sys);
  --font-display: "Atkinson Hyperlegible", var(--font-ui-sys);
  --ls-display: 0;
  --lh-tight: 1.3;
  --lh-base: 1.75;
  --fs-400: 16px;
  --fw-bold: 700;
  --r-card: 8px; --r-control: 8px; --r-image: 8px;
  --bw: 2px;
  --blur-glass: 0px;
  --sh-0: none; --sh-1: none; --sh-2: none; --sh-3: none; --sh-4: none;
  --sh-inset: none;
  --accent-soft:  var(--surface-2);
  --success-soft: var(--surface-2);
  --warning-soft: var(--surface-2);
  --danger-soft:  var(--surface-2);
}
[data-nx-theme="alto"][data-nx-mode="light"] {
  color-scheme: light;
  --bg:#FFFFFF;  --bg-2:#FFFFFF;
  --surface:#FFFFFF; --surface-2:#F0F0F0; --surface-3:#FFFFFF;
  --surface-sunken:#F0F0F0;
  --scrim: rgb(0 0 0 / .78);
  --border:#121212; --border-strong:#121212;
  --text:#000000; --text-2:#2E2E2E; --text-3:#5E5E5E;
  --accent:#003BA5; --accent-hover:#002B7A; --accent-text:#003BA5;
  --accent-on:#FFFFFF; --accent-rgb: 0 59 165;
  --accent-2:#003BA5;
  --success:#005C2E;  --success-rgb: 0 92 46;
  --warning:#6B4200;  --warning-rgb: 107 66 0;
  --danger:#A00000;   --danger-rgb: 160 0 0;
  --info:#003BA5;
  --focus:#003BA5;
  --glass-bg: var(--surface);
  --glass-border: var(--border);
  --surface-rgb: 255 255 255;
}
[data-nx-theme="alto"][data-nx-mode="dark"] {
  color-scheme: dark;
  --bg:#000000;  --bg-2:#000000;
  --surface:#0B0B0B; --surface-2:#171717; --surface-3:#0B0B0B;
  --surface-sunken:#171717;
  --scrim: rgb(0 0 0 / .88);
  --border:#FFFFFF; --border-strong:#FFFFFF;
  --text:#FFFFFF; --text-2:#DCDCDC; --text-3:#A8A8A8;
  --accent:#FFD400; --accent-hover:#E6BF00; --accent-text:#FFD400;
  --accent-on:#000000; --accent-rgb: 255 212 0;
  --accent-2:#8FD0FF;
  --success:#66FFA6;  --success-rgb: 102 255 166;
  --warning:#FFC24D;  --warning-rgb: 255 194 77;
  --danger:#FF9A9A;   --danger-rgb: 255 154 154;
  --info:#8FD0FF;
  --focus:#FFD400;
  --glass-bg: var(--surface);
  --glass-border: var(--border);
  --surface-rgb: 11 11 11;
}