/* ============================================================
 * AUTO-GENERADO desde dsm/tokens/tokens.json — NO editar a mano.
 * Regenerar: node dsm/build-tokens.mjs
 * Modelo (DS Cencosud): primitives -> semanticNeutral (+ modes) -> themes -> semanticBrand.
 * Los componentes consumen SOLO tokens semánticos (--color-*, --font-*, --state-*, --spacing-*, ...).
 * ============================================================ */

:root {
  /* --- Primitivos (paleta cruda, no usar directo en componentes) --- */
  --gray-0: #FFFFFF;
  --gray-50: #F5F6F8;
  --gray-100: #EAECF0;
  --gray-150: #F2F4F6;
  --gray-200: #E1E4E9;
  --gray-300: #C7CDD6;
  --gray-400: #9AA1AB;
  --gray-500: #6B7280;
  --gray-550: #697079;
  --gray-600: #475569;
  --gray-700: #374151;
  --gray-800: #1B1E22;
  --gray-850: #161A20;
  --gray-900: #121417;
  --green-500: #15803D;
  --green-400: #35C77E;
  --green-700: #166534;
  --green-300: #86EFAC;
  --green-bg: #E4F8EA;
  --green-bg-dark: #123024;
  --red-500: #E5484D;
  --red-400: #A8555A;
  --red-700: #7F1D1D;
  --red-300: #FCA5A5;
  --red-light: #F0808F;
  --red-bg: #FBE7EA;
  --red-bg-dark: #33191E;
  --amber-500: #B45309;
  --amber-400: #E7B75F;
  --amber-700: #713F12;
  --amber-300: #FDE68A;
  --amber-bg: #FDF3D7;
  --amber-bg-dark: #2C2413;
  --blue-500: #1D4ED8;
  --blue-400: #4A90D9;
  --teal-500: #2BB6C4;
  --slate-500: #8B83B0;
  --neutral-500: #8A9099;
  --brown-500: #6B6560;
  --ink-dark: #E7EAEE;
  --line-dark: #282C32;
  --line-strong-dark: #3A3F47;
  --green-light: #5AD98A;
  --amber-light: #F0B44E;
  --tool-teal: #0F766E;
  --tool-teal-dk: #2DD4BF;
  --tool-teal-2: #14B8A6;
  --tool-tint: #EAFBF6;
  --tool-tint-dk: #0E2C29;
  --tool-line: #B7EADF;
  --tool-line-dk: #1C4A45;
  --tile-a-lt: #EEF5FF;
  --tile-b-lt: #F4F1FE;
  --tile-c-lt: #EAFBF3;
  --tile-d-lt: #FFF6EC;
  --tile-a-dk: #182231;
  --tile-b-dk: #211E33;
  --tile-c-dk: #12281F;
  --tile-d-dk: #2A2113;
  --soon-500: #64748B;
  --soon-bg-lt: #EEF1F5;
  --soon-dk: #9AA1AB;
  --soon-bg-dk: #22262B;
  --info-500: #1D4ED8;
  --info-bg-lt: #E4EDFF;
  --info-line-lt: #CBDCFF;
  --info-dk: #93B4FF;
  --info-bg-dk: #182231;
  --info-line-dk: #28405F;
  --st-nuevo-bg: #20242A;
  --st-espera-bg: #211F2B;
  --st-prep-bg: #16222E;
  --st-listo-bg: #12251C;
  --st-camino-bg: #0F2429;
  --st-cerr-bg: #1A1614;
  --st-cancel-bg: #241618;
  --bg-elevated-dk: #1B1614;
  --text-muted-warm: #8A8078;

  /* --- Spacing --- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Sombras --- */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 14px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.14);

  /* --- Tipografía --- */
  --font-family-display: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-tool: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, 'Courier New', Courier, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13.5px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;

  /* --- Semánticos neutros (modo claro; el modo oscuro los sobrescribe) --- */
  --color-bg-page: var(--gray-50);
  --color-bg-surface: var(--gray-0);
  --color-bg-subtle: var(--gray-150);
  --color-text-primary: var(--gray-850);
  --color-text-secondary: var(--gray-550);
  --color-text-faint: var(--gray-400);
  --color-text-on-brand: var(--gray-0);
  --color-border-default: var(--gray-100);
  --color-border-strong: var(--gray-300);
  --color-icon-default: var(--gray-500);
  --color-feedback-success: var(--green-500);
  --color-feedback-success-bg: var(--green-bg);
  --color-feedback-success-text: var(--green-700);
  --color-feedback-success-border: var(--green-300);
  --color-feedback-error: var(--red-500);
  --color-feedback-error-bg: var(--red-bg);
  --color-feedback-error-text: var(--red-700);
  --color-feedback-error-border: var(--red-300);
  --color-feedback-warning: var(--amber-500);
  --color-feedback-warning-bg: var(--amber-bg);
  --color-feedback-warning-text: var(--amber-700);
  --color-feedback-warning-border: var(--amber-300);
  --color-feedback-success-ind: var(--green-500);
  --color-price-free: var(--green-500);
  --color-note: var(--green-500);
  --color-surface-warm: var(--gray-50);
  --color-surface-warm-strong: var(--gray-100);
  --color-accent-subtle: var(--gray-100);
  --color-on-accent: var(--gray-900);
  --color-icon-muted: var(--gray-400);
  --color-decor-warm: var(--gray-300);
  --color-tool-accent: var(--tool-teal);
  --color-tool-accent-2: var(--tool-teal-2);
  --color-tool-accent-tint: var(--tool-tint);
  --color-tool-accent-line: var(--tool-line);
  --color-tile-a: var(--tile-a-lt);
  --color-tile-b: var(--tile-b-lt);
  --color-tile-c: var(--tile-c-lt);
  --color-tile-d: var(--tile-d-lt);
  --color-soon: var(--soon-500);
  --color-soon-bg: var(--soon-bg-lt);
  --color-info: var(--info-500);
  --color-info-bg: var(--info-bg-lt);
  --color-info-line: var(--info-line-lt);
  --color-state-nuevo-bg: var(--st-nuevo-bg);
  --color-state-espera-bg: var(--st-espera-bg);
  --color-state-prep-bg: var(--st-prep-bg);
  --color-state-listo-bg: var(--st-listo-bg);
  --color-state-camino-bg: var(--st-camino-bg);
  --color-state-cerrado-bg: var(--st-cerr-bg);
  --color-state-cancel-bg: var(--st-cancel-bg);
  --color-bg-elevated: var(--gray-0);
  --color-text-muted-warm: var(--gray-500);
  --color-action-fill: var(--tool-teal);
  --color-on-action: var(--gray-0);

  /* --- Estados de pedido (semánticos, comunes) --- */
  --color-state-nuevo: var(--neutral-500);
  --color-state-espera: var(--slate-500);
  --color-state-prep: var(--blue-400);
  --color-state-listo: var(--green-400);
  --color-state-camino: var(--teal-500);
  --color-state-cerrado: var(--brown-500);
  --color-state-cancel: var(--red-400);

  /* --- Urgencia --- */
  --color-urgency-demora: var(--amber-400);
  --color-urgency-atraso: var(--red-500);

  /* --- Marca por defecto ("neutro"; base que heredan los temas que no la declaran) --- */
  --brand-50: #EEF1F5;
  --brand-400: #64748B;
  --brand-500: #475569;
  --brand-600: #374151;
  --brand-700: #334155;
  --accent-500: #475569;
  --accent-600: #374151;
  --font-family-display: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

