/* =====================================================
   Har Picadas — Temas de identidad visual
   Cada tema define: colores, tipografías, radii, shadows
===================================================== */

/* ============ TEMA 1: ARENA CÁLIDA (actual/default) ============ */
[data-theme="arena-calida"],
:root:not([data-theme]) {
  /* palette */
  --bg: oklch(0.97 0.015 75);
  --bg-2: oklch(0.94 0.02 75);
  --bg-3: oklch(0.90 0.025 70);
  --ink: oklch(0.22 0.02 55);
  --ink-2: oklch(0.38 0.02 55);
  --ink-mute: oklch(0.55 0.015 55);
  --rule: oklch(0.86 0.015 70);
  --accent: oklch(0.58 0.15 40);       /* terracota suave */
  --accent-ink: oklch(0.30 0.10 40);
  --accent-soft: oklch(0.92 0.04 40);
  --olive: oklch(0.52 0.06 115);

  /* type */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* radius / shadow */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(30,20,10,0.05), 0 2px 6px rgba(30,20,10,0.04);
  --shadow-md: 0 6px 20px rgba(40,25,15,0.08), 0 2px 6px rgba(40,25,15,0.04);
  --shadow-lg: 0 20px 50px rgba(40,25,15,0.15);
}

/* ============ TEMA 2: TERRACOTA VIBRANTE ============ */
[data-theme="terracota-vibrante"] {
  /* palette */
  --bg: oklch(0.98 0.01 65);
  --bg-2: oklch(0.95 0.015 60);
  --bg-3: oklch(0.91 0.02 58);
  --ink: oklch(0.20 0.03 35);
  --ink-2: oklch(0.36 0.03 35);
  --ink-mute: oklch(0.52 0.02 40);
  --rule: oklch(0.84 0.02 65);
  --accent: oklch(0.62 0.20 35);       /* terracota más saturado */
  --accent-ink: oklch(0.32 0.15 35);
  --accent-soft: oklch(0.90 0.06 35);
  --olive: oklch(0.58 0.10 110);       /* más vibrante */

  /* type: más contraste con serif bold */
  --font-display: "DM Serif Display", "Instrument Serif", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Courier Prime", "Courier New", monospace;

  /* bordes más suaves, sombras más dramáticas */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-xl: 40px;
  --shadow-sm: 0 2px 4px rgba(40,15,10,0.08), 0 1px 2px rgba(40,15,10,0.06);
  --shadow-md: 0 8px 24px rgba(50,20,12,0.12), 0 3px 8px rgba(50,20,12,0.06);
  --shadow-lg: 0 24px 60px rgba(50,20,12,0.20);
}

/* ============ VARIANTE A: TERRACOTA WARM PEACH (cantina familiar) ============ */
[data-theme="terracota-warm-peach"] {
  --bg: oklch(0.95 0.04 50);
  --bg-2: oklch(0.91 0.05 48);
  --bg-3: oklch(0.87 0.06 46);
  --ink: oklch(0.24 0.06 30);
  --ink-2: oklch(0.40 0.05 32);
  --ink-mute: oklch(0.55 0.03 35);
  --rule: oklch(0.82 0.04 45);
  --accent: oklch(0.60 0.22 30);
  --accent-ink: oklch(0.32 0.18 30);
  --accent-soft: oklch(0.86 0.12 35);
  --olive: oklch(0.55 0.14 95);
  --font-display: "DM Serif Display", "Instrument Serif", Georgia, serif;
  --font-body: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px;
  --shadow-sm: 0 2px 4px rgba(80,30,10,0.08), 0 1px 2px rgba(80,30,10,0.06);
  --shadow-md: 0 8px 22px rgba(90,30,10,0.14), 0 3px 8px rgba(90,30,10,0.07);
  --shadow-lg: 0 22px 56px rgba(90,30,10,0.22);
}

/* ============ VARIANTE B: TERRACOTA BRICK RED (souk árabe) ============ */
[data-theme="terracota-brick-red"] {
  --bg: oklch(0.97 0.018 70);
  --bg-2: oklch(0.93 0.025 65);
  --bg-3: oklch(0.89 0.028 60);
  --ink: oklch(0.20 0.08 25);
  --ink-2: oklch(0.36 0.06 25);
  --ink-mute: oklch(0.52 0.04 28);
  --rule: oklch(0.85 0.02 60);
  --accent: oklch(0.52 0.26 22);
  --accent-ink: oklch(0.28 0.20 22);
  --accent-soft: oklch(0.88 0.10 25);
  --olive: oklch(0.50 0.12 105);
  --font-display: "DM Serif Display", "Instrument Serif", Georgia, serif;
  --font-body: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px;
  --shadow-sm: 0 2px 4px rgba(70,15,5,0.10), 0 1px 2px rgba(70,15,5,0.06);
  --shadow-md: 0 10px 28px rgba(80,15,5,0.16), 0 3px 8px rgba(80,15,5,0.08);
  --shadow-lg: 0 28px 70px rgba(80,15,5,0.26);
}

