/* OPEN: LISTA DE TOKENS PRIMARIOS */
:root {
  /* Colores neutrales */
  --neutral25: #fcfcfc;
  --neutral50: #f7f7f7;
  --neutral100: #f3f3f3;
  --neutral100-rgba: 243, 243, 243;
  --neutral200: #e5e5e5;
  --neutral300: #d6d6d6;
  --neutral400: #a3a3a3;
  --neutral500: #737373;
  --neutral600: #525252;
  --neutral700: #424242;
  --neutral800: #292929;
  --neutral900: #141414;
  --neutral900-rgba: 20, 20, 20;

  /* Colores primarios */
  --primary25: #f5faff;
  --primary50: #eff8ff;
  --primary100: #d1e9ff;
  --primary200: #b2ddff;
  --primary300: #84caff;
  --primary400: #53b1fd;
  --primary500: #2e90fa;
  --primary600: #1570ef;
  --primary700: #175cd3;
  --primary800: #1752be;
  --primary900: #1849a9;
  --primary950: #102a56;

  /* Colores Feedback */

  --error25: rgba(238, 38, 119, 0.1);
  --error500: #ee2677;
  --error900: #df1b6a;

  --success25: rgba(122, 231, 199, 0.1);
  --success500: #7ae7c7;
  --success900: #228366;

  /* Tipografías */
  --typo-primary: "Ibarra Real Nova", "Georgia", "Times New Roman", serif;
  --typo-secondary: "Noto Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
    "Helvetica Neue", sans-serif;

  /* Border Radius */
  --corner-none: 0px;
  --corner-extra-small: 4px;
  --corner-small: 8px;
  --corner-medium: 12px;
  --corner-large: 16px;
  --corner-extra-large: 24px;
  --corner-full: 100px;

  /* OPEN: TRANSICIONES CINEMÁTICAS */

  /* transicion de los INPUTS + BOTONES SOLID + BOTONES SOLID formulario fondo + borde */
  --transition-color-background-border: background 0.4s
      cubic-bezier(0.4, 0, 0.2, 1),
    color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    outline 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  --transition-color-background-border-fast: background 0.15s
      cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    outline 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  --transition-color-background-border-slow: background 0.6s
      cubic-bezier(0.4, 0, 0.2, 1),
    color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    outline 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* transicion de las sombras */
  --transition-shadow-smooth: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* transicion de las imageness */
  --transition-medium: all 0.4s ease-in-out;
  --transition-filter: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* CLOSE: TRANSICIONES CINEMÁTICAS */

  /*SOMBRAS*/

  --x: 50vw;
  --y: 50vh;
}

/* CLOSE: LISTA DE TOKENS PRIMARIOS */

/* OPEN: LISTA DE TOKENS ESPECIFICOS LIGHT MODE */
:root {
  /* Fondo y superficie */
  --background: var(--neutral25);
  --surface: var(--neutral50);
  --surface-medium: var(--neutral100);
  --surface-high: var(--neutral200);
  --fill: var(--neutral100);
  --fill-high: var(--neutral200);

/* Fondo header */
--background-header:rgba(252,252,252,0.88);
--background-searcher:rgba(255,255,255,0.98);




  /* Texto en fondos */
  --on-background: var(--neutral900);
  --on-background-high: var(--neutral700);
  --on-background-medium: var(--neutral600);
  --on-background-low: var(--neutral500);
  --on-surface: var(--neutral900);
  --on-surface-medium: var(--neutral600);
  --on-fill: var(--neutral400);
  --on-fill-high: var(--neutral600);

  /* Bordes */
  --border: var(--neutral50);
  --border-medium: var(--neutral200);

  /* Colores de chips */
  --chip-background-color: var(--neutral100);
  --chip-on-background-color: var(--neutral700);

  /* Botones - Outline */
  --button-outline-border-color: var(--primary600);
  --button-outline-on-background-color: var(--primary600);
  --button-outline-hover-border-color: var(--primary600);
  --button-outline-hover-background-color: var(--primary25);
  --button-outline-hover-on-background-color: var(--primary600);
  --button-outline-active-border-color: var(--primary900);
  --button-outline-active-background-color: var(--primary900);
  --button-outline-active-on-background-color: var(--primary25);
  --button-outline-focus-border-color: var(--primary25);
  --button-outline-focus-background-color: var(--primary900);
  --button-outline-focus-on-background-color: var(--primary25);
  --button-outline-focus-on-outline-color: var(--primary900);

  /* Colores de enlaces */
  --link-color: var(--primary700);
  --link-color-hover: var(--primary900);
  --link-color-active: var(--primary700);

  /* Activación de tarjeta */
  --card-active-outline-color: var(--primary500);
  --card-active-shadow-color: rgba(46, 144, 250, 0.2);

  /* Colores de inputs */
  --input-outline-default: var(--neutral100);
  --input-outline-hover-color: var(--neutral300);
  --input-outline-focus-color: var(--primary700);
  --input-focus-shadow-color: rgba(46, 144, 250, 0.2);

  /* Categorías de chips */
  --chip-category-border-color: var(--primary900);
  --chip-category-on-background-color: var(--primary900);

  /* Botones - Solid */
  --button-solid-background-color: var(--primary600);
  --button-solid-on-background-color: var(--primary25);
  --button-solid-hover-background-color: var(--primary700);
  --button-solid-hover-on-background-color: var(--primary25);
  --button-solid-active-background-color: var(--primary900);
  --button-solid-active-on-background-color: var(--primary25);
  --button-solid-focus-background-color: var(--primary900);
  --button-solid-focus-on-background-color: var(--primary25);
  --button-solid-focus-on-outline-color: var(--primary900);

  /* Checkbox - */
  --checkbox-outline-border-color: var(--primary900);
  --checkbox-background-color: var(--primary900);
  --checkbox-checked-color: var(--primary25);

  /*overlay*/
  --overlay-image: var(--neutral100-rgba);

  /* OPEN: ACCESIBILIDAD */
  --focus-ring-color: var(--primary600); /* Color del anillo de enfoque */

  /* OPEN: FEEDBACK */
  --background-feedback-error:var(--error25);
  --on-background-feedback-error: var(--error900);

  --background-feedback-success:var(--success25);
  --on-background-feedback-success: var(--success900);



  /* OPEN: BUSCADOR PREDICTIVO */
--surface-searcher:var(--neutral25);
--surface-card-searcher:var(--neutral100);
--surface-card-hover-searcher:var(--neutral200);
--border-live-search:var(--neutral200);
--border-img-live-search:var(--neutral300);
--border-img-live-search-hover:var(--neutral400);
}






