@use "sass:color";
@use "sass:map";
@use "sass:string";

@import "import";

:root {
  /* Colors */
  --color-debug: var(--color-magenta);

  @each $color-name, $color-value in $colors {
    @include set-color-css-variables($color-name, $color-value);
  }

  // Common to both light and dark themes
  @each $color-name, $color-value in map.get($themes, "common") {
    @include set-color-css-variables($color-name, $color-value);
  }

  /* Global */
  --max-width-global: 1440px;
  --max-width-content: 670px;
  --grid-column-count: 12;
  --grid-gutter: 0px;
  --grid-margin: 20px;
  --header-height: 72px;
  --footer-height: 48px;

  /* Border radius */
  --border-radius-none: none;
  --border-radius-1: 4px;
  --border-radius-2: 8px;
  --border-radius-3: 12px;
  --border-radius-4: 16px;
  --border-radius-5: 36px;
  --border-radius-pill: 999px;
  --border-radius-circle: 50%;

  /* Spacers */
  --spacer-1: 4px;
  --spacer-2: 8px;
  --spacer-3: 12px;
  --spacer-4: 16px;
  --spacer-5: 20px;
  --spacer-6: 24px;
  --spacer-7: 32px;
  --spacer-8: 40px;
  --spacer-9: 48px;
  --spacer-10: 64px;
  --spacer-11: 72px;
  --spacer-12: 90px;
  --spacer-13: 106px;
  --spacer-14: 132px;
  --spacer-xs: var(--spacer-3);
  --spacer-sm: var(--spacer-7);
  --spacer-md: var(--spacer-8);
  --spacer-lg: var(--spacer-9);
  --spacer-xl: var(--spacer-10);

  /* Z-Index */
  --z-index-negative: -1;
  --z-index-0: 0;
  --z-index-1: 1;
  --z-index-2: 2;
  --z-index-3: 3;
  --z-index-4: 4;
  --z-index-5: 5;
  --z-index-10: 10;
  --z-index-controls: 100;
  --z-index-header: 200;
  --z-index-overlay: 999;
  --z-index-max: 1000;

  /* Easing */
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);

  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);

  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);

  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Typography */
  --font-family-sans-serif: "Roobert", "Inter", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  --font-family-serif: "Libre Caslon Condensed", "Times New Roman", serif;
  --font-family-serif-italic: "Libre Caslon Condensed Italic", "Times New Roman",
    serif;
  --font-family-monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  --font-family-base: var(--font-family-sans-serif);
  --font-size-base: 62.5%;
  --line-height-base: 1;
  --letter-spacing-base: 0;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 650;

  --font-family-heading-1: var(--font-family-serif);
  --font-size-heading-1: 6.4rem;
  --line-height-heading-1: 1;
  --letter-spacing-heading-1: -0.0192rem;
  --font-weight-heading-1: var(--font-weight-regular);

  --font-family-heading-2: var(--font-family-sans-serif);
  --font-size-heading-2: 5.6rem;
  --line-height-heading-2: 5.3;
  --letter-spacing-heading-2: -0.0168rem;
  --font-weight-heading-2: var(--font-weight-bold);

  --font-family-heading-3: var(--font-family-sans-serif);
  --font-size-heading-3: 1.8rem;
  --line-height-heading-3: 1;
  --letter-spacing-heading-3: -0.02em;
  --font-weight-heading-3: var(--font-weight-bold);

  --font-family-heading-4: var(--font-family-sans-serif);
  --font-size-heading-4: 2.2rem;
  --line-height-heading-4: 1.1;
  --letter-spacing-heading-4: 0;
  --font-weight-heading-4: var(--font-weight-bold);

  --font-family-heading-5: var(--font-family-sans-serif);
  --font-size-heading-5: 2rem;
  --line-height-heading-5: 1.25;
  --letter-spacing-heading-5: 0;
  --font-weight-heading-5: var(--font-weight-medium);

  --font-family-heading-6: var(--font-family-sans-serif);
  --font-size-heading-6: 2rem;
  --line-height-heading-6: 1.25;
  --letter-spacing-heading-6: 0;
  --font-weight-heading-6: var(--font-weight-medium);

  --font-family-body: var(--font-family-base);
  --font-size-body: 1.6rem;
  --line-height-body: 1.6;
  --letter-spacing-body: -0.04em;
  --font-weight-body: var(--font-weight-regular);

  --font-family-body-medium: var(--font-family-body);
  --font-size-body-medium: var(--font-size-body);
  --line-height-body-medium: var(--line-height-body);
  --letter-spacing-body-medium: var(--letter-spacing-body);
  --font-weight-body-medium: var(--font-weight-medium);

  --font-family-body-bold: var(--font-family-body);
  --font-size-body-bold: var(--font-size-body);
  --line-height-body-bold: var(--line-height-body);
  --letter-spacing-body-bold: var(--letter-spacing-body);
  --font-weight-body-bold: var(--font-weight-bold);

  --font-family-small: var(--font-family-base);
  --font-size-small: 1.4rem;
  --line-height-small: 1.15;
  --letter-spacing-small: 0;
  --font-weight-small: var(--font-weight-regular);

  --font-family-code: var(--font-family-monospace);
  --font-size-code: 1.2rem;
  --line-height-code: 1;
  --letter-spacing-code: 0;
  --font-weight-code: var(--font-weight-regular);

  --font-family-fluid-headline: var(--font-family-serif);
  --font-size-fluid-headline: calc(1.8rem + 2vw);
  --line-height-fluid-headline: var(--line-height-base);
  --letter-spacing-fluid-headline: -0.02em;
  --font-weight-fluid-headline: var(--font-weight-regular);

  @include breakpoint(small) {
    /* Colors */
    --color-debug: var(--color-yellow);

    /* Global */
    --footer-height: 48px;
  }

  @include breakpoint(medium) {
    /* Colors */
    --color-debug: var(--color-cyan);

    /* Global */
    --grid-gutter: 24px;
    --grid-margin: 20px;
    --header-height: 77px;

    /* Spacers */
    --spacer-xs: var(--spacer-4);
    --spacer-sm: var(--spacer-8);
    --spacer-md: var(--spacer-9);
    --spacer-lg: var(--spacer-11);
    --spacer-xl: var(--spacer-11);

    /* Typography */
    --font-size-heading-1: 7.6rem;
    --line-height-heading-1: 1;

    --font-size-heading-2: 6.8rem;
    --line-height-heading-2: 6.5rem;
    --letter-spacing-heading-2: -0.0204rem;

    --font-size-heading-3: 2rem;
    --line-height-heading-3: 1;

    --font-size-heading-4: 2.2rem;
    --line-height-heading-4: 1.1;

    --font-size-heading-5: 2rem;
    --line-height-heading-5: 1.25;

    --font-size-heading-6: 2rem;
    --line-height-heading-6: 1.25;

    --font-size-body: 1.6rem;
    --line-height-body: 1.5;

    --font-size-small: 1.4rem;
    --line-height-small: 1.15;

    --font-size-code: 1.4rem;
    --line-height-code: 1.1;

    --font-size-fluid-headline: clamp(2.6rem, calc(3.2rem + 2vw), 8rem);
  }

  @include breakpoint(large) {
    /* Colors */
    --color-debug: var(--color-lime);
  }

  @include breakpoint(xlarge) {
    /* Colors */
    --color-debug: var(--color-yellow);

    /* Typography */
    --font-size-fluid-headline: calc(5.6rem + 2vw);
  }

  @include breakpoint(xxlarge) {
    /* Colors */
    --color-debug: var(--color-magenta);

    /* Typography */
    --font-size-fluid-headline: calc(6.4rem + 2vw);
  }

  // supports
  --vh: 88vh;
  @supports (height: 1dvh) {
    --vh: 100dvh;
  }
}

[data-theme="light"] {
  /* Colors */
  @each $color-name, $color-value in map.get($themes, "light") {
    @include set-color-css-variables($color-name, $color-value, true);
  }
}

[data-theme="dark"] {
  /* Colors */
  @each $color-name, $color-value in map.get($themes, "dark") {
    @include set-color-css-variables($color-name, $color-value, true);
  }
}