:root {
  /* NEUTROS */
  /* n1000 es negro puro: no es el negro de marca (n900), es el negro literal
     que piden los graficos. Usar n900 para texto. */
  --color-n1000: #000000;
  --color-n900: #1A2D25;
  --color-n800: #33453D;
  --color-n700: #4D5C56;
  --color-n600: #66736E;
  --color-n500: #808B86;
  --color-n400: #99A29E;
  --color-n300: #B2B9B6;
  --color-n200: #CCD0CF;
  --color-n100: #E5E8E7;
  --color-n75: #EEF0EF;
  --color-n50: #F6F7F7;
  --color-n0: #FFFFFF;

  /* VERDES (principal: g500) */
  --color-g800: #043622;
  --color-g700: #065233;
  --color-g600: #086D44;
  --color-g500: #0A8855;
  --color-g400: #3BA077;
  --color-g300: #6CB899;
  --color-g200: #9DCFBB;
  --color-g100: #CEE7DD;
  --color-g50: #E6F7F0;

  /* FRAMBUESAS (principal: f500) */
  --color-f800: #6A1135;
  --color-f700: #8D1746;
  --color-f600: #B01C57;
  --color-f500: #D32269;
  --color-f400: #DA4782;
  --color-f300: #E26C9B;
  --color-f200: #E991B4;
  --color-f100: #F0B5CD;
  --color-f75: #F8DAE6;
  --color-f50: #FEECF3;

  /* CELESTES (secundario: c500) */
  --color-c800: #205970;
  --color-c700: #328CB1;
  --color-c600: #63B2D3;
  --color-c500: #A4D2E5;
  --color-c400: #B3D9E9;
  --color-c300: #C2E1EE;
  --color-c200: #D1E8F2;

  /* MARRONES */
  --color-m800: #3D261A;
  --color-m700: #4F3122;
  --color-m600: #613C29;
  --color-m500: #734731;
  --color-m400: #A16344;
  --color-m300: #BF8568;
  --color-m200: #D2AA95;
  --color-m100: #DCC3B4;

  /* ROJO */
  --color-r700: #7D2828;
  --color-r600: #BF2600;
  --color-r500: #DE350B;
  --color-r400: #FF5630;
  --color-r300: #FF7452;
  --color-r200: #FF8F73;
  --color-r100: #FFBDAD;
  --color-r50: #FFEBE6;

  /* AMARILLO */
  --color-y700: #A85D00;
  --color-y600: #FF8B00;
  --color-y500: #FF991F;
  --color-y400: #FFAB00;
  --color-y300: #FFC400;
  --color-y200: #FFE380;
  --color-y100: #FFF0B3;
  --color-y50: #FFFAE6;

  /* TEAL */
  --color-t600: #0F5156;
  --color-t500: #10899E;
  --color-t400: #25CBD6;
  --color-t300: #7CE0E6;
  --color-t200: #A4D2E5;
  --color-t100: #D3F5F7;
  --color-t50: #F2FCFD;

  /* VIOLETA */
  --color-v600: #524988;
  --color-v500: #6E62B6;
  --color-v400: #897AE3;
  --color-v300: #B8AFEE;
  --color-v200: #D0CAF4;
  --color-v100: #E7E4F9;
  --color-v50: #F8F7FD;

  /* SEMANTICOS: alias de la paleta, no definir hex aca */

  --color-main: var(--color-g500);
  --color-main-dark: var(--color-g700);
  --color-main-light: var(--color-f75);
  --color-main-accent: var(--color-g500);
  --color-error: var(--color-r600);
  --color-error-dark: var(--color-r600);
  --color-error-med: var(--color-r400);
  --color-error-light: var(--color-r50);
  --color-warning: var(--color-y700);
  --color-warning-dark: var(--color-y700);
  --color-warning-med: var(--color-y400);
  --color-warning-light: var(--color-y50);
  --color-info: var(--color-c800);
  --color-info-dark: var(--color-c800);
  --color-info-med: var(--color-c600);
  --color-info-light: var(--color-c200);
  --color-success: var(--color-g600);
  --color-success-dark: var(--color-g600);
  --color-success-med: var(--color-g400);
  --color-success-light: var(--color-g50);

  --color-grey-dark1: var(--color-n800);
  --color-grey-dark2: var(--color-n600);
  --color-grey-dark3: var(--color-n400);
  --color-grey-dark4: var(--color-n200);
  --color-grey-light1: var(--color-n100);
  --color-grey-light2: var(--color-n75);
  --color-grey-light3: var(--color-n50);

  --color-white: var(--color-n0);
  --color-black: var(--color-n900);
  --color-bg-light: var(--color-g50);
  --color-border: var(--color-n200);

  /* filtros para convertir el color de los iconos a otros colores cuando estan como
     background-image (por ejemplo si quiero que el icono sea verde en :hover) */
  --filter-n0: brightness(0) invert(1);
  --filter-n300: brightness(0) saturate(100%) invert(55%) sepia(5%) saturate(201%) hue-rotate(103deg) brightness(134%) contrast(85%);
  --filter-n500: brightness(0) saturate(100%) invert(40%) sepia(37%) saturate(39%) hue-rotate(101deg) brightness(121%) contrast(157%);
  --filter-n600: brightness(0) saturate(100%) invert(57%) sepia(13%) saturate(605%) hue-rotate(106deg) brightness(64%) contrast(48%);
  --filter-n700: brightness(0) saturate(100%) invert(12%) sepia(56%) saturate(497%) hue-rotate(102deg) brightness(121%) contrast(42%);
  --filter-n800: brightness(0) saturate(100%) invert(9%) sepia(72%) saturate(620%) hue-rotate(104deg) brightness(86%) contrast(61%);
  --filter-n900: brightness(0) saturate(100%) invert(7%) sepia(63%) saturate(695%) hue-rotate(107deg) brightness(79%) contrast(79%);
  --filter-g400: brightness(0) saturate(100%) invert(31%) sepia(66%) saturate(927%) hue-rotate(115deg) brightness(148%) contrast(54%);
  --filter-g500: brightness(0) saturate(100%) invert(65%) sepia(54%) saturate(1289%) hue-rotate(104deg) brightness(58%) contrast(95%);
  --filter-g600: brightness(0) saturate(100%) invert(33%) sepia(72%) saturate(1476%) hue-rotate(131deg) brightness(70%) contrast(98%);
  --filter-g700: brightness(0) saturate(100%) invert(17%) sepia(77%) saturate(1020%) hue-rotate(123deg) brightness(113%) contrast(102%);
  --filter-f500: brightness(0) saturate(100%) invert(29%) sepia(55%) saturate(2145%) hue-rotate(307deg) brightness(88%) contrast(109%);
  --filter-f700: brightness(0) saturate(100%) invert(35%) sepia(17%) saturate(1860%) hue-rotate(284deg) brightness(78%) contrast(132%);
  --filter-f75: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(890%) hue-rotate(302deg) brightness(117%) contrast(94%);
  --filter-c800: brightness(0) saturate(100%) invert(35%) sepia(17%) saturate(1753%) hue-rotate(152deg) brightness(78%) contrast(88%);
  --filter-c700: brightness(0) saturate(100%) invert(27%) sepia(70%) saturate(1402%) hue-rotate(169deg) brightness(135%) contrast(61%);
  --filter-c200: brightness(0) saturate(100%) invert(47%) sepia(78%) saturate(39%) hue-rotate(153deg) brightness(139%) contrast(148%);
  --filter-r600: brightness(0) saturate(100%) invert(20%) sepia(51%) saturate(3651%) hue-rotate(3deg) brightness(101%) contrast(112%);
  --filter-r500: brightness(0) saturate(100%) invert(28%) sepia(75%) saturate(7090%) hue-rotate(13deg) brightness(99%) contrast(91%);
  --filter-r50: brightness(0) saturate(100%) invert(58%) sepia(49%) saturate(344%) hue-rotate(313deg) brightness(159%) contrast(107%);
  --filter-y400: brightness(0) saturate(100%) invert(74%) sepia(60%) saturate(3441%) hue-rotate(359deg) brightness(103%) contrast(106%);
  --filter-y50: brightness(0) saturate(100%) invert(96%) sepia(14%) saturate(1502%) hue-rotate(295deg) brightness(93%) contrast(177%);
  --filter-y500: brightness(0) saturate(100%) invert(65%) sepia(77%) saturate(2053%) hue-rotate(344deg) brightness(106%) contrast(101%);
  --filter-y700: brightness(0) saturate(100%) invert(32%) sepia(98%) saturate(2243%) hue-rotate(28deg) brightness(90%) contrast(102%);
  --filter-t500: brightness(0) saturate(100%) invert(36%) sepia(83%) saturate(3592%) hue-rotate(167deg) brightness(92%) contrast(87%);
  --filter-t200: brightness(0) saturate(100%) invert(58%) sepia(13%) saturate(1124%) hue-rotate(174deg) brightness(145%) contrast(79%);
  --filter-t600: brightness(0) saturate(100%) invert(21%) sepia(42%) saturate(793%) hue-rotate(134deg) brightness(125%) contrast(131%);
  --filter-v500: brightness(0) saturate(100%) invert(38%) sepia(45%) saturate(643%) hue-rotate(208deg) brightness(97%) contrast(89%);
  --filter-v200: brightness(0) saturate(100%) invert(81%) sepia(12%) saturate(1347%) hue-rotate(204deg) brightness(103%) contrast(92%);
  --filter-v600: brightness(0) saturate(100%) invert(14%) sepia(100%) saturate(556%) hue-rotate(215deg) brightness(148%) contrast(75%);
}