/* =====================================================
   TOKENS DE CORES - DESIGN SYSTEM
   -----------------------------------------------------
   Convenção:
   --<nome>-<nível>
   Nível vai de 1 (mais escuro) até 12 (mais claro).
   Cor 6 = cor principal para o select visual.
   ===================================================== */

/* ---------- SYSTEM COLORS ---------- */
:root {
  /* Gray */
  --gray-12: #111112;
  --gray-11: #161618;
  --gray-10: #1E1E21;
  --gray-9: #27272a;
  --gray-8: #434347;
  --gray-7: #57575C;
  --gray-6: #6D6D72;
  --gray-5: #858589;
  --gray-4: #9F9FA2;
  --gray-3: #BBBBBD;
  --gray-2: #DBDBDC;
  --gray-1: #F1F1F1;

  /* Red */
  --red-12: #29090A;
  --red-11: #440E10;
  --red-10: #601417;
  --red-9: #7B1A1D;
  --red-8: #962024;
  --red-7: #B2252B;
  --red-6: #CD2B31;
  --red-5: #E4666C;
  --red-4: #EA8A8E;
  --red-3: #F0AEB1;
  --red-2: #FFE5E5;
  --red-1: #FDF4F5;     

  /* Green */
  --green-12: #0A2116;
  --green-11: #103724;
  --green-10: #164D32;
  --green-9: #1D6241;
  --green-8: #23784F;
  --green-7: #2A8E5E;
  --green-6: #30A46C;
  --green-5: #57B588;
  --green-4: #7FC7A4;
  --green-3: #A6D8C0;
  --green-2: #CDE9DC;
  --green-1: #F5FBF8;

  /* Yellow */
  --yellow-12: #332911;
  --yellow-11: #55451C;
  --yellow-10: #776127 ;
  --yellow-9: #987C32;
  --yellow-8: #BA983D;
  --yellow-7: #DCB348;
  --yellow-6: #FECF53; 
  --yellow-5: #FED874;
  --yellow-4: #FFEAB5;
  --yellow-3: #FFEAB5;
  --yellow-2: #FFF4D6;
  --yellow-1: #FFFDF6;

  /* Blue */
  --blue-12: #021D2D;
  --blue-11: #04304C;
  --blue-10: #06436A;
  --blue-9: #075688;
  --blue-8: #096AA7;
  --blue-7: #0A7DC5;
  --blue-6: #0C90E3;
  --blue-5: #3AA5E8;
  --blue-4: #3AA5E8;
  --blue-3: #68BAEE; 
  --blue-2: #C5E4F8;
  --blue-1: #F3FAFE;


  --newblue-1: #edf0fe;
  --newblue-2: #d4dcfe;
  --newblue-3: #abbefc;
  --newblue-4: #84a4fb;
  --newblue-5: #578cfa;
  --newblue-6: #1e75f0;
  --newblue-7: #1966d3;
  --newblue-8: #1252ad;
  --newblue-9: #0b3d83;
  --newblue-10: #052658;
  --newblue-11: #031b42;
  --newblue-12: #01102c;
}

