/**
 * CriollosUY — Design Tokens
 * Dual theme: Light (default) + Dark (toggle)
 * Base: Glassmorphism, Bebas Neue + Outfit, Amber accent
 */

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */

:root {
  /* — Backgrounds — */
  --bg: #f4f3f1;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --surface-hover: rgba(0, 0, 0, 0.04);
  --header-bg: rgba(244, 243, 241, 0.93);
  --menu-bg: rgba(244, 243, 241, 0.97);
  --menu-overlay: rgba(0, 0, 0, 0.35);

  /* — Texto — */
  --text: #1a1a1e;
  --text-muted: #6b6b78;
  --text-dim: #b0b0ba;
  --text-on-accent: #ffffff;

  /* — Accent (Amber) — */
  --amber: #c49520;
  --amber-hover: #b08518;
  --amber-soft: rgba(196, 149, 32, 0.08);
  --amber-border: rgba(196, 149, 32, 0.22);
  --amber-glow: rgba(196, 149, 32, 0.15);

  /* — Sexo — */
  --female: #d4608a;
  --male: #4a8fd0;

  /* — Medallas — */
  --gold: #c8a020;
  --silver: #8090a0;
  --bronze: #a06838;
  --gold-bg: rgba(200, 160, 32, 0.06);
  --silver-bg: rgba(128, 144, 160, 0.05);
  --bronze-bg: rgba(160, 104, 56, 0.05);
  --gold-border: rgba(200, 160, 32, 0.2);
  --silver-border: rgba(128, 144, 160, 0.15);
  --bronze-border: rgba(160, 104, 56, 0.15);

  /* — Estado — */
  --red: #d04040;
  --green: #2e9e58;
  --red-bg: rgba(208, 64, 64, 0.08);
  --green-bg: rgba(46, 158, 88, 0.08);
  --red-border: rgba(208, 64, 64, 0.2);
  --green-border: rgba(46, 158, 88, 0.2);

  /* — Bordes & Sombras — */
  --border: rgba(0, 0, 0, 0.07);
  --divider: rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);

  /* — Glassmorphism — */
  --glass-blur: blur(20px);
  --glass-bg: rgba(255, 255, 255, 0.7);

  /* — Layout — */
  --header-h: 56px;
  --nav-h: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --content-max: 480px;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;

  /* — Tipografía — */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* — Logo — */
  --logo-filter: brightness(0) saturate(100%);

  /* — Transiciones — */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.2s;
  --duration-slow: 0.4s;

  /* — Z-index — */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-menu: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}


/* ============================================================
   DARK THEME
   ============================================================ */

[data-theme="dark"] {
  /* — Backgrounds — */
  --bg: #0e1014;
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-border: rgba(255, 255, 255, 0.07);
  --surface-hover: rgba(255, 255, 255, 0.05);
  --header-bg: rgba(14, 16, 20, 0.93);
  --menu-bg: rgba(14, 16, 20, 0.97);
  --menu-overlay: rgba(0, 0, 0, 0.55);

  /* — Texto — */
  --text: #e2dedc;
  --text-muted: #a8a8b2;
  --text-dim: #52525e;
  --text-on-accent: #0e1014;

  /* — Accent (Amber) — */
  --amber: #e8b950;
  --amber-hover: #d4a840;
  --amber-soft: rgba(232, 185, 80, 0.08);
  --amber-border: rgba(232, 185, 80, 0.18);
  --amber-glow: rgba(232, 185, 80, 0.25);

  /* — Sexo — */
  --female: #ea7fa3;
  --male: #60a8e8;

  /* — Medallas — */
  --gold: #f5c842;
  --silver: #b8c4ce;
  --bronze: #c8885a;
  --gold-bg: rgba(245, 200, 66, 0.04);
  --silver-bg: rgba(184, 196, 206, 0.03);
  --bronze-bg: rgba(200, 136, 90, 0.03);
  --gold-border: rgba(245, 200, 66, 0.3);
  --silver-border: rgba(184, 196, 206, 0.25);
  --bronze-border: rgba(200, 136, 90, 0.25);

  /* — Estado — */
  --red: #e06060;
  --green: #50c878;
  --red-bg: rgba(224, 96, 96, 0.12);
  --green-bg: rgba(80, 200, 120, 0.1);
  --red-border: rgba(224, 96, 96, 0.3);
  --green-border: rgba(80, 200, 120, 0.3);

  /* — Bordes & Sombras — */
  --border: rgba(255, 255, 255, 0.07);
  --divider: rgba(255, 255, 255, 0.06);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);

  /* — Glassmorphism — */
  --glass-bg: rgba(255, 255, 255, 0.04);

  /* — Logo — */
  --logo-filter: none;
}


/* ============================================================
   SYSTEM PREFERENCE (auto-detect if no explicit toggle)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1014;
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.07);
    --surface-hover: rgba(255, 255, 255, 0.05);
    --header-bg: rgba(14, 16, 20, 0.93);
    --menu-bg: rgba(14, 16, 20, 0.97);
    --menu-overlay: rgba(0, 0, 0, 0.55);
    --text: #e2dedc;
    --text-muted: #a8a8b2;
    --text-dim: #52525e;
    --text-on-accent: #0e1014;
    --amber: #e8b950;
    --amber-hover: #d4a840;
    --amber-soft: rgba(232, 185, 80, 0.08);
    --amber-border: rgba(232, 185, 80, 0.18);
    --amber-glow: rgba(232, 185, 80, 0.25);
    --female: #ea7fa3;
    --male: #60a8e8;
    --gold: #f5c842;
    --silver: #b8c4ce;
    --bronze: #c8885a;
    --gold-bg: rgba(245, 200, 66, 0.04);
    --silver-bg: rgba(184, 196, 206, 0.03);
    --bronze-bg: rgba(200, 136, 90, 0.03);
    --gold-border: rgba(245, 200, 66, 0.3);
    --silver-border: rgba(184, 196, 206, 0.25);
    --bronze-border: rgba(200, 136, 90, 0.25);
    --red: #e06060;
    --green: #50c878;
    --red-bg: rgba(224, 96, 96, 0.12);
    --green-bg: rgba(80, 200, 120, 0.1);
    --red-border: rgba(224, 96, 96, 0.3);
    --green-border: rgba(80, 200, 120, 0.3);
    --border: rgba(255, 255, 255, 0.07);
    --divider: rgba(255, 255, 255, 0.06);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
    --glass-bg: rgba(255, 255, 255, 0.04);
    --logo-filter: none;
  }
}