/* ============ VARIANTE C: TERRACOTA MOSTAZA-LADRILLO (tagine) ============ */
[data-theme="terracota-mostaza-ladrillo"] {
  --bg: oklch(0.94 0.05 80);
  --bg-2: oklch(0.90 0.07 75);
  --bg-3: oklch(0.86 0.08 72);
  --ink: oklch(0.26 0.05 50);
  --ink-2: oklch(0.42 0.04 55);
  --ink-mute: oklch(0.56 0.03 60);
  --rule: oklch(0.81 0.05 70);
  --accent: oklch(0.55 0.18 45);
  --accent-ink: oklch(0.30 0.14 45);
  --accent-soft: oklch(0.85 0.10 60);
  --olive: oklch(0.58 0.16 90);
  --font-display: "DM Serif Display", "Instrument Serif", Georgia, serif;
  --font-body: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px;
  --shadow-sm: 0 2px 5px rgba(70,40,10,0.08), 0 1px 2px rgba(70,40,10,0.06);
  --shadow-md: 0 8px 22px rgba(85,50,15,0.13), 0 3px 8px rgba(85,50,15,0.07);
  --shadow-lg: 0 24px 60px rgba(85,50,15,0.22);
}

/* ============ VARIANTE D: OLIVAR PROFUNDO (verde domina) ============ */
[data-theme="olivar-profundo"] {
  --bg: oklch(0.96 0.02 90);
  --bg-2: oklch(0.92 0.025 90);
  --bg-3: oklch(0.88 0.03 88);
  --ink: oklch(0.22 0.04 110);
  --ink-2: oklch(0.38 0.035 105);
  --ink-mute: oklch(0.55 0.02 100);
  --rule: oklch(0.84 0.02 95);
  --accent: oklch(0.50 0.13 130);
  --accent-ink: oklch(0.28 0.10 130);
  --accent-soft: oklch(0.88 0.07 125);
  --olive: oklch(0.55 0.18 40);
  --font-display: "DM Serif Display", "Instrument Serif", Georgia, serif;
  --font-body: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px;
  --shadow-sm: 0 2px 4px rgba(40,55,20,0.08), 0 1px 2px rgba(40,55,20,0.06);
  --shadow-md: 0 8px 22px rgba(50,65,25,0.12), 0 3px 8px rgba(50,65,25,0.06);
  --shadow-lg: 0 22px 56px rgba(50,65,25,0.20);
}

/* ============ VARIANTE E: TAGINE ESPECIERO (verde mostaza + cálido) ============ */
[data-theme="tagine-especiero"] {
  --bg: oklch(0.96 0.025 80);
  --bg-2: oklch(0.92 0.035 75);
  --bg-3: oklch(0.88 0.04 72);
  --ink: oklch(0.24 0.05 70);
  --ink-2: oklch(0.40 0.04 75);
  --ink-mute: oklch(0.56 0.03 75);
  --rule: oklch(0.83 0.04 80);
  --accent: oklch(0.55 0.18 105);
  --accent-ink: oklch(0.32 0.14 105);
  --accent-soft: oklch(0.88 0.10 100);
  --olive: oklch(0.55 0.22 30);
  --font-display: "DM Serif Display", "Instrument Serif", Georgia, serif;
  --font-body: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px;
  --shadow-sm: 0 2px 5px rgba(70,55,15,0.08), 0 1px 2px rgba(70,55,15,0.06);
  --shadow-md: 0 8px 22px rgba(80,60,18,0.13), 0 3px 8px rgba(80,60,18,0.07);
  --shadow-lg: 0 24px 60px rgba(80,60,18,0.22);
}

/* ============ VARIANTE F: SOUK VERDE-TIERRA (warm peach + verde fuerte) ============ */
[data-theme="souk-verde-tierra"] {
  --bg: oklch(0.95 0.04 70);
  --bg-2: oklch(0.91 0.05 65);
  --bg-3: oklch(0.87 0.06 62);
  --ink: oklch(0.22 0.05 50);
  --ink-2: oklch(0.38 0.04 55);
  --ink-mute: oklch(0.54 0.025 60);
  --rule: oklch(0.82 0.04 60);
  --accent: oklch(0.55 0.20 30);
  --accent-ink: oklch(0.30 0.16 30);
  --accent-soft: oklch(0.86 0.10 35);
  --olive: oklch(0.50 0.18 110);
  --font-display: "DM Serif Display", "Instrument Serif", Georgia, serif;
  --font-body: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px;
  --shadow-sm: 0 2px 4px rgba(75,40,15,0.08), 0 1px 2px rgba(75,40,15,0.06);
  --shadow-md: 0 8px 22px rgba(85,45,18,0.14), 0 3px 8px rgba(85,45,18,0.07);
  --shadow-lg: 0 24px 60px rgba(85,45,18,0.22);
}

