/* WebSite/assets/css/tokens.css */

:root {
  /* Tipografía */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;

  /* Radios y sombras */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Layout */
  --max-width: 1200px;

  /* Tema A (azul corporativo + naranjo) — claro, default */
  --bg: #F5F8FC;
  --bg-elevated: #FFFFFF;
  --text: #0B2545;
  --text-secondary: #3B4F63;
  --primary: #1B5FA8;
  --primary-hover: #164D8A;
  --on-primary: #FFFFFF;
  --accent: #FF7A45;
  --accent-hover: #E85F2A;
  --on-accent: #FFFFFF;
  --border: #DCE4EE;
  --focus-ring: #3AC7F0;
}

/* Tema B (indigo + menta) — claro */
:root[data-theme="b"] {
  --bg: #F4F3FF;
  --bg-elevated: #FFFFFF;
  --text: #151233;
  --text-secondary: #4B4470;
  --primary: #4B3FF2;
  --primary-hover: #3B30C9;
  --on-primary: #FFFFFF;
  --accent: #00D9A3;
  --accent-hover: #00B98B;
  --on-accent: #0B2545;
  --border: #E1DEFB;
  --focus-ring: #4B3FF2;
}

/* Tema C (grafito + teal) — claro */
:root[data-theme="c"] {
  --bg: #F7F9F9;
  --bg-elevated: #FFFFFF;
  --text: #1E2A32;
  --text-secondary: #4B5C66;
  --primary: #2F4858;
  --primary-hover: #243943;
  --on-primary: #FFFFFF;
  --accent: #17A398;
  --accent-hover: #12867D;
  --on-accent: #FFFFFF;
  --border: #DCE4E4;
  --focus-ring: #17A398;
}

/* Tema D (violeta + lima) — claro */
:root[data-theme="d"] {
  --bg: #FBFAFF;
  --bg-elevated: #FFFFFF;
  --text: #2D1B4E;
  --text-secondary: #5B4785;
  --primary: #7B4FE8;
  --primary-hover: #653FD1;
  --on-primary: #FFFFFF;
  --accent: #B7F26C;
  --accent-hover: #A1E04F;
  --on-accent: #2D1B4E;
  --border: #E9E1FB;
  --focus-ring: #7B4FE8;
}

/* Modo oscuro por preferencia de sistema (solo si no se forzó modo claro) */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: #0B2545;
    --bg-elevated: #12305C;
    --text: #F5F8FC;
    --text-secondary: #B7C7DC;
    --primary: #3AC7F0;
    --primary-hover: #63D3F4;
    --on-primary: #0B2545;
    --accent: #FF7A45;
    --accent-hover: #FF9066;
    --on-accent: #0B2545;
    --border: #1E3A63;
    --focus-ring: #3AC7F0;
  }
  :root[data-theme="b"]:not([data-mode="light"]) {
    --bg: #151233;
    --bg-elevated: #1E1A47;
    --text: #F4F3FF;
    --text-secondary: #C7C2EE;
    --primary: #8B7CFF;
    --primary-hover: #A79AFF;
    --on-primary: #151233;
    --accent: #00D9A3;
    --accent-hover: #33E4B8;
    --on-accent: #151233;
    --border: #2C2760;
    --focus-ring: #8B7CFF;
  }
  :root[data-theme="c"]:not([data-mode="light"]) {
    --bg: #1E2A32;
    --bg-elevated: #28373F;
    --text: #F7F9F9;
    --text-secondary: #B8C4C8;
    --primary: #17A398;
    --primary-hover: #3FC0B5;
    --on-primary: #0B1519;
    --accent: #E4B363;
    --accent-hover: #EAC384;
    --on-accent: #1E2A32;
    --border: #33454F;
    --focus-ring: #17A398;
  }
  :root[data-theme="d"]:not([data-mode="light"]) {
    --bg: #2D1B4E;
    --bg-elevated: #3A2564;
    --text: #FBFAFF;
    --text-secondary: #D2C4F0;
    --primary: #B7F26C;
    --primary-hover: #C6F68C;
    --on-primary: #2D1B4E;
    --accent: #FF4D6A;
    --accent-hover: #FF7189;
    --on-accent: #FFFFFF;
    --border: #42295F;
    --focus-ring: #B7F26C;
  }
}

/* Modo oscuro forzado manualmente (independiente de preferencia de sistema) */
:root[data-mode="dark"] {
  --bg: #0B2545;
  --bg-elevated: #12305C;
  --text: #F5F8FC;
  --text-secondary: #B7C7DC;
  --primary: #3AC7F0;
  --primary-hover: #63D3F4;
  --on-primary: #0B2545;
  --accent: #FF7A45;
  --accent-hover: #FF9066;
  --on-accent: #0B2545;
  --border: #1E3A63;
  --focus-ring: #3AC7F0;
}
:root[data-theme="b"][data-mode="dark"] {
  --bg: #151233;
  --bg-elevated: #1E1A47;
  --text: #F4F3FF;
  --text-secondary: #C7C2EE;
  --primary: #8B7CFF;
  --primary-hover: #A79AFF;
  --on-primary: #151233;
  --accent: #00D9A3;
  --accent-hover: #33E4B8;
  --on-accent: #151233;
  --border: #2C2760;
  --focus-ring: #8B7CFF;
}
:root[data-theme="c"][data-mode="dark"] {
  --bg: #1E2A32;
  --bg-elevated: #28373F;
  --text: #F7F9F9;
  --text-secondary: #B8C4C8;
  --primary: #17A398;
  --primary-hover: #3FC0B5;
  --on-primary: #0B1519;
  --accent: #E4B363;
  --accent-hover: #EAC384;
  --on-accent: #1E2A32;
  --border: #33454F;
  --focus-ring: #17A398;
}
:root[data-theme="d"][data-mode="dark"] {
  --bg: #2D1B4E;
  --bg-elevated: #3A2564;
  --text: #FBFAFF;
  --text-secondary: #D2C4F0;
  --primary: #B7F26C;
  --primary-hover: #C6F68C;
  --on-primary: #2D1B4E;
  --accent: #FF4D6A;
  --accent-hover: #FF7189;
  --on-accent: #FFFFFF;
  --border: #42295F;
  --focus-ring: #B7F26C;
}