/* Modo oscuro: por atributo explícito y por preferencia del sistema (salvo modo claro forzado). */
:root[data-mode="dark"] {
  --color-bg-page: var(--gray-900);
  --color-bg-surface: var(--gray-800);
  --color-bg-subtle: var(--gray-800);
  --color-text-primary: var(--ink-dark);
  --color-text-secondary: var(--gray-400);
  --color-text-faint: var(--gray-500);
  --color-border-default: var(--line-dark);
  --color-border-strong: var(--line-strong-dark);
  --color-icon-default: var(--gray-400);
  --color-feedback-success: var(--green-light);
  --color-feedback-success-bg: var(--green-bg-dark);
  --color-feedback-success-text: var(--green-400);
  --color-feedback-success-border: var(--green-700);
  --color-feedback-error-bg: var(--red-bg-dark);
  --color-feedback-error-text: var(--red-light);
  --color-feedback-error-border: var(--red-700);
  --color-feedback-warning: var(--amber-light);
  --color-feedback-warning-bg: var(--amber-bg-dark);
  --color-feedback-warning-text: var(--amber-400);
  --color-feedback-warning-border: var(--amber-700);
  --color-feedback-success-ind: var(--green-light);
  --color-price-free: var(--green-light);
  --color-note: var(--green-light);
  --color-tool-accent: var(--tool-teal-dk);
  --color-action-fill: var(--tool-teal-dk);
  --color-tool-accent-tint: var(--tool-tint-dk);
  --color-tool-accent-line: var(--tool-line-dk);
  --color-tile-a: var(--tile-a-dk);
  --color-tile-b: var(--tile-b-dk);
  --color-tile-c: var(--tile-c-dk);
  --color-tile-d: var(--tile-d-dk);
  --color-soon: var(--soon-dk);
  --color-soon-bg: var(--soon-bg-dk);
  --color-info: var(--info-dk);
  --color-info-bg: var(--info-bg-dk);
  --color-info-line: var(--info-line-dk);
  --color-bg-elevated: var(--gray-800);
  --color-text-muted-warm: var(--gray-400);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --color-bg-page: var(--gray-900);
    --color-bg-surface: var(--gray-800);
    --color-bg-subtle: var(--gray-800);
    --color-text-primary: var(--ink-dark);
    --color-text-secondary: var(--gray-400);
    --color-text-faint: var(--gray-500);
    --color-border-default: var(--line-dark);
    --color-border-strong: var(--line-strong-dark);
    --color-icon-default: var(--gray-400);
    --color-feedback-success: var(--green-light);
    --color-feedback-success-bg: var(--green-bg-dark);
    --color-feedback-success-text: var(--green-400);
    --color-feedback-success-border: var(--green-700);
    --color-feedback-error-bg: var(--red-bg-dark);
    --color-feedback-error-text: var(--red-light);
    --color-feedback-error-border: var(--red-700);
    --color-feedback-warning: var(--amber-light);
    --color-feedback-warning-bg: var(--amber-bg-dark);
    --color-feedback-warning-text: var(--amber-400);
    --color-feedback-warning-border: var(--amber-700);
    --color-feedback-success-ind: var(--green-light);
    --color-price-free: var(--green-light);
    --color-note: var(--green-light);
    --color-tool-accent: var(--tool-teal-dk);
    --color-action-fill: var(--tool-teal-dk);
    --color-tool-accent-tint: var(--tool-tint-dk);
    --color-tool-accent-line: var(--tool-line-dk);
    --color-tile-a: var(--tile-a-dk);
    --color-tile-b: var(--tile-b-dk);
    --color-tile-c: var(--tile-c-dk);
    --color-tile-d: var(--tile-d-dk);
    --color-soon: var(--soon-dk);
    --color-soon-bg: var(--soon-bg-dk);
    --color-info: var(--info-dk);
    --color-info-bg: var(--info-bg-dk);
    --color-info-line: var(--info-line-dk);
    --color-bg-elevated: var(--gray-800);
    --color-text-muted-warm: var(--gray-400);
  }
}

