@import "tailwindcss";
@plugin "@tailwindcss/typography";

@variant dark (.dark &);

@theme {
  --font-sans: Montserrat, sans-serif;
  --color-rojo-50: #FDF8F4;
  --color-rojo-100: #FBF0E7;
  --color-rojo-200: #F5DBCA;
  --color-rojo-300: #EDC0A5;
  --color-rojo-400: #E18F64;
  --color-rojo-500: #D4632E;
  --color-rojo-600: #BD4F24;
  --color-rojo-700: #9A381C;
  --color-rojo-800: #7A2916;
  --color-rojo-900: #5B1D11;
  --color-rojo-950: #3A100A;
  --color-wasabi-50: #FCFCF7;
  --color-wasabi-100: #F6F7EB;
  --color-wasabi-200: #EAEDD1;
  --color-wasabi-300: #DAE0B4;
  --color-wasabi-400: #C1CC85;
  --color-wasabi-500: #a4b55b;
  --color-wasabi-600: #90A349;
  --color-wasabi-700: #6F8732;
  --color-wasabi-800: #536E21;
  --color-wasabi-900: #385212;
  --color-wasabi-950: #203607;
  --color-white-50: #FFFFFF;
  --color-white-100: #FCFCFC;
  --color-white-200: #FAFAFA;
  --color-white-300: #F5F4F2;
  --color-white-400: #F0EFED;
  --color-white-500: #E7E6E2;
  --color-white-600: #D1CBB8;
  --color-white-700: #AD9F7F;
  --color-white-800: #8C7753;
  --color-white-900: #69502E;
  --color-white-950: #422B13;
  --color-cream-50: #FCFAF2;
  --color-cream-100: #FCF8E8;
  --color-cream-200: #F7EBC3;
  --color-cream-300: #F0DA9E;
  --color-cream-400: #E6B85E;
  --color-cream-500: #dc9420;
  --color-cream-600: #C47E1B;
  --color-cream-700: #A35F12;
  --color-cream-800: #85480C;
  --color-cream-900: #633107;
  --color-cream-950: #401B03;
  /* --color-mine-50: #F7F7F7;
  --color-mine-100: #EDEDED;
  --color-mine-200: #D4D3D2;
  --color-mine-300: #B8B7B4;
  --color-mine-400: #82817E;
  --color-mine-500: #4c4b48;
  --color-mine-600: #45423B;
  --color-mine-700: #383228;
  --color-mine-800: #2E261A;
  --color-mine-900: #21190E;
  --color-mine-950: #170E06; */

  /* --color-mine-50: #F7F6F7;
--color-mine-100: #ECECEE;
--color-mine-200: #D0CFD7;
--color-mine-300: #9C97B7;
--color-mine-400: #756E95;
--color-mine-500: #544E73;
--color-mine-600: #413B5D;
--color-mine-700: #2E2A46;
--color-mine-800: #2E274C;
--color-mine-900: #191629;
--color-mine-950: #0C0A13; */

--color-mine-50: #F7F6F7;
--color-mine-100: #ECECEE;
--color-mine-200: #D4D3D2;
--color-mine-300: #F9F7FC;
--color-mine-400: #1f1b2c;
--color-mine-500: #1f1b2c;
--color-mine-600: #1a1727;
--color-mine-700: rgb(20, 17, 32);
--color-mine-800: rgb(6, 5, 10);
--color-mine-900: #191629;
--color-mine-950: #08070D;



  --color-green-50: #F5FBF9;
  --color-green-100: #EBF7F2;
  --color-green-200: #CDEBDF;
  --color-green-300: #AFDFCC;
  --color-green-400: #72C7A5;
  --color-green-500: #36AF7F;
  --color-green-600: #319E72;
  --color-green-700: #20694C;
  --color-green-800: #184F39;
  --color-green-900: #103526;
  --color-pink-50: #FCF7FB;
  --color-pink-100: #FAEDF6;
  --color-pink-200: #F2D5E7;
  --color-pink-300: #E8BAD4;
  --color-pink-400: #D98DB2;
  --color-pink-500: #C7638A;
  --color-pink-600: #B35074;
  --color-pink-700: #943756;
  --color-pink-800: #78243D;
  --color-pink-900: #591427;
  --color-pink-950: #3B0815;
  --color-morado-50: #F9F7FC;
  --color-morado-100: #F1EDF8;
  --color-morado-200: #DDD4ED;
  --color-morado-300: #C5B5DE;
  --color-morado-400: #9A7BC4;
  --color-morado-500: #5A2982;
  --color-morado-600: #4F2473;
  --color-morado-700: #3F1D5C;
  --color-morado-800: #311647;
  --color-morado-900: #241033;
  --color-morado-950: #170920;
  --color-dark-bg-700: #0A0914;
  --color-dark-bg-500: #191629;
}
/*
#0A0914
#0B0A15
*/
body { @apply text-mine-800 dark:text-white-300; }

