//-----------------------------------
// Variables
//-----------------------------------
// Colors
$c0: transparent;
$c1: #FFF;
$c2: #000;

// Base colors
$c3: #3A405A;
$c4: #FBB03B;
$c5: #A01303;
$c6: #2D396C;
$c7: #FEFEFE;
$c8: #DDDDDD;
$c16: #2A47CE;
$c18: #12CFC8;
$c19: #FE00BE;
$c20: #458ED1;
$c22: #2BB673;

// Theme colors
$c9: #10151F;
$c10: #151A25;
$c11: #1C2230;
$c12: #C3DAFF;
$c13: #C9D2E2;
$c14: #FFD36B;
$c15: #F38845;
$c17: #007AFF;

$c21: rgba($c16, 0.08);
$c23: rgba($c22, 0.1);
$c24: rgba($c17, 0.1);
$c25: rgba($c4, 0.1);
$c26: rgba($c16, 0.2);

// Border
$bd1: 2px dashed $c3;
$bd2: 1px solid $c3;
$bd3: 1px solid $c4;
$bd4: 10px solid $c4;
$bd5: 1px solid currentColor;
$bd6: 1px solid $c26;
$bd7: 2px dashed $c26;
$bd8: 10px solid $c6;
$bd9: 1px solid var(--theme_border);
$bd10: 2px solid var(--theme_border_btn);

// shadow
$sh1: 0 0 6px var(--theme_shadow);
$sh2: 0 2px 7px -1px var(--theme_text);
$sh3: 0 0 0 5px rgba($c18, 0.2);

// gradient
$gr1: linear-gradient(90deg, $c5 0%, $c6 100%);
$gr2: linear-gradient($c1 50%, rgba($c20, .04) 50%);

// Font
// Nunito Sans regular | bold
$f1: "Nunito Sans", "sans-serif";
// Fira Sans regular | bold
$f2: "Fira Sans", "sans-serif";
// Montserrat 900
$f3: "Montserrat", "sans-serif";
// Roboto bold
$f4: "Roboto", "sans-serif";

// Path
$i1: "../../img/svg/";

// Breakpoints
$b1: 1920; // Tamaño diseño desktop
$b2: 1440;
$b3: 1366;
$b4: 1280;
$b5: 1024;
$b6: 980; // BRP para cambio a movil tablet
$b7: 768;
$b8: 640;
$b9: 480; //Tamaño de diseño movil
$b10: 320;

// Time Animation
$t1: 100ms;
$t2: 200ms;
$t3: 300ms;
$t4: 400ms;
$t5: 500ms;
$t6: 600ms;
$t7: 700ms;
$t8: 800ms;
$t9: 900ms;
$t10: 1s;

// Variables
$charecteristics_name: (organized, reusable, consistent, productive);
$characteristics_svg: (cube, code, palette, rocket);
$characteristics_color: ($c16, $c18, $c15, $c19);

$features_name: (mixins, functions, variables, helpers, layouts);
$icon_name: (info, articles, folder_2);
$icon_reference: (sass, react, vite, webpack);

$requirements_icon: (nodejs, npm, articles);
$requirements_color: ($c22, $c17, $c4);
$requirements_bg: ($c23, $c24, $c25);

// logo sisass
$l1x: (clamp(130px, 10.44vw, 200px));
$l1y: (clamp(29px, 2.30vw, 44px));

// icon search
$l2: (26px);

// icon light / dark
$l3: (24px);

// icon arrow_2
$l4x: (15px);
$l4y: (10px);

// icon star
$l5: (18px);

// icons characteristic
$l6: (40px);

// icon arrow
$l7: (12px);

// icons moduls
$l8: (26px);

// icon help
$l9x: (15px);
$l9y: (22px);

// icon menu, icon copy
$l10: (20px);

// icon reference
$l11: (clamp(45px, 3.65vw, 70px));

// icon notice
$l12: (30px);

// icon requeriment
$l13: (clamp(20px, 1.56vw, 30px));

// icon tip
$l14: (45px);

//-----------------------------------
//End Variables
//----------------------------------