/* ============================================================
 * TEMAS DE MARCA (white-label). Aplicar con [data-theme="..."] en <html>.
 * Los mismos semánticos de marca apuntan a distinta paleta/tipografía por tema.
 * ============================================================ */

[data-theme="neutro"] {
  --brand-50: #EEF1F5;
  --brand-400: #64748B;
  --brand-500: #475569;
  --brand-600: #374151;
  --brand-700: #334155;
  --accent-500: #475569;
  --accent-600: #374151;
  --font-family-display: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

[data-theme="asushi"] {
  --brand-50: #271417;
  --brand-500: #C8102E;
  --brand-600: #A30D26;
  --font-family-display: 'Fraunces', Georgia, serif;
  --font-family-body: 'Karla', system-ui, sans-serif;
  --color-tool-accent: #C8102E;
  --color-tool-accent-2: #F26D78;
  --surfaces: [object Object];
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

[data-theme="asushi"][data-mode="dark"] {
  --color-bg-page: #12100F;
  --color-bg-surface: #211B19;
  --color-bg-subtle: #241E1B;
  --color-text-primary: #F5F1EC;
  --color-text-secondary: #B9B1A8;
  --color-text-faint: #8A837B;
  --color-border-default: #3A302C;
  --color-tool-accent: #C8102E;
  --color-tool-accent-2: #F26D78;
  --color-tool-accent-tint: #2A1618;
  --color-tool-accent-line: #5A2A2E;
  --color-tile-a: #241A1B;
  --color-tile-b: #28211A;
  --color-tile-c: #1D231B;
  --color-tile-d: #2A2113;
  --color-feedback-success: #35C77E;
  --color-feedback-success-bg: #12281C;
  --color-feedback-warning: #E7B75F;
  --color-feedback-warning-bg: #2A2113;
  --color-soon: #B9B1A8;
  --color-soon-bg: #2A2320;
  --color-info: #E7B75F;
  --color-info-bg: #241A1B;
  --color-info-line: #5A2A2E;
  --color-bg-elevated: var(--bg-elevated-dk);
  --color-text-muted-warm: var(--text-muted-warm);
}

[data-theme="asushi"][data-surface="carta"][data-mode="dark"] {
  --color-bg-page: #12100F;
  --color-bg-subtle: #1B1917;
  --color-bg-surface: #211E1B;
  --color-border-default: #332E29;
  --color-text-primary: #F5F1EC;
  --color-text-secondary: #B9B1A8;
  --color-text-faint: #8A8178;
  --color-brand-soft: #F26D78;
  --color-accent: #E7B75F;
  --color-on-accent: #2A1E00;
  --color-feedback-success: #1F5B3A;
  --color-feedback-success-bg: #123020;
  --color-feedback-success-text: #C8F2D8;
  --color-feedback-success-ind: #3DDC84;
  --color-price-free: #37D67A;
  --color-note: #5AD98A;
  --color-feedback-warning-bg: #5A3A12;
  --color-feedback-warning-text: #FFCF8A;
  --color-feedback-error: #E0555F;
  --color-feedback-error-bg: #3A1517;
  --color-feedback-error-border: #6B2226;
  --color-feedback-error-text: #FFD7DA;
}

[data-theme="sazon"] {
  --brand-50: #FFF1F1;
  --brand-400: #F87171;
  --brand-500: #DC2626;
  --brand-600: #B91C1C;
  --brand-700: #843030;
  --accent-500: #CA8A04;
  --accent-600: #A16207;
  --font-family-display: 'Playfair Display SC', Georgia, serif;
  --font-family-body: 'Karla', system-ui, sans-serif;
  --color-bg-page: #FEF2F2;
  --color-text-primary: #450A0A;
  --color-text-secondary: #7A3B3B;
  --color-border-default: #F3D6D6;
  --color-feedback-success: #166534;
  --color-surface-warm: #FFFCF3;
  --color-surface-warm-strong: #F3E3D8;
  --color-accent-subtle: #FFF8E6;
  --color-on-accent: #2A1E00;
  --color-icon-muted: #C9B8AC;
  --color-decor-warm: #F3D2C6;
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

[data-theme="calida"] {
  --theme-nombre: 'Cálida';
  --brand-50: #FFF1E8;
  --brand-400: #D9632B;
  --brand-500: #B8420F;
  --brand-600: #9A3412;
  --brand-700: #7C2D12;
  --accent-500: #D97706;
  --accent-600: #92400E;
  --color-bg-page: #FFF8F1;
  --color-accent-subtle: #FEF3C7;
  --color-on-accent: #2A1500;
  --color-tool-accent: #B8420F;
  --color-tool-accent-2: #D9632B;
  --color-tool-accent-tint: #FFF1E8;
  --color-tool-accent-line: #F6C9AC;
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

[data-theme="calida"][data-mode="dark"] {
  --color-brand-primary: #F59E6B;
  --color-brand-primary-hover: #FFB48A;
  --color-brand-deep: #FFCDB0;
  --color-brand-subtle: #3A2014;
  --color-brand-soft: #F59E6B;
  --color-icon-brand: #F59E6B;
  --color-accent: #F5B83D;
  --color-accent-strong: #F7C968;
  --color-accent-subtle: #3A2A0C;
  --color-on-accent: #1A1205;
  --color-text-on-brand: #140B05;
  --color-tool-accent: #F59E6B;
  --color-tool-accent-2: #F59E6B;
  --color-tool-accent-tint: #3A2014;
  --color-tool-accent-line: #6B3A22;
}

[data-theme="fresca"] {
  --theme-nombre: 'Fresca';
  --brand-50: #ECFDF3;
  --brand-400: #16A34A;
  --brand-500: #15803D;
  --brand-600: #166534;
  --brand-700: #14532D;
  --accent-500: #CA8A04;
  --accent-600: #854D0E;
  --color-bg-page: #F4FBF6;
  --color-accent-subtle: #FEF9C3;
  --color-on-accent: #241A00;
  --color-tool-accent: #15803D;
  --color-tool-accent-2: #16A34A;
  --color-tool-accent-tint: #ECFDF3;
  --color-tool-accent-line: #B7E8C8;
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

[data-theme="fresca"][data-mode="dark"] {
  --color-brand-primary: #4ADE80;
  --color-brand-primary-hover: #86EFAC;
  --color-brand-deep: #BBF7D0;
  --color-brand-subtle: #0F2A1A;
  --color-brand-soft: #4ADE80;
  --color-icon-brand: #4ADE80;
  --color-accent: #FACC15;
  --color-accent-strong: #FDE047;
  --color-accent-subtle: #2E2A0A;
  --color-on-accent: #241A00;
  --color-text-on-brand: #06210F;
  --color-tool-accent: #4ADE80;
  --color-tool-accent-2: #4ADE80;
  --color-tool-accent-tint: #0F2A1A;
  --color-tool-accent-line: #1E5A38;
}

[data-theme="sobria"] {
  --theme-nombre: 'Sobria';
  --brand-50: #EEF2FF;
  --brand-400: #3B63B8;
  --brand-500: #1E3A8A;
  --brand-600: #172554;
  --brand-700: #101C44;
  --accent-500: #B08D57;
  --accent-600: #7A5A24;
  --color-bg-page: #F5F6FA;
  --color-accent-subtle: #F5EEDF;
  --color-on-accent: #1F1608;
  --color-tool-accent: #1E3A8A;
  --color-tool-accent-2: #3B63B8;
  --color-tool-accent-tint: #EEF2FF;
  --color-tool-accent-line: #C3CFF2;
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

[data-theme="sobria"][data-mode="dark"] {
  --color-brand-primary: #93B4FF;
  --color-brand-primary-hover: #B7CCFF;
  --color-brand-deep: #DCE6FF;
  --color-brand-subtle: #16213F;
  --color-brand-soft: #93B4FF;
  --color-icon-brand: #93B4FF;
  --color-accent: #D6B27A;
  --color-accent-strong: #E4C595;
  --color-accent-subtle: #2B2315;
  --color-on-accent: #1F1608;
  --color-text-on-brand: #0A1430;
  --color-tool-accent: #93B4FF;
  --color-tool-accent-2: #93B4FF;
  --color-tool-accent-tint: #16213F;
  --color-tool-accent-line: #2C4478;
}

[data-theme="vibrante"] {
  --theme-nombre: 'Vibrante';
  --brand-50: #FFEFF6;
  --brand-400: #E0407F;
  --brand-500: #C2185B;
  --brand-600: #9D1249;
  --brand-700: #7A0E38;
  --accent-500: #F5A300;
  --accent-600: #7C3AED;
  --color-bg-page: #FFF7FB;
  --color-accent-subtle: #F3E8FF;
  --color-on-accent: #2A1900;
  --color-tool-accent: #C2185B;
  --color-tool-accent-2: #E0407F;
  --color-tool-accent-tint: #FFEFF6;
  --color-tool-accent-line: #F8BCD6;
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

[data-theme="vibrante"][data-mode="dark"] {
  --color-brand-primary: #FF7AB0;
  --color-brand-primary-hover: #FF9CC4;
  --color-brand-deep: #FFC2DB;
  --color-brand-subtle: #3A1226;
  --color-brand-soft: #FF7AB0;
  --color-icon-brand: #FF7AB0;
  --color-accent: #FFC93C;
  --color-accent-strong: #C4A0FF;
  --color-accent-subtle: #2A1A45;
  --color-on-accent: #2A1900;
  --color-text-on-brand: #240A16;
  --color-tool-accent: #FF7AB0;
  --color-tool-accent-2: #FF7AB0;
  --color-tool-accent-tint: #3A1226;
  --color-tool-accent-line: #6E2A4A;
}

[data-theme="oscura"] {
  --theme-nombre: 'Oscura';
  --brand-50: #2A2217;
  --brand-400: #E8B04A;
  --brand-500: #E8B04A;
  --brand-600: #F2C66F;
  --brand-700: #F7D894;
  --accent-500: #E8654F;
  --accent-600: #FF8A75;
  --color-bg-page: #14110F;
  --color-bg-surface: #1F1B18;
  --color-bg-subtle: #26211D;
  --color-bg-elevated: #26211D;
  --color-text-primary: #F4EEE6;
  --color-text-secondary: #BDB3A6;
  --color-text-faint: #8F857A;
  --color-text-muted-warm: #BDB3A6;
  --color-border-default: #38312B;
  --color-border-strong: #4A4139;
  --color-icon-default: #BDB3A6;
  --color-text-on-brand: #1A1205;
  --color-on-accent: #1A0A06;
  --color-accent-subtle: #33201B;
  --color-surface-warm: #1F1B18;
  --color-surface-warm-strong: #2A2420;
  --color-decor-warm: #4A4139;
  --color-icon-muted: #8F857A;
  --color-tool-accent: #E8B04A;
  --color-tool-accent-2: #F2C66F;
  --color-tool-accent-tint: #2A2217;
  --color-tool-accent-line: #5A4725;
  --color-feedback-success: var(--green-light);
  --color-feedback-success-bg: var(--green-bg-dark);
  --color-feedback-success-text: var(--green-400);
  --color-feedback-success-border: var(--green-700);
  --color-feedback-error-bg: var(--red-bg-dark);
  --color-feedback-error-text: var(--red-light);
  --color-feedback-error-border: var(--red-700);
  --color-feedback-warning: var(--amber-light);
  --color-feedback-warning-bg: var(--amber-bg-dark);
  --color-feedback-warning-text: var(--amber-400);
  --color-feedback-warning-border: var(--amber-700);
  --color-feedback-success-ind: var(--green-light);
  --color-price-free: var(--green-light);
  --color-note: var(--green-light);
  --color-tile-a: var(--tile-a-dk);
  --color-tile-b: var(--tile-b-dk);
  --color-tile-c: var(--tile-c-dk);
  --color-tile-d: var(--tile-d-dk);
  --color-soon: var(--soon-dk);
  --color-soon-bg: var(--soon-bg-dk);
  --color-info: var(--info-dk);
  --color-info-bg: var(--info-bg-dk);
  --color-info-line: var(--info-line-dk);
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

:root[data-theme="oscura"]:not(#_) {
  --color-bg-page: #14110F;
  --color-bg-surface: #1F1B18;
  --color-bg-subtle: #26211D;
  --color-bg-elevated: #26211D;
  --color-text-primary: #F4EEE6;
  --color-text-secondary: #BDB3A6;
  --color-text-faint: #8F857A;
  --color-text-muted-warm: #BDB3A6;
  --color-border-default: #38312B;
  --color-border-strong: #4A4139;
  --color-icon-default: #BDB3A6;
  --color-text-on-brand: #1A1205;
  --color-on-accent: #1A0A06;
  --color-accent-subtle: #33201B;
  --color-surface-warm: #1F1B18;
  --color-surface-warm-strong: #2A2420;
  --color-decor-warm: #4A4139;
  --color-icon-muted: #8F857A;
  --color-tool-accent: #E8B04A;
  --color-tool-accent-2: #F2C66F;
  --color-tool-accent-tint: #2A2217;
  --color-tool-accent-line: #5A4725;
  --color-feedback-success: var(--green-light);
  --color-feedback-success-bg: var(--green-bg-dark);
  --color-feedback-success-text: var(--green-400);
  --color-feedback-success-border: var(--green-700);
  --color-feedback-error-bg: var(--red-bg-dark);
  --color-feedback-error-text: var(--red-light);
  --color-feedback-error-border: var(--red-700);
  --color-feedback-warning: var(--amber-light);
  --color-feedback-warning-bg: var(--amber-bg-dark);
  --color-feedback-warning-text: var(--amber-400);
  --color-feedback-warning-border: var(--amber-700);
  --color-feedback-success-ind: var(--green-light);
  --color-price-free: var(--green-light);
  --color-note: var(--green-light);
  --color-tile-a: var(--tile-a-dk);
  --color-tile-b: var(--tile-b-dk);
  --color-tile-c: var(--tile-c-dk);
  --color-tile-d: var(--tile-d-dk);
  --color-soon: var(--soon-dk);
  --color-soon-bg: var(--soon-bg-dk);
  --color-info: var(--info-dk);
  --color-info-bg: var(--info-bg-dk);
  --color-info-line: var(--info-line-dk);
}

[data-theme="vicius"] {
  --theme-nombre: 'Vicius Studio';
  --brand-50: #0C2730;
  --brand-400: #00E5FF;
  --brand-500: #00E5FF;
  --brand-600: #66F0FF;
  --brand-700: #B3F7FF;
  --accent-500: #00FFA3;
  --accent-600: #66FFC8;
  --font-family-display: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --color-bg-page: #0A0E12;
  --color-bg-surface: #111820;
  --color-bg-subtle: #16202A;
  --color-bg-elevated: #16202A;
  --color-text-primary: #EAF2F5;
  --color-text-secondary: #9FB2BC;
  --color-text-faint: #7D919C;
  --color-text-muted-warm: #9FB2BC;
  --color-border-default: #1E2A33;
  --color-border-strong: #2C3B47;
  --color-icon-default: #9FB2BC;
  --color-text-on-brand: #04121A;
  --color-on-accent: #04121A;
  --color-accent-subtle: #0B2A20;
  --color-surface-warm: #111820;
  --color-surface-warm-strong: #16202A;
  --color-decor-warm: #2C3B47;
  --color-icon-muted: #7D919C;
  --color-tool-accent: #00E5FF;
  --color-tool-accent-2: #00FFA3;
  --color-tool-accent-tint: #0C2730;
  --color-tool-accent-line: #1C4C57;
  --color-feedback-success: var(--green-light);
  --color-feedback-success-bg: var(--green-bg-dark);
  --color-feedback-success-text: var(--green-400);
  --color-feedback-success-border: var(--green-700);
  --color-feedback-error-bg: var(--red-bg-dark);
  --color-feedback-error-text: var(--red-light);
  --color-feedback-error-border: var(--red-700);
  --color-feedback-warning: var(--amber-light);
  --color-feedback-warning-bg: var(--amber-bg-dark);
  --color-feedback-warning-text: var(--amber-400);
  --color-feedback-warning-border: var(--amber-700);
  --color-feedback-success-ind: var(--green-light);
  --color-price-free: var(--green-light);
  --color-note: var(--green-light);
  --color-tile-a: var(--tile-a-dk);
  --color-tile-b: var(--tile-b-dk);
  --color-tile-c: var(--tile-c-dk);
  --color-tile-d: var(--tile-d-dk);
  --color-soon: var(--soon-dk);
  --color-soon-bg: var(--soon-bg-dk);
  --color-info: var(--info-dk);
  --color-info-bg: var(--info-bg-dk);
  --color-info-line: var(--info-line-dk);
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

:root[data-theme="vicius"]:not(#_) {
  --color-bg-page: #0A0E12;
  --color-bg-surface: #111820;
  --color-bg-subtle: #16202A;
  --color-bg-elevated: #16202A;
  --color-text-primary: #EAF2F5;
  --color-text-secondary: #9FB2BC;
  --color-text-faint: #7D919C;
  --color-text-muted-warm: #9FB2BC;
  --color-border-default: #1E2A33;
  --color-border-strong: #2C3B47;
  --color-icon-default: #9FB2BC;
  --color-text-on-brand: #04121A;
  --color-on-accent: #04121A;
  --color-accent-subtle: #0B2A20;
  --color-surface-warm: #111820;
  --color-surface-warm-strong: #16202A;
  --color-decor-warm: #2C3B47;
  --color-icon-muted: #7D919C;
  --color-tool-accent: #00E5FF;
  --color-tool-accent-2: #00FFA3;
  --color-tool-accent-tint: #0C2730;
  --color-tool-accent-line: #1C4C57;
  --color-feedback-success: var(--green-light);
  --color-feedback-success-bg: var(--green-bg-dark);
  --color-feedback-success-text: var(--green-400);
  --color-feedback-success-border: var(--green-700);
  --color-feedback-error-bg: var(--red-bg-dark);
  --color-feedback-error-text: var(--red-light);
  --color-feedback-error-border: var(--red-700);
  --color-feedback-warning: var(--amber-light);
  --color-feedback-warning-bg: var(--amber-bg-dark);
  --color-feedback-warning-text: var(--amber-400);
  --color-feedback-warning-border: var(--amber-700);
  --color-feedback-success-ind: var(--green-light);
  --color-price-free: var(--green-light);
  --color-note: var(--green-light);
  --color-tile-a: var(--tile-a-dk);
  --color-tile-b: var(--tile-b-dk);
  --color-tile-c: var(--tile-c-dk);
  --color-tile-d: var(--tile-d-dk);
  --color-soon: var(--soon-dk);
  --color-soon-bg: var(--soon-bg-dk);
  --color-info: var(--info-dk);
  --color-info-bg: var(--info-bg-dk);
  --color-info-line: var(--info-line-dk);
}

[data-theme="kocino"] {
  --theme-nombre: 'Kocino';
  --brand-50: #FDF7F0;
  --brand-400: #AD5D00;
  --brand-500: #AD5D00;
  --brand-600: #AD5D00;
  --brand-700: #1A1A1A;
  --accent-500: #FFD54F;
  --accent-600: #AD5D00;
  --font-family-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-family-body: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-tool: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --color-bg-page: #FDF7F0;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #FDF7F0;
  --color-bg-elevated: #FFFFFF;
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5E554C;
  --color-text-faint: #5E554C;
  --color-text-muted-warm: #5E554C;
  --color-border-default: #E8DCCB;
  --color-border-strong: #8C7F70;
  --color-icon-default: #5E554C;
  --color-icon-muted: #5E554C;
  --color-text-on-brand: #FFFFFF;
  --color-on-accent: #1A1A1A;
  --color-accent-subtle: #FDF7F0;
  --color-surface-warm: #FFFFFF;
  --color-surface-warm-strong: #FDF7F0;
  --color-decor-warm: #8C7F70;
  --color-tool-accent: #AD5D00;
  --color-tool-accent-2: #AD5D00;
  --color-tool-accent-tint: #FDF7F0;
  --color-tool-accent-line: #E8DCCB;
  --color-action-fill: #FF8A00;
  --color-on-action: #1A1A1A;
  --radius-sm: 8px;
  --radius-md: 14px;
  --color-brand-primary: var(--brand-500);
  --color-brand-primary-hover: var(--brand-600);
  --color-brand-subtle: var(--brand-50);
  --color-brand-soft: var(--brand-400);
  --color-brand-deep: var(--brand-700);
  --color-icon-brand: var(--brand-500);
  --color-accent: var(--accent-500);
  --color-accent-strong: var(--accent-600);
}

[data-theme="kocino"][data-mode="dark"] {
  --color-bg-page: #1A1A1A;
  --color-bg-surface: #262626;
  --color-bg-subtle: #262626;
  --color-bg-elevated: #262626;
  --color-text-primary: #FDF7F0;
  --color-text-secondary: #B8AFA6;
  --color-text-faint: #B8AFA6;
  --color-text-muted-warm: #B8AFA6;
  --color-border-default: #4A4540;
  --color-border-strong: #857B71;
  --color-icon-default: #B8AFA6;
  --color-icon-muted: #B8AFA6;
  --color-brand-primary: #FF8A00;
  --color-brand-primary-hover: #FF8A00;
  --color-brand-deep: #FDF7F0;
  --color-brand-subtle: #262626;
  --color-brand-soft: #FF8A00;
  --color-icon-brand: #FF8A00;
  --color-accent: #FFD54F;
  --color-accent-strong: #FFD54F;
  --color-accent-subtle: #262626;
  --color-on-accent: #1A1A1A;
  --color-text-on-brand: #1A1A1A;
  --color-surface-warm: #262626;
  --color-surface-warm-strong: #262626;
  --color-decor-warm: #857B71;
  --color-tool-accent: #FF8A00;
  --color-action-fill: #FF8A00;
  --color-on-action: #1A1A1A;
  --color-tool-accent-2: #FF8A00;
  --color-tool-accent-tint: #262626;
  --color-tool-accent-line: #4A4540;
}