@layer settings, generic, elements, components, utilities;

:root {
  /* Swiper */
  --swiper-theme-color: var(--color-grayscale-white);
  --swiper-navigation-size: var(--size-15);
}

@layer settings {
  :root {
    /* Colors */
    --color-primary: var(--color-orange-700);
    --color-secondary: var(--color-grayscale-800);
    --color-orange-100: #fff6f3;
    --color-orange-700: #fc663d;
    --color-grayscale-white: #fff;
    --color-grayscale-100: #f3f3f3;
    --color-grayscale-200: #eee;
    --color-grayscale-300: #d9d9d9;
    --color-grayscale-400: #d1d1d1;
    --color-grayscale-500: #adadad;
    --color-grayscale-600: #8a8a8a;
    --color-grayscale-700: #505050;
    --color-grayscale-800: #202020;

    /* Font families */
    --font-family-display: 'Platypi', serif;
    --font-family-text: 'Work Sans', serif;

    /* Font sizes */
    --text-9xl: 106px;
    --text-8xl: 80px;
    --text-7xl: 60px;
    --text-6xl: 50px;
    --text-5xl: 40px;
    --text-4xl: 36px;
    --text-3xl: 32px;
    --text-2xl: 28px;
    --text-xl: 24px;
    --text-lg: 20px;
    --text-md: 18px;
    --text-sm: 16px;
    --text-xs: 15px;

    /* Letter spacing */
    --tracking-tight: -0.02em;

    /* Sizing */
    --size-\.5: 2px;
    --size-1: 4px;
    --size-1\.5: 6px;
    --size-2: 8px;
    --size-2\.5: 10px;
    --size-3: 12px;
    --size-4: 16px;
    --size-5: 20px;
    --size-6: 24px;
    --size-7: 28px;
    --size-8: 32px;
    --size-9: 36px;
    --size-10: 40px;
    --size-11: 44px;
    --size-12: 48px;
    --size-13: 52px;
    --size-14: 56px;
    --size-15: 60px;
    --size-16: 64px;
    --size-17: 68px;
    --size-18: 72px;
    --size-19: 76px;
    --size-20: 80px;
    --size-22: 88px;
    --size-25: 100px;
    --size-27: 108px;
    --size-28: 112px;
    --size-29: 116px;
    --size-30: 120px;
    --size-35: 140px;
    --size-40: 160px;
    --size-45: 180px;
    --size-50: 200px;
    --size-55: 220px;
    --size-67: 268px;
    --size-68: 272px;
    --size-93: 372px;
    --size-109: 436px;
    --size-126: 504px;
    --size-137: 548px;
    --size-143: 572px;
    --size-180: 720px;
    --size-198: 792px;
    --size-312: 1248px;

    /* Grid */
    --grid-columns: 12;
    --grid-gap: var(--size-6);
    --grid-gap-mobile: var(--size-4);
    --grid-width: calc(var(--size-312) + (var(--grid-gap) * 2));
    --grid-width-no-gap: var(--size-312);
    --grid-column-width: calc(
      (var(--size-312) - (var(--grid-gap) * (var(--grid-columns) - 1))) /
        var(--grid-columns)
    );
  }
}