/* ------------------------------------------------ */
/*  PALETA BASE                                      */
/* ------------------------------------------------ */
:root {
  /* ----- LIGHT PALETTE ----- */
  --light-bg: #F8F9FA;
  --light-bg-alt: #FFFFFF;

  --light-text: #1A1A1A;
  --light-text-muted: #555555;

  --light-primary: #C04A6F;
  --light-primary-rgb: 192, 74, 111;
  --light-secondary: #E3B1C2;
  --light-secondary-rgb: 227, 177, 194;

  --light-border: rgba(0, 0, 0, 0.1);
  --light-icon: #1A1A1A;

  --light-select-bg: #EFEFEF;

  /* ----- DARK PALETTE ----- */
  --dark-bg: #0D1117;
  --dark-bg-alt: #161B22;

  --dark-text: #EDEDED;
  --dark-text-muted: #ACACB2;

  --dark-primary: #E56B8A;
  --dark-primary-rgb: 229, 107, 138;
  --dark-secondary: #F0B8C8;
  --dark-secondary-rgb: 240, 184, 200;

  --dark-border: rgba(255, 255, 255, 0.08);
  --dark-icon: #F5F5F5;

  --dark-select-bg: #1F242B;
}

/* ------------------------------------------------ */
/*  VALORES POR DEFECTO (LIGHT MODE)                 */
/* ------------------------------------------------ */
:root {
  --color-bg: var(--light-bg);
  --color-bg-alt: var(--light-bg-alt);

  --color-text: var(--light-text);
  --color-text-muted: var(--light-text-muted);

  --color-primary: var(--light-primary);
  --color-secondary: var(--light-secondary);
  --color-primary-rgb: var(--light-primary-rgb);
  --color-secondary-rgb: var(--light-secondary-rgb);

  --color-border: var(--light-border);

  --color-icon: var(--light-icon);

  --select-bg: var(--light-select-bg);

  --color-primary-soft: rgba(var(--color-primary-rgb), 0.12);
  --color-primary-faint: rgba(var(--color-primary-rgb), 0.08);
  --color-secondary-faint: rgba(var(--color-secondary-rgb), 0.08);

  --sl-color-primary-50: #fdf1f4;
  --sl-color-primary-100: #f8d5df;
  --sl-color-primary-200: #f1b9c9;
  --sl-color-primary-300: #ea9cb3;
  --sl-color-primary-400: #e27f9c;
  --sl-color-primary-500: #da6286;
  --sl-color-primary-600: #c04a6f;
  --sl-color-primary-700: #a63f60;
  --sl-color-primary-800: #8b3350;
  --sl-color-primary-900: #702840;
  --sl-color-primary-950: #461827;
}

/* ------------------------------------------------ */
/*  DARK AUTOMÁTICO (por sistema)                    */
/* ------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--dark-bg);
    --color-bg-alt: var(--dark-bg-alt);

    --color-text: var(--dark-text);
    --color-text-muted: var(--dark-text-muted);

    --color-primary: var(--dark-primary);
    --color-secondary: var(--dark-secondary);
    --color-primary-rgb: var(--dark-primary-rgb);
    --color-secondary-rgb: var(--dark-secondary-rgb);

    --color-border: var(--dark-border);

    --color-icon: var(--dark-icon);

    --select-bg: var(--dark-select-bg);

    --color-primary-soft: rgba(var(--color-primary-rgb), 0.16);
    --color-primary-faint: rgba(var(--color-primary-rgb), 0.1);
    --color-secondary-faint: rgba(var(--color-secondary-rgb), 0.1);
  }
}

/* ------------------------------------------------ */
/*  OVERRIDE MANUAL (html.dark / html.light)         */
/* ------------------------------------------------ */

html.dark {
  --color-bg: var(--dark-bg);
  --color-bg-alt: var(--dark-bg-alt);

  --color-text: var(--dark-text);
  --color-text-muted: var(--dark-text-muted);

  --color-primary: var(--dark-primary);
  --color-secondary: var(--dark-secondary);
  --color-primary-rgb: var(--dark-primary-rgb);
  --color-secondary-rgb: var(--dark-secondary-rgb);

  --color-border: var(--dark-border);

  --color-icon: var(--dark-icon);

  --select-bg: var(--dark-select-bg);

  --color-primary-soft: rgba(var(--color-primary-rgb), 0.16);
  --color-primary-faint: rgba(var(--color-primary-rgb), 0.1);
  --color-secondary-faint: rgba(var(--color-secondary-rgb), 0.1);
}

html.light {
  --color-bg: var(--light-bg);
  --color-bg-alt: var(--light-bg-alt);

  --color-text: var(--light-text);
  --color-text-muted: var(--light-text-muted);

  --color-primary: var(--light-primary);
  --color-secondary: var(--light-secondary);
  --color-primary-rgb: var(--light-primary-rgb);
  --color-secondary-rgb: var(--light-secondary-rgb);

  --color-border: var(--light-border);

  --color-icon: var(--light-icon);

  --select-bg: var(--light-select-bg);

  --color-primary-soft: rgba(var(--color-primary-rgb), 0.12);
  --color-primary-faint: rgba(var(--color-primary-rgb), 0.08);
  --color-secondary-faint: rgba(var(--color-secondary-rgb), 0.08);
}