/* CLOSE: LISTA DE TOKENS ESPECIFICOS LIGHT MODE */

/* OPEN: LISTA DE TOKENS ESPECIFICOS DARK MODE */
html.dark-mode {
  /* Fondo y superficie */
  --background: var(--neutral900);
  --surface: var(--neutral800);
  --surface-medium: var(--neutral700);
  --surface-high: var(--neutral700);
  --fill: var(--neutral800);
  --fill-high: var(--neutral700);


/* Fondo header y buscador overlay */
--background-header:rgba(20,20,20,0.88);
--background-searcher:rgba(20,20,20,0.96);


  /* Texto en fondos */
  --on-background: var(--neutral25);
  --on-background-high: var(--neutral300);
  --on-background-medium: var(--neutral600);
  --on-background-low: var(--neutral400);
  --on-surface: var(--neutral300);
  --on-surface-medium: var(--neutral500);
  --on-fill: var(--neutral400);
  --on-fill-high: var(--neutral400);

  /* Bordes */
  --border: var(--neutral800);
  --border-medium: var(--neutral600);

  /* Chips */
  --chip-background-color: var(--neutral800);
  --chip-on-background-color: var(--neutral400);

  /* Botones - Outline */
  --button-outline-border-color: var(--primary300);
  --button-outline-on-background-color: var(--primary300);
  --button-outline-hover-border-color: var(--primary400);
  --button-outline-hover-background-color: rgba(245, 250, 255, 0.1);
  --button-outline-hover-on-background-color: var(--primary400);
  --button-outline-active-border-color: var(--primary300);
  --button-outline-active-background-color: rgba(245, 250, 255, 0.2);
  --button-outline-active-on-background-color: var(--primary300);
  --button-outline-focus-border-color: var(--neutral900);
  --button-outline-focus-background-color: rgba(245, 250, 255, 0.1);
  --button-outline-focus-on-background-color: var(--primary300);
  --button-outline-focus-on-outline-color: var(--primary300);

  /* Colores de enlaces */
  --link-color: var(--primary300);
  --link-color-hover: var(--primary400);
  --link-color-active: var(--primary300);

  /* Activación de tarjeta */
  --card-active-outline-color: var(--primary300);
  --card-active-shadow-color: rgba(178, 221, 255, 0.3);

  /* Colores de inputs */
  --input-outline-default: var(--neutral800);
  --input-outline-hover-color: var(--neutral500);
  --input-outline-focus-color: var(--primary300);
  --input-focus-shadow-color: rgba(178, 221, 255, 0.3);

  /* Categorías de chips */
  --chip-category-border-color: var(--primary300);
  --chip-category-on-background-color: var(--primary300);

  /* Botones - Solid */
  --button-solid-background-color: var(--primary300);
  --button-solid-on-background-color: var(--primary950);
  --button-solid-hover-background-color: var(--primary400);
  --button-solid-hover-on-background-color: var(--primary950);
  --button-solid-active-background-color: var(--primary300);
  --button-solid-active-on-background-color: var(--primary950);
  --button-solid-focus-background-color: var(--primary300);
  --button-solid-focus-on-background-color: var(--primary950);
  --button-solid-focus-on-outline-color: var(--primary300);

  /* Checkbox - */
  --checkbox-outline-border-color: var(--primary300);
  --checkbox-background-color: var(--primary300);
  --checkbox-checked-color: var(--primary950);

  /*overlay*/
  --overlay-image: var(--neutral900-rgba);

  /* OPEN: ACCESIBILIDAD */
  --focus-ring-color: var(--primary300); /* Color del anillo de enfoque */

  /* OPEN: FEEDBACK */

  --on-background-feedback-error: var(--error500);
  --on-background-feedback-success: var(--success500);




/* OPEN: BUSCADOR PREDICTIVO */
--surface-searcher:var(--neutral600);
--surface-card-searcher:var(--neutral700);
--surface-card-hover-searcher:var(--neutral800);
--border-live-search:var(--neutral800);
--border-img-live-search:var(--neutral600);
--border-img-live-search-hover:var(--neutral700);
}

/* CLOSE: LISTA DE TOKENS ESPECIFICOS DARK MODE */