/* ============ TEMA 3: MEDITERRÁNEO FRESCO ============ */
[data-theme="mediterraneo-fresco"] {
  /* palette: azules y verdes mediterráneos */
  --bg: oklch(0.98 0.008 220);
  --bg-2: oklch(0.95 0.012 218);
  --bg-3: oklch(0.91 0.018 215);
  --ink: oklch(0.24 0.04 240);
  --ink-2: oklch(0.40 0.03 235);
  --ink-mute: oklch(0.56 0.02 230);
  --rule: oklch(0.86 0.012 220);
  --accent: oklch(0.60 0.14 210);      /* azul mediterráneo */
  --accent-ink: oklch(0.35 0.12 210);
  --accent-soft: oklch(0.91 0.05 210);
  --olive: oklch(0.55 0.12 150);       /* verde oliva vibrante */

  /* type: limpio y moderno */
  --font-display: "Libre Baskerville", "Libre Caslon Text", Georgia, serif;
  --font-body: "Public Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;

  /* bordes moderados, sombras sutiles */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 3px rgba(20,30,50,0.06), 0 1px 2px rgba(20,30,50,0.04);
  --shadow-md: 0 6px 18px rgba(25,35,55,0.10), 0 2px 6px rgba(25,35,55,0.05);
  --shadow-lg: 0 20px 48px rgba(25,35,55,0.18);
}

/* ============ TEMA 4: TIERRA PROFUNDA ============ */
[data-theme="tierra-profunda"] {
  /* palette: marrones, cafés, arcilla */
  --bg: oklch(0.96 0.018 55);
  --bg-2: oklch(0.92 0.022 52);
  --bg-3: oklch(0.88 0.026 50);
  --ink: oklch(0.26 0.025 45);
  --ink-2: oklch(0.42 0.022 48);
  --ink-mute: oklch(0.58 0.018 50);
  --rule: oklch(0.82 0.020 55);
  --accent: oklch(0.50 0.08 45);       /* café/arcilla */
  --accent-ink: oklch(0.28 0.06 45);
  --accent-soft: oklch(0.88 0.04 45);
  --olive: oklch(0.48 0.08 105);       /* verde tierra */

  /* type: robusto y orgánico */
  --font-display: "Libre Caslon Text", Georgia, serif;
  --font-body: "Work Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* bordes pequeños, sombras cálidas */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-sm: 0 1px 2px rgba(35,25,20,0.06), 0 2px 5px rgba(35,25,20,0.04);
  --shadow-md: 0 6px 18px rgba(40,28,22,0.10), 0 2px 6px rgba(40,28,22,0.05);
  --shadow-lg: 0 18px 45px rgba(40,28,22,0.16);
}

/* ============ MODO OSCURO (para todos los temas) ============ */
[data-mode="dark"][data-theme="arena-calida"],
[data-mode="dark"]:root:not([data-theme]) {
  --bg: oklch(0.18 0.015 60);
  --bg-2: oklch(0.22 0.02 55);
  --bg-3: oklch(0.26 0.02 55);
  --ink: oklch(0.96 0.01 80);
  --ink-2: oklch(0.80 0.01 75);
  --ink-mute: oklch(0.62 0.015 70);
  --rule: oklch(0.32 0.015 60);
  --accent-soft: oklch(0.30 0.08 40);
}

[data-mode="dark"][data-theme="terracota-vibrante"] {
  --bg: oklch(0.16 0.02 35);
  --bg-2: oklch(0.20 0.025 35);
  --bg-3: oklch(0.24 0.03 35);
  --ink: oklch(0.97 0.008 70);
  --ink-2: oklch(0.82 0.01 65);
  --ink-mute: oklch(0.64 0.015 60);
  --rule: oklch(0.30 0.02 35);
  --accent-soft: oklch(0.28 0.10 35);
}

[data-mode="dark"][data-theme="mediterraneo-fresco"] {
  --bg: oklch(0.17 0.02 240);
  --bg-2: oklch(0.21 0.025 238);
  --bg-3: oklch(0.25 0.03 235);
  --ink: oklch(0.97 0.008 220);
  --ink-2: oklch(0.82 0.012 218);
  --ink-mute: oklch(0.64 0.015 215);
  --rule: oklch(0.29 0.02 240);
  --accent-soft: oklch(0.26 0.08 210);
}

[data-mode="dark"][data-theme="tierra-profunda"] {
  --bg: oklch(0.19 0.022 50);
  --bg-2: oklch(0.23 0.026 48);
  --bg-3: oklch(0.27 0.03 46);
  --ink: oklch(0.96 0.012 70);
  --ink-2: oklch(0.80 0.015 65);
  --ink-mute: oklch(0.62 0.018 60);
  --rule: oklch(0.31 0.022 50);
  --accent-soft: oklch(0.26 0.06 45);
}