:root {
  color-scheme: light dark;

  /* Global colors */
  --color-deep-base: #3E3C44;
  --color-slate: #706E77;
  --color-granite: #B6B9B7;
  --color-highlight: #FAF8F4;
  --color-primary-light: #DDF2D9;
  --color-primary-plus-8: #BFDABB;
  --color-primary-plus-4: #B4CCAF;
  --color-primary-default: #A8BFA4;
  --color-primary-minus-4: #9CB298;
  --color-primary-minus-8: #91A58D;
  --color-primary-dark: #505C4E;
  --color-secondary-light: #E7E3E7;
  --color-secondary-plus-8: #CEC4CD;
  --color-secondary-plus-4: #C3B6C1;
  --color-secondary-default: #B8A8B6;
  --color-secondary-minus-4: #AE9AAB;
  --color-secondary-minus-8: #A28E9F;
  --color-secondary-dark: #60545E;
  --color-accent-light: #F5E1CE;
  --color-accent-plus-8: #EABE93;
  --color-accent-plus-4: #E5AE76;
  --color-accent-default: #F4B97D;
  --color-accent-minus-4: #CA955F;
  --color-accent-minus-8: #BB8A58;
  --color-accent-dark: #7D4831;
  --color-darken-0: rgba(0, 0, 0, 0);
  --color-darken-5: rgba(0, 0, 0, 0.05);
  --color-darken-10: rgba(0, 0, 0, 0.1);
  --color-darken-15: rgba(0, 0, 0, 0.15);
  --color-darken-20: rgba(0, 0, 0, 0.2);
  --color-darken-25: rgba(0, 0, 0, 0.25);
  --color-darken-30: rgba(0, 0, 0, 0.3);
  --color-darken-35: rgba(0, 0, 0, 0.35);
  --color-darken-40: rgba(0, 0, 0, 0.4);
  --color-darken-45: rgba(0, 0, 0, 0.45);
  --color-darken-50: rgba(0, 0, 0, 0.5);
  --color-darken-55: rgba(0, 0, 0, 0.55);
  --color-darken-60: rgba(0, 0, 0, 0.6);
  --color-darken-65: rgba(0, 0, 0, 0.65);
  --color-darken-70: rgba(0, 0, 0, 0.7);
  --color-darken-75: rgba(0, 0, 0, 0.75);
  --color-darken-80: rgba(0, 0, 0, 0.8);
  --color-darken-85: rgba(0, 0, 0, 0.85);
  --color-darken-90: rgba(0, 0, 0, 0.9);
  --color-darken-95: rgba(0, 0, 0, 0.95);
  --color-darken-100: rgba(0, 0, 0, 1);
  --color-lighten-0: rgba(255, 255, 255, 0);
  --color-lighten-5: rgba(255, 255, 255, 0.05);
  --color-lighten-10: rgba(255, 255, 255, 0.1);
  --color-lighten-15: rgba(255, 255, 255, 0.15);
  --color-lighten-20: rgba(255, 255, 255, 0.2);
  --color-lighten-25: rgba(255, 255, 255, 0.25);
  --color-lighten-30: rgba(255, 255, 255, 0.3);
  --color-lighten-35: rgba(255, 255, 255, 0.35);
  --color-lighten-40: rgba(255, 255, 255, 0.4);
  --color-lighten-45: rgba(255, 255, 255, 0.45);
  --color-lighten-50: rgba(255, 255, 255, 0.5);
  --color-lighten-55: rgba(255, 255, 255, 0.55);
  --color-lighten-60: rgba(255, 255, 255, 0.6);
  --color-lighten-65: rgba(255, 255, 255, 0.65);
  --color-lighten-70: rgba(255, 255, 255, 0.7);
  --color-lighten-75: rgba(255, 255, 255, 0.75);
  --color-lighten-80: rgba(255, 255, 255, 0.8);
  --color-lighten-85: rgba(255, 255, 255, 0.85);
  --color-lighten-90: rgba(255, 255, 255, 0.9);
  --color-lighten-95: rgba(255, 255, 255, 0.95);
  --color-lighten-100: rgba(255, 255, 255, 1);
  --heading-2-font-weight: 600;
  --heading-2-font-family: 'Inter', sans-serif;
  /* 20px */
  --heading-2-font-size: 1.25rem;
  /* 28px */
  --heading-2-line-height: 1.4;
  --body-font-weight: 400;
  --body-font-family: 'Inter', sans-serif;
  /* 16px */
  --body-font-size: 1rem;
  /* 24px */
  --body-line-height: 1.5;

  /* Semantic tokens */
  --background-neutral: light-dark(var(--color-highlight), var(--color-deep-base));
  --background-accent: light-dark(var(--color-accent-dark), var(--color-accent-dark));
  --background-primary: light-dark(var(--color-primary-dark), var(--color-primary-dark));
  --background-secondary: light-dark(var(--color-secondary-dark), var(--color-secondary-dark));
  --background-menu: light-dark(var(--color-accent-default), var(--color-accent-default));
  --background-text-input-rest: light-dark(var(--color-darken-5), var(--color-lighten-5));
  --background-text-input-hover: light-dark(var(--color-darken-10), var(--color-lighten-10));
  --background-text-input-pressed: light-dark(var(--color-darken-15), var(--color-lighten-15));
  --background-text-input-focused: light-dark(var(--color-darken-5), var(--color-lighten-5));
  --background-text-input-on-accent-rest: var(--color-lighten-5);
  --background-text-input-on-accent-hover: var(--color-lighten-10);
  --background-text-input-on-accent-pressed: var(--color-lighten-15);
  --background-text-input-on-accent-focused: var(--color-lighten-5);
  --background-button-primary-rest: light-dark(var(--color-accent-default), var(--color-accent-light));
  --background-button-primary-hover: light-dark(var(--color-accent-minus-4), var(--color-accent-plus-8));
  --background-button-primary-pressed: light-dark(var(--color-accent-minus-8), var(--color-accent-plus-4));
  --background-button-subtle-rest: light-dark(var(--color-darken-0), var(--color-lighten-0));
  --background-button-subtle-hover: light-dark(var(--color-darken-10), var(--color-lighten-10));
  --background-button-subtle-pressed: light-dark(var(--color-darken-20), var(--color-lighten-20));
  --background-button-on-accent-rest: light-dark(var(--color-highlight), var(--color-deep-base));
  --background-button-on-accent-hover: light-dark(color-mix(in srgb, var(--color-highlight) 90%, black), color-mix(in srgb, var(--color-deep-base) 90%, white));
  --background-button-on-accent-pressed: light-dark(color-mix(in srgb, var(--color-highlight) 80%, black), color-mix(in srgb, var(--color-deep-base) 80%, white));
  --background-button-on-image-rest: var(--color-darken-0);
  --background-button-on-image-hover: var(--color-darken-10);
  --background-button-on-image-pressed: var(--color-darken-20);
  --foreground-primary: light-dark(var(--color-deep-base), var(--color-highlight));
  --foreground-secondary: light-dark(var(--color-slate), var(--color-granite));
  --foreground-on-accent: color-mix(in srgb, var(--color-highlight)90%, transparent);
  --foreground-on-accent-strong: var(--color-highlight);
  --foreground-on-image: color-mix(in srgb, var(--color-highlight)90%, transparent);
  --foreground-on-menu: var(--color-deep-base);
  --foreground-text-input-filled: light-dark(var(--color-deep-base), var(--color-highlight));
  --foreground-text-input-placeholder: light-dark(var(--color-slate), var(--color-granite));
  --foreground-text-input-on-accent-filled: var(--color-highlight);
  --foreground-text-input-on-accent-placeholder: var(--color-granite);
  --foreground-button-primary-rest: var(--color-deep-base);
  --foreground-button-primary-hover: var(--color-deep-base);
  --foreground-button-primary-pressed: var(--color-deep-base);
  --foreground-button-subtle-rest: var(--foreground-primary);
  --foreground-button-subtle-hover: var(--foreground-primary);
  --foreground-button-subtle-pressed: var(--foreground-primary);
  --foreground-button-on-accent-rest: var(--foreground-primary);
  --foreground-button-on-accent-hover: var(--foreground-primary);
  --foreground-button-on-accent-pressed: var(--foreground-primary);
  --foreground-button-on-image-rest: var(--foreground-on-image);
  --foreground-button-on-image-hover: var(--foreground-on-image);
  --foreground-button-on-image-pressed: var(--foreground-on-image);
  --stroke-text-input-rest: light-dark(var(--color-granite), var(--color-slate));
  --stroke-text-input-hover: light-dark(var(--color-granite), var(--color-slate));
  --stroke-text-input-pressed: light-dark(var(--color-granite), var(--color-slate));
  --stroke-text-input-on-accent-rest: var(--color-granite);
  --stroke-text-input-on-accent-hover: var(--color-granite);
  --stroke-text-input-on-accent-pressed: var(--color-granite);
  --stroke-ctrl-focused: light-dark(var(--color-deep-base), var(--color-highlight));
  --stroke-ctrl-on-accent-focused: var(--color-highlight);
  --stroke-divider-default: light-dark(var(--color-darken-10), var(--color-lighten-10));
  --stroke-width-text-input-rest: 1px;
  --stroke-width-text-input-hover: 1px;
  --stroke-width-text-input-pressed: 1px;
  --stroke-width-text-input-focused: 2px;
  --stroke-width-divider: 1px;
  --padding-page-default: 56px;
  --padding-ctrl-horizontal-default: 24px;
  --padding-ctrl-vertical-default: 12px;
  --padding-ctrl-icon-only: 8px;
  --gap-between-heading-and-body: 16px;
  --gap-between-items-default: 32px;
  --gap-between-items-small: 16px;
  --gap-between-items-smaller: 8px;
  --max-content-width: 512px;
  --border-radius-ctrl-default: 999px;
  --size-header-height: 148px;

  /* Default font settings */
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--foreground-primary);
  text-wrap: pretty;

  scroll-timeline: --main-scroll;
}

html,
body {
  background-color: var(--background-neutral);
}

html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

/* Performance optimizations */
* {
  box-sizing: border-box;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

main {
  min-height: 60svh;
}

@keyframes home-hero-bg-parallax {
  from {
    transform: translateY(0%) scale(110%);
  }

  to {
    transform: translateY(25%) scale(100%);
  }
}

@keyframes home-about-bg-parallax {
  from {
    transform: translateY(-10%);
  }

  to {
    transform: translateY(10%);
  }
}

@media screen and (max-width: 768px) {
  :root {
    --padding-page-default: 32px;
    --gap-between-items-default: 24px;
    --size-header-height: 112px;
  }
}

@media screen and (orientation: portrait) and (max-width: 768px) {
  @keyframes home-hero-bg-parallax {
    from {
      transform: translateY(0%) scale(120%);
    }

    to {
      transform: translateY(75%) scale(100%);
    }
  }

  @keyframes home-about-bg-parallax {
    from {
      transform: translateY(-30%);
    }

    to {
      transform: translateY(50%);
    }
  }
}