:root {
    --color-neutral-0: hsl(129, 27%, 99%);
    --color-neutral-100: hsl(129, 27%, 90%);
    --color-neutral-200: hsl(129, 27%, 80%);
    --color-neutral-300: hsl(129, 27%, 70%);
    --color-neutral-400: hsl(129, 27%, 60%);
    --color-neutral-500: hsl(129, 27%, 50%);
    --color-neutral-600: hsl(129, 27%, 40%);
    --color-neutral-700: hsl(129, 27%, 30%);
    --color-neutral-800: hsl(129, 27%, 20%);
    --color-neutral-900: hsl(129, 27%, 10%);

    --color-primary-0: hsl(129, 75%, 99%);
    --color-primary-100: hsl(129, 75%, 90%);
    --color-primary-200: hsl(129, 75%, 80%);
    --color-primary-300: hsl(129, 75%, 70%);
    --color-primary-400: hsl(129, 75%, 60%);
    --color-primary-500: hsl(129, 75%, 50%);
    --color-primary-600: hsl(129, 75%, 40%);
    --color-primary-700: hsl(129, 75%, 30%);
    --color-primary-800: hsl(129, 75%, 20%);
    --color-primary-900: hsl(129, 75%, 10%);

    --color-secondary-0: hsl(189, 75%, 99%);
    --color-secondary-100: hsl(189, 75%, 90%);
    --color-secondary-200: hsl(189, 75%, 80%);
    --color-secondary-300: hsl(189, 75%, 70%);
    --color-secondary-400: hsl(189, 75%, 60%);
    --color-secondary-500: hsl(189, 75%, 50%);
    --color-secondary-600: hsl(189, 75%, 40%);
    --color-secondary-700: hsl(189, 75%, 30%);
    --color-secondary-800: hsl(189, 75%, 20%);
    --color-secondary-900: hsl(189, 75%, 10%);

    --color-tertiary-0: hsl(261, 75%, 99%);
    --color-tertiary-100: hsl(261, 75%, 90%);
    --color-tertiary-200: hsl(261, 75%, 80%);
    --color-tertiary-300: hsl(261, 75%, 70%);
    --color-tertiary-400: hsl(261, 75%, 60%);
    --color-tertiary-500: hsl(261, 75%, 50%);
    --color-tertiary-600: hsl(261, 75%, 40%);
    --color-tertiary-700: hsl(261, 75%, 30%);
    --color-tertiary-800: hsl(261, 75%, 20%);
    --color-tertiary-900: hsl(261, 75%, 10%);

}

    :root {
    --font-body-primary: Switzer, sans-serif;
    --font-body-secondary: Switzer, sans-serif;
    --font-body-primary-size: 16px;
    --font-body-secondary-size: 14px;
    --font-body-primary-line-height: 1.5;
    --font-body-secondary-line-height: 1.51;

    --font-body-font-weight: 600;

    --font-small: Switzer, sans-serif;
    --font-small-size: 14px;
    --font-small-font-weight: 600;
    --font-small-line-height: 1.51;

    --font-h1: Switzer, sans-serif;
    --font-h1-size: 84px;
    --font-h1-font-weight: 600;
    --font-h1-line-height: 1.16;

    --font-h2: Switzer, sans-serif;
    --font-h2-size: 36px;
    --font-h2-font-weight: 600;
    --font-h2-line-height: 1.4;

    /*DEBUG VARIABLES*/
    --main-family: Switzer, sans-serif;
    --family: Switzer, sans-serif;
}
:root {
    /* SIZING */
    --sizing-block: 4px;
    --sizing-x-half: calc(var(--sizing-block) / 2);
    --sizing-x: var(--sizing-block);
    --sizing-x2: calc(var(--sizing-block) * 2);
    --sizing-x3: calc(var(--sizing-block) * 3);
    --sizing-x4: calc(var(--sizing-block) * 4);
    --sizing-x5: calc(var(--sizing-block) * 5);
    --sizing-x6: calc(var(--sizing-block) * 6);
    --sizing-x8: calc(var(--sizing-block) * 8);
    --sizing-x10: calc(var(--sizing-block) * 10);
    --sizing-x12: calc(var(--sizing-block) * 12);
    --sizing-x15: calc(var(--sizing-block) * 15);
    --sizing-x20: calc(var(--sizing-block) * 20);
    /*BASIC COLOR VARIABLES*/
    --color-background: var(--color-neutral-100);
    --color-text: var(--color-secondary-900);
    --color-text-light: var(--color-secondary-800);
    --color-primary: var(--color-primary-500);
    --color-text-primary: var(--color-primary-800);
    --color-border: var(--color-neutral-200);
    /*DEBUG VARIABLES*/
    --colorfullness: var(--100);
    --balance: var(--50);
    --backgrounds: var(--neutral);
    --colorsCount: var(--3);
    /*ANIMATION*/
    --speed: 1.25s;
    --delay: .5s;
    --delay-long: 1s;
    --easing-out: cubic-bezier(0, 0.55, 0.45, 1);
    --easing-in-out: cubic-bezier(0.85, 0, 0.15, 1);
     /* GLOBAL TOKENS */
     --space-s:  var(--sizing-x2);
     --space-m:  var(--sizing-x4);
     --space-b:  var(--sizing-x8);
     --space-xb:  var(--sizing-x10);
     --space-xxb:  var(--sizing-x20);
     --corner-s: var( --space-s);
     --corner-m: var( --space-m);
     --corner-b: var( --space-xb);
    /*COMPONENT TOKENS */
    /*Nav*/
    --nav-surface: var(--color-neutral-800);
    --nav-link-text: var(--color-neutral-200);
    --nav-link-text-hover: var(--color-neutral-0);
    --nav-link-text-active: var(--color-neutral-0);
    /*Header*/
    /*Links*/
    --links-list-gap: var(--space-b);
    --mobile-links-list-gap: var(--space-s);
    --links-link-surface: var(--color-neutral-0);
    --links-link-border: var(--color-border);
    --links-link-padding: var( --space-b);
    --links-link-corner: var( --corner-s);
    --links-link-color: var( --color-primary-700);
    --links-link-color-hover: var( --color-primary-800);
    --links-link-text-font-size: var(--font-size-h-4);
    --links-link-text-line-height: var(--line-height-h-4);
    /*Posts*/
}

.d1 {
    transition-delay: var(--delay) !important;
}