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

// colors federation 0 & trionda
$c3: #FFE800;
$c4: #3A94FB;
$c5: #00327D;
$c6: #FFC300;
$c7: #3A94FB;
$c8: #6BAFFC;
$c9_j: #131A4A;
$c10_lr: #0050BE;
$c1_j: #7E7422;
$c2_j: #79551A;

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

// colors federation 2
$c3f2: #4BC168;
$c4f2: #FA4242;
$c5f2: #0C8129;
$c6f2: #1B401B;

// colors away 1
$c1_d: #B1418D;
$c3a_j: #C650D0;
$c4a_j: #FF78D9;
$c5a_j: #D4E6FF;
$c10_l: #CFCFCF;
$c11_l: #8C8C8C;

// colors away 2
$c3a_j2: #A76D00;
$c4a_j2: $c3f1;

// colors away 3 - Alemania
$c3a_j3: #A76D00;
$c4a_j3: #FFE800;


// 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(180deg, $c4 0%, $c6 80%);
$gra5: linear-gradient(180deg, $c6 0%, $c3 80%);
$gra6: linear-gradient(180deg, $c3 0%, $c7 90%);
$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, $c6, $c9_j);
$gra3_j: radial-gradient(50vw 60% at center, $c6, $c9_j);

$gra2_l: linear-gradient(180deg, var(--c11_l) 0%, var(--c12_l) 80%);
$gra1_lr: linear-gradient(180deg, $c4 0%, $c10_lr 100%);

$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%);
$gra2_j: linear-gradient(180deg, var(--c1_j) 30%, var(--c2_j) 70%, var(--c3) 95%);

// 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 $c4;
$bd2: 1px solid $c4;
$bd3: 2px solid $c1;
$bd1_j: 1px solid $c1;
$bd3_a: 1px solid rgba($c1, 0.5);

// 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/argentina/";
$if1: "../../img/showcase-jersey/colombia/";
$if2: "../../img/showcase-jersey/mexico/";
$if3: "../../img/showcase-jersey/venezuela/";
$if4: "../../img/showcase-jersey/chile/";
$if5: "../../img/showcase-jersey/peru/";
$if6: "../../img/showcase-jersey/costarica/";

// 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(50px, 10.20vw, 100px));
$l1y_d: (72px, clamp(36px, 7.34vw, 72px));

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