/* Fonts */

@font-face {
  font-family: "Pelago";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/private/fonts/pelago-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Pelago";
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  src: url("/assets/private/fonts/pelago-medium.woff2") format("woff2");
}

@font-face {
  font-family: "Pelago";
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: url("/assets/private/fonts/pelago-semibold.woff2") format("woff2");
}

/* Variables */

:root {
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --brand-base: #f2c11a;
  --brand-strong: #d8aa0c;
  --brand-subtle: #f8df89;
  --brand-accent: #1ab7f2;
  --brand-alternate: #3bb93b;
  --fg-primary: #050606;
  --fg-secondary: #536767;
  --fg-warning: #fbc611;
  --fg-error: #fb1146;
  --bg-base: #fafbfb;
  --bg-elevated: #fdfdfd;
  --bg-disabled: #e5e7eb;
  --bg-highlight: #89daf8;

  @media (color-gamut: p3) {
    @supports (color: oklch(0 0 0)) {
      --brand-base: oklch(0.8311 0.1757 89.56);
      --brand-strong: oklch(0.7587 0.1658 88.77);
      --brand-subtle: oklch(0.9058 0.1095 93.72);
      --brand-accent: oklch(0.7322 0.168 231.34);
      --fg-primary: oklch(0.1204 0.0025 196.82);
      --fg-secondary: oklch(0.4974 0.024 196.4);
      --fg-warning: oklch(0.8498 0.1714 88.75);
      --fg-error: oklch(0.6288 0.2475 19.65);
      --bg-base: oklch(0.9873 0.0011 197.14);
      --bg-elevated: oklch(0.994 0 0);
      --bg-disabled: oklch(0.9276 0.0058 264.53);
      --bg-highlight: oklch(0.847 0.0895 223.64);
    }
  }

  --phi: calc((sqrt(5) + 1) / 2);

  --size--6: calc(1rem * pow(var(--phi), -6));
  --size--5: calc(1rem * pow(var(--phi), -5));
  --size--4: calc(1rem * pow(var(--phi), -4));
  --size--3: calc(1rem * pow(var(--phi), -3));
  --size--2: calc(1rem * pow(var(--phi), -2));
  --size--1: calc(1rem * pow(var(--phi), -1));
  --size-0: 1rem;
  --size-1: calc(1rem * pow(var(--phi), 1));
  --size-2: calc(1rem * pow(var(--phi), 2));
  --size-3: calc(1rem * pow(var(--phi), 3));
  --size-4: calc(1rem * pow(var(--phi), 4));
  --size-5: calc(1rem * pow(var(--phi), 5));
  --size-6: calc(1rem * pow(var(--phi), 6));

  --max-width: 1024px;
  --nav-height: calc(100vh * pow(var(--phi), -5));
  --min-side-padding: calc(100vw * pow(var(--phi), -7));

  @media (min-width: 1024px) {
    --nav-height: calc(100vh * pow(var(--phi), -6));
    --min-side-padding: calc(100vw * pow(var(--phi), -6));
  }

  --border-radius-button: 22px;
  --border-radius-card: 12px;
  --border-radius-subcard: 8px;
  --border-radius-input: 8px;

  @media (max-width: 1023px) {
    --min-height-touch-target: 44px;
  }

  @media (min-width: 1024px) {
    --min-height-touch-target: 32px;
  }

  --min-width-touch-target: calc(2 * var(--min-height-touch-target));
}

/* Reset */

html,
body,
nav,
header,
main,
section,
footer,
div,
span,
a,
p,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
img,
em {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  box-sizing: border-box;
  font: inherit;
  font-size: 100%;
}

ol,
ul {
  list-style: none;
}

a {
  outline: none;
  text-decoration: none;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

/* Globals */

html {
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Pelago", "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  font-kerning: normal;
  word-spacing: normal;
  font-weight: var(--font-weight-regular);
  line-height: var(--phi);
  text-rendering: geometricPrecision;
  vertical-align: middle;
  text-wrap: pretty;
  white-space: wrap;
}

body {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-base);
  color: var(--fg-primary);
}