/* ---------- EXTENDED COLORS ---------- */
:root {
  /* Crimson */
  --crimson-12: #120007;
  --crimson-11: #460A22;
  --crimson-10: #630E30;
  --crimson-9: #7F123D;
  --crimson-8: #9B164B;
  --crimson-7: #B71A58;
  --crimson-6: #D31E66;
  --crimson-5: #DB4983;
  --crimson-4: #E474A0;
  --crimson-3: #EC9EBD;
  --crimson-2: #F4C9DA;
  --crimson-1: #FDF4F7;

  /* Pink */
  --pink-12: #1C0012;
  --pink-11: #440A2F;
  --pink-10: #600E42;
  --pink-9: #7B1155;
  --pink-8: #961567;
  --pink-7: #B2197A;
  --pink-6: #CD1D8D;
  --pink-5: #D748A3;
  --pink-4: #E073B8;
  --pink-3: #EA9ECE;
  --pink-2: #F3C9E4;
  --pink-1: #FDF4F9;

  /* Purple */
  --purple-12: #12051D;
  --purple-11: #1D173A;
  --purple-10: #292152;
  --purple-9: #342A69;
  --purple-8: #403380;
  --purple-7: #4B3D98;
  --purple-6: #5746AF;
  --purple-5: #7769BE;
  --purple-4: #978CCD;
  --purple-3: #B7AFDD;
  --purple-2: #D7D3EC;
  --purple-1: #F7F6FB;

  /* Violet */
  --violet-12: #0A081A;
  --violet-11: #1D173A;
  --violet-10: #292152;
  --violet-9: #342A69;
  --violet-8: #403380;
  --violet-7: #4B3D98;
  --violet-6: #5746AF;
  --violet-5: #7769BE;
  --violet-4: #978CCD;
  --violet-3: #B7AFDD;
  --violet-2: #D7D3EC;
  --violet-1: #F7F6FB;

  /* Indigo */
  --indigo-12: #050B1F;
  --indigo-11: #111B3B;
  --indigo-10: #182653;
  --indigo-9: #1F316B;
  --indigo-8: #263B83;
  --indigo-7: #2D469A;
  --indigo-6: #3451B2;
  --indigo-5: #5B72C1;
  --indigo-4: #8193CF;
  --indigo-3: #A8B4DE;
  --indigo-2: #CED5ED;
  --indigo-1: #F5F6FB;

  /* Sky */
  --sky-12: #001015;
  --sky-11: #002836;
  --sky-10: #00384B;
  --sky-9: #004861;
  --sky-8: #005876;
  --sky-7: #00688C;
  --sky-6: #0078A1;
  --sky-5: #3192B3;
  --sky-4: #61ABC5;
  --sky-3: #91C5D7;
  --sky-2: #C2DFE8;
  --sky-1: #F2F8FA;

  /* Teal */
  --teal-12: #001211;
  --teal-11: #022925;
  --teal-10: #033934;
  --teal-9: #044943;
  --teal-8: #045A51;
  --teal-7: #056A60;
  --teal-6: #067A6F;
  --teal-5: #35938A;
  --teal-4: #65ADA6;
  --teal-3: #94C6C1;
  --teal-2: #C3DFDC;
  --teal-1: #F3F8F8;

  /* Lime */
  --lime-12: #0B0F00;
  --lime-11: #1F2804;
  --lime-10: #2B3806;
  --lime-9: #384708;
  --lime-8: #44570A;
  --lime-7: #51670B;
  --lime-6: #5D770D;
  --lime-5: #7C913B;
  --lime-4: #9BAB69;
  --lime-3: #B9C597;
  --lime-2: #D8DEC5;
  --lime-1: #F7F8F3;

  /* Orange */
  --orange-12: #170900;
  --orange-11: #3F1900;
  --orange-10: #582300;
  --orange-9: #712D00;
  --orange-8: #8B3700;
  --orange-7: #A44100;
  --orange-6: #BD4B00;
  --orange-5: #CA6D31;
  --orange-4: #D68F61;
  --orange-3: #E3B291;
  --orange-2: #EFD4C2;
  --orange-1: #FCF6F2;

  --primary-color-1 : var(--blue-1);
  --primary-color-2 : var(--blue-2);
  --primary-color-3 : var(--blue-3);
  --primary-color-4 : var(--blue-4);
  --primary-color-5 : var(--blue-5);
  --primary-color-6 : var(--blue-6);
  --primary-color-7 : var(--blue-7);
  --primary-color-8 : var(--blue-8);
  --primary-color-9 : var(--blue-9);
  --primary-color-10 : var(--blue-10);
  --primary-color-11 : var(--blue-11);
  --primary-color-12 : var(--blue-12);

  --secondary-color-1 : var(--sky-1);
  --secondary-color-2 : var(--sky-2);
  --secondary-color-3 : var(--sky-3);
  --secondary-color-4 : var(--sky-4);
  --secondary-color-5 : var(--sky-5);
  --secondary-color-6 : var(--sky-6);
  --secondary-color-7 : var(--sky-7);
  --secondary-color-8 : var(--sky-8);
  --secondary-color-9 : var(--sky-9);
  --secondary-color-10 : var(--sky-10);
  --secondary-color-11 : var(--sky-11);
  --secondary-color-12 : var(--sky-12);

  --info-color-1 : var(--blue-1);
  --info-color-2 : var(--blue-2);
  --info-color-3 : var(--blue-3);
  --info-color-4 : var(--blue-4);
  --info-color-5 : var(--blue-5);
  --info-color-6 : var(--blue-6);
  --info-color-7 : var(--blue-7);
  --info-color-8 : var(--blue-8);
  --info-color-9 : var(--blue-9);
  --info-color-10 : var(--blue-10);
  --info-color-11 : var(--blue-11);
  --info-color-12 : var(--blue-12);

  --success-color-1 : var(--green-1);
  --success-color-2 : var(--green-2);
  --success-color-3 : var(--green-3);
  --success-color-4 : var(--green-4);
  --success-color-5 : var(--green-5);
  --success-color-6 : var(--green-6);
  --success-color-7 : var(--green-7);
  --success-color-8 : var(--green-8);
  --success-color-9 : var(--green-9);
  --success-color-10 : var(--green-10);
  --success-color-11 : var(--green-11);
  --success-color-12 : var(--green-12);

  --warning-color-1 : var(--yellow-1);
  --warning-color-2 : var(--yellow-2);
  --warning-color-3 : var(--yellow-3);
  --warning-color-4 : var(--yellow-4);
  --warning-color-5 : var(--yellow-5);
  --warning-color-6 : var(--yellow-6);
  --warning-color-7 : var(--yellow-7);
  --warning-color-8 : var(--yellow-8);
  --warning-color-9 : var(--yellow-9);
  --warning-color-10 : var(--yellow-10);
  --warning-color-11 : var(--yellow-11);
  --warning-color-12 : var(--yellow-12);

  --danger-color-1 : var(--red-1);
  --danger-color-2 : var(--red-2);
  --danger-color-3 : var(--red-3);
  --danger-color-4 : var(--red-4);
  --danger-color-5 : var(--red-5);
  --danger-color-6 : var(--red-6);
  --danger-color-7 : var(--red-7);
  --danger-color-8 : var(--red-8);
  --danger-color-9 : var(--red-9);
  --danger-color-10 : var(--red-10);
  --danger-color-11 : var(--red-11);
  --danger-color-12 : var(--red-12);

  --white : #FFFFFF;

  --ct-primary : var(--blue-6);
  --ct-secondary : var(--gray-6);
  --ct-info : var(--blue-6);
  --ct-success : var(--green-6);
  --ct-warning : var(--yellow-6);
  --ct-danger : var(--red-6);
  --ct-error : var(--red-6);
  --ct-white : var(--white);

  --ct-bg-error : var(--red-2);
}

