/* Paletas predefinidas del kit de Open Design: los tokens.css de Dr. Sebastiani y de SKIN LAB, copiados SIN cambiar
 * valores; solo se les antepone [data-paleta="..."] a los selectores para poder elegirlos (etapas 2-3, 02/11/2026).
 * VITRU es la paleta de siempre (tokens.css). Claro y oscuro de cada una salen de sus propios tokens. */
/* ── skinlab ── */
[data-paleta="skinlab"], [data-paleta="skinlab"][data-theme="light"] {
  
  --skl-petrol: #16343D;
  --skl-petrol-950: #0A1A1F;
  --skl-petrol-900: #11292F;
  --skl-petrol-700: #2A5560;
  --skl-teal: #45777F;
  --skl-cobre: #D68F5F;
  --skl-marron: #96562C;
  --skl-taupe: #BAAB9D;
  --skl-arena: #DFD3C7;
  --skl-offwhite: #E6E2DE;
  --skl-fondo-claro: #EFECE8;
  --skl-letra-clara: #ECE6DF;
  --skl-linea: #DFD3C7;

  
  --detalle: var(--skl-marron);
  --hilo-cobre: linear-gradient(90deg, transparent, #B97446 20%, #D68F5F 50%, #B97446 80%, transparent);
  --antetitulo: var(--skl-teal);
  --texto-parrafo: var(--fg);
  --link: var(--skl-teal);

  
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-shine: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 28%, transparent 55%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(17,41,47,.05), 0 24px 44px -18px rgba(17,41,47,.30);
  --glass-blur: blur(18px) saturate(1.2);
  --halo: radial-gradient(80% 40% at 85% 62%, rgba(214,143,95,.18), transparent 70%),
          radial-gradient(70% 35% at 10% 55%, rgba(22,52,61,.10), transparent 70%);
  --cabecera-bg: radial-gradient(120% 90% at 50% 0%, #2A5560 0%, #16343D 50%, #0A1A1F 100%);

  
  --accent-gradient: linear-gradient(180deg, rgba(37,76,86,.74), rgba(22,52,61,.82) 60%, rgba(26,50,56,.86)), radial-gradient(120% 90% at 50% 120%, rgba(214,143,95,.22), transparent 60%);
  --accent-border: rgba(246,226,208,.30);
  --accent-shadow: inset 0 1px 0 rgba(250,234,218,.34), inset 0 0 0 1px rgba(250,234,218,.06), 0 10px 22px -8px rgba(17,41,47,.45);
  --btn-2-bg: linear-gradient(180deg, rgba(240,230,220,.30), rgba(223,211,199,.42));
  --btn-2-border: rgba(250,240,230,.85);
  --btn-2-shadow: inset 0 1px 0 rgba(255,250,244,.85), inset 0 0 0 1px rgba(150,86,44,.08), 0 8px 18px -8px rgba(17,41,47,.22);
  --btn-shine: linear-gradient(180deg, rgba(250,234,218,.30) 0%, rgba(250,234,218,.08) 46%, transparent 56%),
               linear-gradient(120deg, transparent 35%, rgba(250,234,218,.07) 48%, transparent 62%);

  
  --bg: var(--skl-fondo-claro);
  --surface: #FFFFFF;
  --surface-warm: var(--skl-arena);

  
  --fg: var(--skl-petrol);
  --fg-2: var(--skl-petrol-900);
  --muted: #4F6A70;
  --meta: var(--muted);

  
  --border: var(--skl-linea);
  --border-soft: var(--border);

  
  --accent: var(--skl-petrol);
  --accent-on: var(--skl-letra-clara);
  --accent-hover: var(--skl-petrol-900);
  --accent-active: var(--skl-petrol-950);

  
  --success: #15803D;
  --warn: #B45309;
  --danger: #C81E1E;
  --aviso-bg: linear-gradient(180deg, rgba(69,119,127,.16), rgba(69,119,127,.10));
  --aviso-border: rgba(69,119,127,.22);
  --aviso-inset: inset 0 1px 0 rgba(255,255,255,.6);

  
  --font-display: "Athena", Georgia, "Times New Roman", serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 50px;

  --leading-body: 1.6;
  --leading-tight: 1.08;
  --tracking-display: 0.01em;

  
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --section-y-desktop: 96px;
  --section-y-tablet: 72px;
  --section-y-phone: 48px;

  
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 9999px;

  
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 2px 6px rgba(17,41,47,.05), 0 24px 44px -18px rgba(17,41,47,.30);

  
  --focus-ring: 0 0 0 3px rgba(150, 86, 44, 0.40);

  
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.23, 1, 0.32, 1);

  
  --container-max: 1120px;
  --container-gutter-desktop: 48px;
  --container-gutter-tablet: 32px;
  --container-gutter-phone: 16px;
}

[data-paleta="skinlab"][data-theme="dark"] {
  --antetitulo: var(--skl-cobre);
  --texto-parrafo: rgba(236,230,223,.86);
  --bg: var(--skl-petrol);
  --surface: var(--skl-petrol-700);
  --surface-warm: var(--skl-petrol-900);

  --fg: var(--skl-letra-clara);
  --fg-2: var(--skl-offwhite);
  --muted: #B5C4C6;
  --meta: var(--muted);

  --border: rgba(181, 196, 198, 0.16);
  --border-soft: var(--border);

  --accent: var(--skl-petrol-700);
  --accent-on: var(--skl-letra-clara);
  --accent-hover: #356A76;
  --accent-active: #1E424B;
  --accent-gradient: linear-gradient(180deg, rgba(70,120,130,.46), rgba(42,85,96,.48) 50%, rgba(30,66,75,.56));
  --accent-border: rgba(214,143,95,.45);
  --accent-shadow: inset 0 1px 0 rgba(250,234,218,.26), inset 0 -8px 16px -10px rgba(214,143,95,.24), 0 10px 20px -8px rgba(0,0,0,.6);
  --btn-2-bg: linear-gradient(180deg, rgba(223,211,199,.12), rgba(223,211,199,.05));
  --btn-2-border: rgba(223,211,199,.30);
  --btn-2-shadow: inset 0 1px 0 rgba(250,234,218,.20), 0 8px 18px -10px rgba(0,0,0,.5);

  --detalle: var(--skl-cobre);
  --link: var(--skl-cobre);

  --success: #3DDC84;
  --warn: #FFC96B;
  --danger: #FF6B6B;

  --glass-bg: linear-gradient(180deg, rgba(42,85,96,.42), rgba(17,41,47,.55));
  --glass-border: rgba(214, 143, 95, 0.18);
  --glass-shine: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 30%, transparent 55%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 28px 50px -18px rgba(0,0,0,.7);
  --halo: radial-gradient(60% 30% at 85% 60%, rgba(214,143,95,.10), transparent 70%);
  --cabecera-bg: transparent;
  --aviso-bg: var(--glass-bg);
  --aviso-border: var(--glass-border);
  --aviso-inset: inset 0 1px 0 rgba(255,255,255,.10);

  --elev-raised: 0 28px 50px -18px rgba(0,0,0,.7);
  --focus-ring: 0 0 0 3px rgba(214, 143, 95, 0.5);
}