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

// colors federation 0 & trionda
$c3: #3A94FB;
$c4: #FF78D9;
$c5: #00327D;
$c6: #0050BE;
$c7: #11227D;
$c8: #6BAFFC;
$c9_j: #131A4A;

// colors federation 1
$textf1: #FA4242;
//Fondo
$c3f1: #4BC168;
//brillos
$c4f1: #1B401B;
$c5f1: #0C8129;
$c6f1: #1B401B;
$c7f1: #FFC300;

// colors federation 2
$c3f2: #ffffff;
$c4f2: #FFE800; 
$c5f2: #C4C4C4;
$c6f2: #C4C4C4;

// shadow
$sha1: 2px 4px 15px rgba($c1, 0.5);

// 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, $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%);
$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%);

// border
$bd1: 2px solid $c1;
$bd2: 1px solid $c1;

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

// Path
$i1: "../../img/svg/";
$i2: "../../img/game/";
$i3: "../../img/ball/";
$i4: "../../img/bg_jersey/";
$if0: "../../img/countries/Argentina/"; // Federation 0 (default) background image path
$if1: "../../img/showcase-jersey/mexico/"; // Federation 1 background image path
$if2: "../../img/showcase-jersey/costarica/";
$if3: "../../img/showcase-jersey/venezuela/";
$if4: "../../img/showcase-jersey/chile/";
$if5: "../../img/showcase-jersey/peru/";
$if6: "../../img/showcase-jersey/costarica/";
$if7: "../../img/countries/Alemania/"; // Federation 2 background image path

// 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: 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);

// copa fifa custom
$l6_custom_x: (5.9vw, 14.67vw, 24.22vw);
$l6_custom_y: (2.36vw, 5.87vw, 9.69vw); // assuming proportional height

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

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

// official match ball custom
$l17_custom_x: (4.9vw, 9.67vw, 17.22vw);
$l17_custom_y: (1.96vw, 3.87vw, 6.94vw);

// 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(175px, 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);

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

$l18: (40px);

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

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