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

// colors federation 0 & trionda
$c3: #4BC168;
$c4: #FA4242;
$c5: #00480b;
$c6: #0C8129;
$c7: #006810;
$c8: #6BAFFC;
$c9_j: #131A4A;

// colors federation 1
$c3f1: #FFE800;
$c4f1: #FFA600;
$c5f1: #79551A;
$c6f1: #C4C4C4;
$c7f1: #FFC300;

// colors federation 2
$c3f2: #3A94FB;
$c4f2: #FA4242;
$c5f2: #1D4A7E;
$c6f2: #0050BE;

// colors away 1 - Mexico
$c1_d: #0C8129;
$c3a_j: #0C8129;
$c4a_j: #4BC168;
$c5a_j: #D4E6FF;
$c10_l: #CFCFCF;
$c11_l: #8C8C8C;

// colors away 2 - Mexico
$c3a_j2: #0C8129;
$c4a_j2: #4BC168;

// colors away 3 - Mexico
$c3a_j3: #0C8129;
$c4a_j3: #4BC168;


// shadow
$sha1: 2px 4px 15px rgba($c1, 0.5);
$sha1_d: 0 15px 15px rgba($c2, 0.5);
$sha1_j: 0px 15px 20px rgba($c2, 0.5);
$sha1_a: 0 4px 15px rgba($c2, 0.3);

// gradients
$gra1: linear-gradient(180deg, var(--c3) 0%, var(--c6) 80%);
$gra2: linear-gradient(180deg, $c6 0%, $c7 80%);
$gra3: linear-gradient(180deg, $c7 0%, $c3 38%);
$gra4: linear-gradient(0deg, $c3 70%, $c0 100%);
$gra5: linear-gradient(180deg, $c6 0%, $c7 80%);
$gra6: linear-gradient(0deg, $c3 10%, $c0 80%);
$gra1_j: linear-gradient(180deg, var(--c6) 0%, var(--c3) 100%);
$gra2_j: radial-gradient(min(36.45vw, 700px) min(31.77vw, 610px) at center, $c6f2, $c9_j);
$gra3_j: radial-gradient(50vw 60% at center, $c6f2, $c9_j);

$gra2_l: linear-gradient(180deg, var(--c11_l) 0%, var(--c12_l) 80%);
$gra1f: linear-gradient(180deg, var(--c3) 0%, var(--c6) 80%);
$gra2f: linear-gradient(0deg, var(--c3) 10%, $c0 80%);
$gra3f: linear-gradient(180deg, var(--c8_lp) 0%, var(--c9_lp) 80%);
$gra4f: linear-gradient(180deg, var(--c6) 0%, var(--c3) 80%);

// gradient away
$gra3_l: linear-gradient(to bottom, $c10_l 0%, $c11_l 100%);
$gra4_j: linear-gradient(90deg, var(--c3) 20%, var(--c4) 50%, var(--c3) 80%);
$gra5_j: radial-gradient(circle, var(--c5) 0%, $c0 70%);
$gra6_j: linear-gradient(180deg, $c0 0%, var(--c3) 95%);
$gra7_j: linear-gradient(0deg, $c0 0%, var(--c3) 95%);
$gra8_j: linear-gradient(0deg, $c0 0%, $c2 95%);
$gra9_j: linear-gradient(180deg, $c0 0%, $c2 95%);
$gra1_a: linear-gradient(90deg, rgba($c2, 1) 20%, darken($c1, 85%) 50%, rgba($c2, 1) 80%);

// border
$bd1: 2px solid $c1;
$bd2: 1px solid $c1;
$bd3_a: 1px solid rgba($c1, 0.5);
$bd3: 2px solid $c3f1;

// Font
// adidasFG 400 | 700
$f1: "adidasFG", "sans-serif";
// ADI WCUS26 400
$f2: "ADI WCUS26", "adidasFG";
// Winner NarrowMedium 400
$f3: "Winner NarrowMedium", "sans-serif";
// Fits 400
$f4: "Fits", "sans-serif";

// Path
$i1: "../../img/svg/";
$i2: "../../img/game/";
$i3: "../../img/ball/";
$i4: "../../img/bg_jersey/";
$i1_d: "../../img/highlight_product/cta/";
$if0: "../../img/showcase-jersey/mexico/";
$if1: "../../img/showcase-jersey/alemania/";
$if2: "../../img/showcase-jersey/argentina/";

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

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

