@import url("./reset.css") layer(reset);
@import url("./animations.css") layer(utils);
@import url("./typography.css") layer(typography);
@import url("./base.css") layer(base);
@import url("./components/main.css") layer(components);
@import url("./components/single-column.css") layer(components);
@import url("./components/button.css") layer(components);

@property --channel {
  syntax: "*";
  inherits: false;
  initial-value: calc(
    (((r * 0.299) + (g * 0.587) + (b * 0.114)) - 128) * -1000
  );
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  color-scheme: light dark;
  --primary-50: oklch(0.975 0.0148 158.25);
  --primary-100: oklch(0.9379 0.0356 154.35);
  --primary-200: oklch(0.8783 0.063 156.29);
  --primary-300: oklch(0.8188 0.0852 158.2);
  --primary-400: oklch(0.6969 0.1224 156.7);
  --primary-500: oklch(0.607 0.1243 156.71);
  --primary-600: oklch(0.5162 0.1085 157.07);
  --primary-700: oklch(0.4402 0.0881 158.62);
  --primary-800: oklch(0.3801 0.073 159.12);
  --primary-900: oklch(0.3346 0.0603 160.63);
  --primary-950: oklch(0.2361 0.0387 163.06);
  --primary: var(--primary-300);
  --success: var(--primary-700);
  --secondary-50: oklch(0.9835 0.0171 84.59);
  --secondary-100: oklch(0.9637 0.0416 87.36);
  --secondary-200: oklch(0.9214 0.0789 82.83);
  --secondary-300: oklch(0.8659 0.1249 78.94);
  --secondary-400: oklch(0.8006 0.1556 68.74);
  --secondary-500: oklch(0.7502 0.1736 59.12);
  --secondary-600: oklch(0.6859 0.1778 50.5);
  --secondary-700: oklch(0.5857 0.16 46.53);
  --secondary-800: oklch(0.4938 0.1324 45.03);
  --secondary-900: oklch(0.4301 0.1084 46.78);
  --secondary-950: oklch(0.2795 0.0706 44.95);
  --secondary: var(--secondary-300);
  --warning: var(--secondary-600);
  --tertiary-50: oklch(0.9719 0.0108 17.34);
  --tertiary-100: oklch(0.9383 0.0264 17.63);
  --tertiary-200: oklch(0.888 0.0522 18.18);
  --tertiary-300: oklch(0.812 0.0911 19.23);
  --tertiary-400: oklch(0.7046 0.1509 21.66);
  --tertiary-500: oklch(0.6318 0.1852 24.1);
  --tertiary-600: oklch(0.5663 0.1966 26.18);
  --tertiary-700: oklch(0.4948 0.1735 26.33);
  --tertiary-800: oklch(0.4363 0.146 25.66);
  --tertiary-900: oklch(0.3921 0.1197 24.53);
  --tertiary-950: oklch(0.2544 0.0789 24.71);
  --tertiary: var(--tertiary-400);
  --error: var(--tertiary-700);
  --accent-50: oklch(0.9658 0.0161 262.75);
  --accent-100: oklch(0.922857 0.036858 263.6237);
  --accent-200: oklch(0.8665 0.0654 262.06);
  --accent-300: oklch(0.784078 0.109864 259.1762);
  --accent-400: oklch(0.6798 0.169 260.91);
  --accent-500: oklch(0.5963 0.2191 263.82);
  --accent-600: oklch(0.5139 0.2536 264.82);
  --accent-700: oklch(0.4599 0.2521 265.36);
  --accent-800: oklch(0.4001 0.21 266.56);
  --accent-900: oklch(0.3577 0.1611 267.38);
  --accent-950: oklch(0.2674 0.1032 270.2);
  --accent: var(--accent-500);
  --info: var(--accent-700);
  --outline: light-dark(oklch(0.567 0.014 149.099), oklch(0.653 0.016 148.672));
  --shadow: light-dark(oklch(0 0 0), oklch(1 0 0));
  --surface-1: light-dark(oklch(0.98 0 0), oklch(0.18 0.0343 260));
  --surface-2: light-dark(oklch(0.97 0 0), oklch(0.2 0.0343 260));
  --surface-3: light-dark(oklch(0.94 0 0), oklch(0.23 0.0343 260));
  --surface-4: light-dark(oklch(0.92 0 0), oklch(0.26 0.0343 250));
  --surface-5: light-dark(oklch(0.9 0 0), oklch(0.28 0.0343 250));
  --inverse-surface: light-dark(oklch(0.23 0.0343 260), oklch(0.96 0 0));
  --border-color: color-mix(in oklab, var(--importance-high) 20%, transparent);
  --on-surface: light-dark(oklch(0.12 0.01 260), oklch(0.98 0 0));
  --primary-gradient: linear-gradient(
    140deg,
    oklch(0.224 0.005 308.232) 0%,
    oklch(0.327 0.012 164.183) 32%,
    oklch(0.422 0.026 158.735) 57%,
    oklch(0.521 0.039 157.653) 75%,
    oklch(0.617 0.055 156.61) 84%,
    oklch(0.718 0.069 156.427) 90%,
    oklch(0.816 0.082 156.288) 100%
  );
  --background: var(--surface-3);
  --contrast-color: rgb(
    from var(--background) var(--channel) var(--channel) var(--channel)
  );
  --shadow-color: hsl(0 0% 3);
  --elevate1:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --elevate2:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
  --elevate3:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);

  &[data-theme="dark"] {
    color-scheme: dark;
    --l-0: 100%;
    --l-10: 90%;
    --l-30: 70%;
    --l-40: 60%;
    --l-90: 10%;
    --l-100: 0%;
    --l-input: 60%;
  }

  &[data-theme="light"] {
    color-scheme: light;
    --l-0: 0%;
    --l-10: 10%;
    --l-30: 30%;
    --l-40: 40%;
    --l-50: 50%;
    --l-90: 90%;
    --l-100: 100%;
    --l-input: 30%;
  }
}

@layer tokens {
  :root {
    --top: env(safe-area-inset-top);
    --bottom: env(safe-area-inset-bottom);
    --left: env(safe-area-inset-left);
    --right: env(safe-area-inset-right);

    @media (prefers-color-scheme: dark) {
      color-scheme: dark;
    }

    @media (prefers-color-scheme: light) or (prefers-color-scheme: no-preference) {
      color-scheme: light;
    }

    --spacing-xxs: calc(1rem * 0.25);
    --spacing-xs: calc(1rem * 0.5);
    --spacing-sm: calc(1rem * 0.75);
    --spacing: 1rem;
    --spacing-md: calc(1rem * 1.25);
    --spacing-lg: calc(1rem * 1.5);
    --spacing-xl: calc(1rem * 2);
    --spacing-xxl: calc(1rem * 3);
    --spacing-section: calc(1rem * 5);
  }
}

.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & svg {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 40%;
  }
}

nav.top {
  justify-content: flex-start;

  & > svg {
    inline-size: 8rem;
    block-size: auto;
  }
}