body[data-layout-color=dark] {
  --ct-primary : var(--blue-6);
  --ct-secondary : var(--gray-6);
  --ct-info : var(--blue-6);
  --ct-success : var(--green-6);
  --ct-warning : var(--yellow-6);
  --ct-danger : var(--red-6);
  --ct-error : var(--red-6);
  --ct-white : var(--gray-6);

  --ct-bg-error : var(--red-12);
}

/* Mapeando tokens para background */
.--red-6    { background-color: var(--red-6); }
.--pink-6    { background-color: var(--pink-6); }
.--purple-6  { background-color: var(--purple-6); }
.--violet-6  { background-color: var(--violet-6); }
.--blue-6    { background-color: var(--blue-6); }
.--newblue-6 { background-color: var(--newblue-6); }
.--yellow-6  { background-color: var(--yellow-6); }
.--green-6   { background-color: var(--green-6); }
.--orange-6  { background-color: var(--orange-6); }
.--lime-6    { background-color: var(--lime-6); }
.--sky-6     { background-color: var(--sky-6); }
.--teal-6    { background-color: var(--teal-6); }
.--crimson-6 { background-color: var(--crimson-6); }
.--gray-6    { background-color: var(--gray-6); }

.color-swatch {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin-right: 0.5em;
  vertical-align: middle;
}

/* Mapeando tokens para textos */
.text-red-6    { color: var(--red-6); }
.text-pink-6    { color: var(--pink-6); }
.text-purple-6  { color: var(--purple-6); }
.text-violet-6  { color: var(--violet-6); }
.text-blue-6    { color: var(--blue-6); }
.text-newblue-6 { color: var(--newblue-6); }
.text-yellow-6  { color: var(--yellow-6); }
.text-green-6   { color: var(--green-6); }
.text-orange-6  { color: var(--orange-6); }
.text-lime-6    { color: var(--lime-6); }
.text-sky-6     { color: var(--sky-6); }
.text-teal-6    { color: var(--teal-6); }
.text-crimson-6 { color: var(--crimson-6); }
.text-gray-6    { color: var(--gray-6); }