/* variables */
// logo adidas fifa wc26
$l1x: (
  126px,
  3.80vw,
  84px,
  8.57vw,
  14.44vw
);
$l1y: (
  60px,
  1.77vw,
  40px,
  4.08vw,
  6.94vw
);

// icon bag
$l2x: (
  21px,
  12px
);
$l2y: (
  25px,
  15px
);

// trionda
$l3: (
  35vw,
  min(44.27vw, 850px),
  80vw,
  min(76.53vw, 750px)
);

// fifa world cup
$l4: (
  17vw,
  60vw
);

// arrow_1, arrow_2
$l5x: (
  35px
);
$l5y: (
  17px
);

// fifa world cup 2
$l6x: (
  3.90vw,
  8.67vw,
  17.22vw
);
$l6y: (
  1.56vw,
  3.46vw,
  6.94vw
);

// fifa world cup 3
$l6x_1: (
  5.87vw,
  11.42vw,
  17vw
);
$l6y_1: (
  1.56vw,
  3.06vw,
  5vw
);

// icon info
$l17_l: (
  25px,
  15px
);

// official match ball
$l7x: (
  3.90vw,
  8.67vw,
  17.22vw
);
$l7y: (
  1.56vw,
  3.46vw,
  6.94vw
);

$l7x_1: (
  3.2vw,
  7.17vw,
  11.22vw
);

// arrow_3
$l8: (
  10px
);

// open_tooltip
$l9: (
  clamp(10px, 1.30vw, 25px)
);

// close_tooltip
$l10: (
  15px
);

// next prev historic
$l11x: (
  10px
);
$l11y: (
  30px
);

// loader ball
$l12: (
  120px
);

// logo adidas
$l13x: (
  320px,
  250px,
  min(7.81vw, 150px)
);
$l13y: (
  201px,
  157px,
  min(4.90vw, 94px)
);

// decoration ball
$l14: (
  clamp(250px, 21.96vw, 300px),
  50px,
  100px,
  clamp(250px, 21.96vw, 300px),
  100px,
  50px
);
$l14_1: (
  clamp(100px, 35.15vw, 225px),
  clamp(25px, 7.82vw, 50px),
  0,
  0,
  clamp(80px, 18.5vw, 120px),
  clamp(25px, 7.82vw, 50px)
);

$l15x: (
  max(-1.88vw, -36px),
  min(14.32vw, 275px),
  min(19.79vw, 380px),
  min(4.29vw, 140px),
  min(13.54vw, 260px),
  min(4.11vw, 79px)
);
$l15y: (
  -61px,
  237px,
  60px,
  -189px,
  167px,
  275px
);

$l15x_1: (
  max(-1.88vw, -36px),
  min(27.34vw, 210px),
  0,
  0,
  31px,
  min(4.11vw, 79px)
);
$l15y_1: (
  16px,
  237px,
  0,
  0,
  54px,
  212px
);

// btns
$l16x: (
  clamp(155px, 9.11vw, 175px),
  clamp(129px, 17.85vw, 175px),
  105px
);
$l16y: (
  clamp(44px, 2.60vw, 50px),
  clamp(37px, 5.10vw, 50px),
  30px
);

$l16x_1: (
  175px,
  129px,
  105px
);
$l16y_1: (
  50px,
  37px,
  30px
);

$l16x_2: (
  clamp(155px, 9.11vw, 175px),
  clamp(100px, 17.85vw, 175px)
);
$l16y_2: (
  clamp(44px, 2.60vw, 50px),
  clamp(28px, 5.10vw, 50px)
);

// icon info
$l17: (
  40px,
  25px
);

$l18: (
  40px
);

// icon reload
$l19x: (
  25px
);
$l19y: (
  28px
);

// icon arrow
$l20x: (
  13px,
  10px
);
$l20y: (
  38px,
  30px
);

// logo adidas originals
$l21x: (
  71px,
  57px
);
$l21y: (
  50px,
  40px
);

// logo original
$l1x_d: (
  100px,
  clamp(70px, 10.20vw, 100px)
);
$l1y_d: (
  72px,
  clamp(50px, 7.34vw, 72px)
);

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