/* =========================================================================
   BARRO Y CAL · tokens
   Escala de espacio: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128
   Radios: 12 · 20 · 28 · 40 · pastilla
   ========================================================================= */
:root {
  color-scheme: light;

  /* tipografía */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* primitivos */
  --cal-0: #FFFBF5;
  --cal-1: #F6EFE3;
  --cal-2: #EDE3D1;
  --cal-3: #E2D5BF;
  --tinta-900: #2B1810;
  --tinta-700: #5B4337;
  --tinta-600: #6B5446;
  --barro-600: #B03C25;
  --barro-700: #93301D;
  --barro-800: #6E2415;
  --barro-900: #4A180E;
  --crema-hero: #FFF6EA;

  /* superficies y texto */
  --bg: var(--cal-1);
  --bg-sunk: var(--cal-2);
  --surface: var(--cal-0);
  --surface-2: #FAF3E8;
  --line: var(--cal-3);
  --card-border: #EADFCB;
  --text: var(--tinta-900);
  --text-2: var(--tinta-700);
  --text-3: var(--tinta-600);
  --brand: var(--barro-600);
  --on-brand: var(--crema-hero);
  --brand-text: var(--barro-700);
  --brand-soft: #FBE9E0;
  --focus: #1D4ED8;
  --campo-borde: #8E7764;
  --brand-ui: var(--brand);
  --focus-claro: #FFF1E2;
  --flecha-select: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5446' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");

  /* portada */
  --hero-1: #B7462E;
  --hero-2: #B03C25;
  --hero-3: #98301C;
  --hero-glow: rgba(255, 186, 140, .34);
  --hero-text: var(--crema-hero);
  --hero-text-2: #FFF3E8;
  --hero-accent: #FFD7BF;
  --hero-halo-1: rgba(255, 236, 220, .075);
  --hero-halo-2: rgba(255, 236, 220, .055);
  --hero-halo-3: rgba(255, 236, 220, .04);
  --nicho-1: #FCF7EE;
  --nicho-2: var(--bg);

  /* botones */
  --btn-dark-bg: #24130C;
  --btn-dark-text: var(--crema-hero);
  --btn-dark-chip: var(--crema-hero);
  --btn-dark-chip-ink: #24130C;
  --btn-light-bg: var(--cal-0);
  --btn-light-text: var(--tinta-900);
  --btn-light-border: #E2D5BF;

  /* barra flotante */
  --nav-bg: rgba(255, 248, 238, .86);
  --nav-border: rgba(255, 255, 255, .65);
  --nav-text: var(--tinta-900);
  --nav-text-2: var(--tinta-700);
  --seg-bg: rgba(43, 24, 16, .07);
  --seg-on: var(--cal-0);

  /* semánticos (chips) */
  --ok-bg: #DCEBDD;
  --ok-fg: #1F5B3B;
  --ok-dot: #2E9E5B;
  --mal-bg: #FADDD3;
  --mal-fg: #8E1B0F;
  --hipo-bg: #F8DCEB;
  --hipo-fg: #7B1B4E;
  --neutro-bg: #EDE3D1;
  --neutro-fg: #4E392E;
  --prueba-bg: #E4E3F0;
  --prueba-fg: #33305E;

  /* cifras (tarjeta oscura) */
  --cifras-bg: #2B1810;
  --cifras-text: var(--crema-hero);
  --cifras-text-2: #E8D0BF;
  --cifras-text-3: #CDB3A1;
  --cifras-line: rgba(255, 236, 220, .16);
  --cifras-bar: #E9856A;
  --cifras-bar-2: #F7B9A3;
  --cifras-mal-bg: #4D1D14;
  --cifras-mal-fg: #FFC1AE;

  /* paquete recomendado y pie */
  --plan-rec-bg: var(--barro-600);
  --plan-rec-text: var(--crema-hero);
  --plan-rec-text-2: #FFEEE2;
  --pie-bg: #6E2415;
  --pie-text: var(--crema-hero);
  --pie-text-2: #F5D3C1;

  /* radios */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* sombras */
  --sh-1: 0 1px 2px rgba(74, 36, 18, .06), 0 10px 28px -12px rgba(74, 36, 18, .16);
  --sh-2: 0 2px 4px rgba(74, 36, 18, .06), 0 28px 56px -24px rgba(74, 36, 18, .30);
  --sh-nav: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 36px -10px rgba(70, 20, 8, .45);
  --sh-rec: 0 44px 80px -32px rgba(110, 36, 21, .65);
  --sh-btn: 0 10px 24px -10px rgba(36, 19, 12, .55);

  /* grano de pared encalada */
  --grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .3  0 0 0 0 .2  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grano-op: .55;

  --gutter: clamp(16px, 4vw, 40px);
}