.active {
  @apply font-bold! text-wasabi-500! hover:text-wasabi-400! dark:text-wasabi-400! dark:hover:text-wasabi-300!;
}

.text-5xl, .text-6xl, .text-7xl, .text-8xl {
  line-height: 1.2;
}

.shadow-2xl-right {
  box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.5);
}

h1 { @apply text-4xl sm:text-5xl md:text-6xl lg:text-7xl; }
h2 { @apply text-3xl sm:text-4xl md:text-5xl; }
h3 { @apply text-2xl sm:text-3xl; }
h4 { @apply text-lg sm:text-xl; }
h1, h2, h3, h4 { @apply font-bold text-mine-500 dark:text-white-300; }

.title { @apply text-mine-500 dark:text-white-300; }

.menu-navlink { @apply text-xl font-bold text-mine-600 hover:text-mine-600 dark:text-white-300; }

.form-item { @apply px-3 py-2 rounded-md text-mine-700 bg-white-300 dark:text-white-300 dark:bg-mine-500 outline-none focus:ring-2 focus:ring-wasabi-700 dark:focus:ring-wasabi-400; }
.form-label { @apply block text-sm font-medium text-mine-700 dark:text-white-300; }

.button, .button-icon, .button-uploader { @apply cursor-pointer bg-wasabi-500 text-mine-600 hover:bg-cream-500 dark:bg-wasabi-500 dark:text-mine-800 dark:hover:bg-cream-500; }  
.button, .button-icon { @apply py-2 px-4 rounded text-center font-semibold }
.button-danger { @apply py-2 px-4 rounded text-center font-semibold cursor-pointer bg-red-600 text-white hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700; }
.button-secondary { @apply py-2 px-4 rounded text-center font-semibold cursor-pointer bg-mine-400 text-white-300 hover:bg-mine-500 dark:bg-mine-600 dark:text-white-400 dark:hover:bg-mine-700; }
/* .button-icon { @apply py-2 px-4 rounded cursor-pointer text-center font-semibold  text-mine-600 bg-wasabi-500 dark:bg-wasabi-400 dark:text-mine-800 dark:hover:bg-wasabi-300 dark:hover:text-mine-900; }   */
/* .button-uploader { @apply cursor-pointer bg-mine-600 text-wasabi-500 hover:text-mine-600 hover:bg-wasabi-500 dark:bg-wasabi-400 dark:text-mine-800 dark:hover:bg-wasabi-300; } */

/* a { @apply text-morado-600 hover:text-morado-500 dark:text-morado-500 dark:hover:text-morado-400 font-bold; } */
a { @apply text-pink-700 dark:text-pink-400 cursor-pointer hover:text-pink-800 dark:hover:text-pink-300 transition-colors font-bold no-underline!; }

.white-card { @apply p-4 sm:p-6 rounded-xl bg-linear-to-br from-white-400 to-white-500 dark:from-mine-400 dark:to-mine-500 border border-wasabi-300 dark:border-wasabi-600; }