:root {
    
    --container: 1080px;
    --container-wide: 1360px;

    --page-padding-x: 20px;

    /* -------------------basic colors-------------------- */

    --color-w0: #ffffff;
    --color-w1: #f2f2f3;
    --color-w2: #e5e5e6;
    --color-w3: #c5c5c6;
    --color-w4: #a5a5a5;
    --color-w5: #8f8f8f;


    --color-n0: #667085;
    --color-n1: #787a81;
    --color-n2: #575862;
    --color-n3: #485165;
    --color-n4: #000000;
    --color-n5: #172033;

    --color-grey2: #fbfbfb;
    --color-grey3: #f2f2f3;
    --color-grey4: #dddddd;    
    --color-grey5: #e5e5e6;

    --color-b0: rgb(140, 197, 255);
    --color-b1: #4db0fc;
    --color-b2: #349ae8;
    --color-b3: #1557e4; 
    --color-b4: #2551af;
    --color-b5: #172033;
    --color-b6: hsl(240, 14%, 16%);
    --color-b7: #2890df;     

    --color-lb1: #25c3eb;
    --color-lb2: #16a4dc;
    --color-lb3: #19769a;
    
    --color-g1: #66d031;
    --color-g2: #52a429;
    --color-g3: #468726;
    --color-g4: #067647;

    --color-o1: #ffa162;
    --color-o2: #fc8225;
    --color-o3: #d86710;

    --color-r1: #ef4444;
    --color-r2: #d53030;
    
/* -------------------colors structured----------------- */

    --color-focus: var(--color-b3);
    --color-focus2: var(--color-b7);   
    --color-non-focus: var(--color-w4);
    --color-text: var(--color-n5);
    --color-text-title: var(--color-n5);
    --color-text-bright: var(--color-w0);
    --color-muted: var(--color-n3);
    --color-danger: var(--color-r2);


    --color-soft: var(--color-w0);
    --color-border:var(--color-w1);;
    --color-border-soft: var(--color-w1);
    --color-border-medium: var(--color-w2);
    --color-border-hard: var(--color-w3);   

    --color-bg-0: var(--color-w0);
    --color-bg-1: var(--color-w1);
    --color-bg-2: var(--color-w2);;;

    --color-card: var(--color-w0);


    --text-xxs: 10px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 22px;

    --title-xs: 16px;
    --title-sm: 18px;
    --title-md: 24px;
    --title-lg: 30px;

    --text-base: var(--text-xs);
    --title-base: var(--text-lg);
    --title-card: var(--text-sm);

    --weight-base: var(--weight-sm);
    --weight-title: var(--weight-md);

    --weight-xxs: 1;
    --weight-xs: 100;
    --weight-sm: 300;
    --weight-md: 550;
    --weight-lg: 700;
    --weight-xl: 900;

    --space--3: -0.75em;
    --space--2: -0.05em;
    --space--1: -0.025em;
    --space-0: 0.00em;
    --space-1: 0.025em;
    --space-2: 0.05em;
    --space-3: 0.075em;
    --space-4: 0.1em;

    --gradient-grey3: linear-gradient(25deg, var(--color-grey4) 0%, var(--color-grey3) 7%, var(--color-grey3) 90%, var(--color-grey2) 100%);

    --gradient-w: linear-gradient(25deg, var(--color-w0) 75%,  var(--color-w1) 100%);
    --gradient-ww: linear-gradient(25deg, var(--color-w1) 90%,  var(--color-w2) 100%);

    --gradient-card: linear-gradient(25deg, rgba(255, 255, 255, 0.68) 90%, rgba(231, 231, 232, 0.82) 100%);

    --gradient-b0: linear-gradient(25deg, var(--color-b1) 75%,  var(--color-b0) 100%);
    --gradient-b: linear-gradient(25deg, var(--color-b3) 75%,  var(--color-b2) 100%);
    --gradient-bb: linear-gradient(25deg, var(--color-b4) 75%,  var(--color-b3) 100%);
    --gradient-bbb: linear-gradient(25deg, var(--color-b4) 35%,  var(--color-b7) 95%, var(--color-b3) 100%);
    --gradient-bbbb: linear-gradient(25deg, var(--color-b3) 35%,  var(--color-b7) 95%, var(--color-b3) 100%);

    --gradient-lb: linear-gradient(25deg, var(--color-lb2) 75%,  var(--color-lb1) 100%);
    --gradient-lbb: linear-gradient(25deg, var(--color-lb3) 75%,  var(--color-lb2) 100%);
    --gradient-g: linear-gradient(25deg, var(--color-g2) 75%,  var(--color-g1) 100%);
    --gradient-o: linear-gradient(25deg, var(--color-o2) 75%,  var(--color-o1) 100%);
    --gradient-n: linear-gradient(25deg, var(--color-n3) 75%,  var(--color-n2) 100%);

    --gradient-blg: linear-gradient(25deg, var(--color-b4) 50%, var(--color-lb2) 80%, var(--color-g3) 100%);

    --gradient-circle-bg: radial-gradient(circle at 20% 30%, rgb(24, 128, 240), transparent 35%),
        radial-gradient(circle at 80% 70%, rgb(16, 185, 129), transparent 35%);

    --gradient-circle-r: radial-gradient(circle at 20% 30%, rgb(240, 24, 107), transparent 35%),
        radial-gradient(circle at 80% 70%, rgb(224, 44, 16), transparent 35%);

    --gradient-linear-bg: linear-gradient(120deg, #ffffff 0%, #1b7fe3 45%, #84a7d4 60%, #56d93f 100%);

    --radius-card: 24px;
    --radius-button: 14px;
    --radius-max: 999px;
    --radius-min: 3px;

    --shadow-card: 0 18px 50px rgba(16, 24, 40, .06);
    --shadow-box: 0 1px 3px rgba(16, 24, 40, .08);

    --font-main: "Onest", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-main);
    color: var(--color-text);
    background:  var(--color-bg-1);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

h1,
h2,
h3 {
    margin-top: 0px;
    font-size: var(--text-lg);
    color: var(--color-text-title);
}

p {
    margin-top: 0px;
    font-size: var(--text-sm);
    color: var(--color-non-focus);
}

/* Typography */
.breadcrumb,
.breadcrumbs {
    margin: 0 0 30px;
    font-size: var(--text-sm);
    color: var(--muted);
}

.breadcrumb a,
.breadcrumbs a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.note,
.muted { color: var(--muted); font-size: var(--text-sm); }