/* Oscuro (sistema): no es una inversión; son sus propios tonos de «café de noche». */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #17100C;
    --bg-sunk: #120C09;
    --surface: #211611;
    --surface-2: #2A1C16;
    --line: #3C2B22;
    --card-border: #33241C;
    --text: #F7ECDF;
    --text-2: #DAC4B2;
    --text-3: #B9A08E;
    --brand: #B03C25;
    --on-brand: #FFF6EA;
    --brand-text: #F59C82;
    --brand-soft: #3A1A12;
    --focus: #8AB4FF;
    --campo-borde: #8A7263;
    --brand-ui: #E0614A;
    --focus-claro: #FFF1E2;
    --flecha-select: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DAC4B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    --hero-1: #7E2B19;
    --hero-2: #4F190E;
    --hero-3: #2A100A;
    --hero-glow: rgba(255, 122, 70, .22);
    --hero-text: #FFF6EA;
    --hero-text-2: #F6D9C8;
    --hero-accent: #FFB899;
    --hero-halo-1: rgba(255, 190, 150, .07);
    --hero-halo-2: rgba(255, 190, 150, .05);
    --hero-halo-3: rgba(255, 190, 150, .035);
    --nicho-1: #1E1410;
    --nicho-2: #17100C;
    --btn-dark-bg: #FFF1E2;
    --btn-dark-text: #2B1810;
    --btn-dark-chip: #2B1810;
    --btn-dark-chip-ink: #FFF1E2;
    --btn-light-bg: #2D1F18;
    --btn-light-text: #F7ECDF;
    --btn-light-border: #4A352A;
    --nav-bg: rgba(33, 22, 17, .72);
    --nav-border: rgba(255, 236, 220, .12);
    --nav-text: #F7ECDF;
    --nav-text-2: #DAC4B2;
    --seg-bg: rgba(255, 236, 220, .09);
    --seg-on: #4A352A;
    --ok-bg: #16301F;
    --ok-fg: #A5DDB6;
    --ok-dot: #4CC783;
    --mal-bg: #44160F;
    --mal-fg: #FFB7A4;
    --hipo-bg: #40162F;
    --hipo-fg: #F9B8D8;
    --neutro-bg: #34251D;
    --neutro-fg: #E6D2C2;
    --prueba-bg: #25244A;
    --prueba-fg: #C9C7F5;
    --cifras-bg: #3B140B;
    --cifras-text: #FFF6EA;
    --cifras-text-2: #EBD3C2;
    --cifras-text-3: #D2B8A6;
    --cifras-line: rgba(255, 236, 220, .16);
    --cifras-bar: #F0805F;
    --cifras-bar-2: #F9BCA6;
    --cifras-mal-bg: #5A2016;
    --cifras-mal-fg: #FFC9B8;
    --plan-rec-bg: #B03C25;
    --pie-bg: #2A100A;
    --pie-text: #FFF6EA;
    --pie-text-2: #EBC9B7;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -14px rgba(0, 0, 0, .6);
    --sh-2: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -26px rgba(0, 0, 0, .75);
    --sh-nav: 0 1px 0 rgba(255, 236, 220, .06) inset, 0 14px 40px -12px rgba(0, 0, 0, .75);
    --sh-rec: 0 44px 90px -34px rgba(176, 60, 37, .55);
    --sh-btn: 0 10px 24px -10px rgba(0, 0, 0, .7);
    --grano-op: .4;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17100C;
  --bg-sunk: #120C09;
  --surface: #211611;
  --surface-2: #2A1C16;
  --line: #3C2B22;
  --card-border: #33241C;
  --text: #F7ECDF;
  --text-2: #DAC4B2;
  --text-3: #B9A08E;
  --brand: #B03C25;
  --on-brand: #FFF6EA;
  --brand-text: #F59C82;
  --brand-soft: #3A1A12;
  --focus: #8AB4FF;
  --campo-borde: #8A7263;
  --brand-ui: #E0614A;
  --focus-claro: #FFF1E2;
  --flecha-select: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DAC4B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --hero-1: #7E2B19;
  --hero-2: #4F190E;
  --hero-3: #2A100A;
  --hero-glow: rgba(255, 122, 70, .22);
  --hero-text: #FFF6EA;
  --hero-text-2: #F6D9C8;
  --hero-accent: #FFB899;
  --hero-halo-1: rgba(255, 190, 150, .07);
  --hero-halo-2: rgba(255, 190, 150, .05);
  --hero-halo-3: rgba(255, 190, 150, .035);
  --nicho-1: #1E1410;
  --nicho-2: #17100C;
  --btn-dark-bg: #FFF1E2;
  --btn-dark-text: #2B1810;
  --btn-dark-chip: #2B1810;
  --btn-dark-chip-ink: #FFF1E2;
  --btn-light-bg: #2D1F18;
  --btn-light-text: #F7ECDF;
  --btn-light-border: #4A352A;
  --nav-bg: rgba(33, 22, 17, .72);
  --nav-border: rgba(255, 236, 220, .12);
  --nav-text: #F7ECDF;
  --nav-text-2: #DAC4B2;
  --seg-bg: rgba(255, 236, 220, .09);
  --seg-on: #4A352A;
  --ok-bg: #16301F;
  --ok-fg: #A5DDB6;
  --ok-dot: #4CC783;
  --mal-bg: #44160F;
  --mal-fg: #FFB7A4;
  --hipo-bg: #40162F;
  --hipo-fg: #F9B8D8;
  --neutro-bg: #34251D;
  --neutro-fg: #E6D2C2;
  --prueba-bg: #25244A;
  --prueba-fg: #C9C7F5;
  --cifras-bg: #3B140B;
  --cifras-text: #FFF6EA;
  --cifras-text-2: #EBD3C2;
  --cifras-text-3: #D2B8A6;
  --cifras-line: rgba(255, 236, 220, .16);
  --cifras-bar: #F0805F;
  --cifras-bar-2: #F9BCA6;
  --cifras-mal-bg: #5A2016;
  --cifras-mal-fg: #FFC9B8;
  --plan-rec-bg: #B03C25;
  --pie-bg: #2A100A;
  --pie-text: #FFF6EA;
  --pie-text-2: #EBC9B7;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -14px rgba(0, 0, 0, .6);
  --sh-2: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -26px rgba(0, 0, 0, .75);
  --sh-nav: 0 1px 0 rgba(255, 236, 220, .06) inset, 0 14px 40px -12px rgba(0, 0, 0, .75);
  --sh-rec: 0 44px 90px -34px rgba(176, 60, 37, .55);
  --sh-btn: 0 10px 24px -10px rgba(0, 0, 0, .7);
  --grano-op: .4;
}