/* ubuntu-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/ubuntu-v21-latin-300.woff2') format('woff2');
}

/* ubuntu-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-v21-latin-regular.woff2') format('woff2');
}

/* ubuntu-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ubuntu-v21-latin-500.woff2') format('woff2');
}

/* ubuntu-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ubuntu-v21-latin-700.woff2') format('woff2');
}

:root {
  /* colors (hsl fallback) */
  --color-bg: hsl(211.17 47% 98%);
  --color-bg-light: hsl(211.01 100% 100%);
  --color-text: hsl(228.76 100% 0%);
  --color-text-muted: hsl(211.13 3% 28%);
  --color-text-invert: hsl(211.17 47% 98%);
  --color-text-light: hsl(211.17 47% 98%);

  --color-primary: hsl(19.03 90% 51%);
  --color-secondary: hsl(260.94 41% 41%);

  --color-bg: oklch(0.98 0.005 250);
  --color-bg-light: oklch(1 0.005 250);
  --color-text: oklch(0.01 0.005 250);
  --color-text-muted: oklch(0.4 0.005 250);
  --color-text-invert: oklch(0.98 0.005 250);
  --color-text-light: oklch(0.98 0.005 250);

  --color-primary: oklch(0.6601 0.2007 40.03);
  --color-secondary: oklch(0.4422 0.1361 296.52);

  /* box shadow */
  --box-shadow-1: 0 0.25rem 0.5rem 0 oklch(0.85 0.005 250 / 0.2);
  --box-shadow-2: 0 0.375rem 0.5rem -0.125rem oklch(0.8 0.005 250 / 0.22),
    0 0.75rem 1rem -0.125rem oklch(0.8 0.005 250 / 0.12);
  --box-shadow-3: 0 0.75rem 1rem -0.25rem oklch(0.75 0.005 250 / 0.23),
    0 1.25rem 1.75rem -0.25rem oklch(0.75 0.005 250 / 0.18);

  /* typography */
  --font-family-heading: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-family-body: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --type-scale: 1;
  --text-heading-1: 700 calc(2.488rem * var(--type-scale)) / 1.2 var(--font-family-heading);
  --text-heading-2: 700 calc(2.074rem * var(--type-scale)) / 1.2 var(--font-family-heading);
  --text-heading-3: 600 calc(1.728rem * var(--type-scale)) / 1.2 var(--font-family-heading);
  --text-heading-4: 600 calc(1.44rem * var(--type-scale)) / 1.2 var(--font-family-heading);

  --text-button: 600 1rem/1.2 var(--font-family-body);
  --text-body: 400 1rem/1.5 var(--font-family-body);
  --text-small: 400 0.833rem/1.6 var(--font-family-body);
  --text-small-spacing: 0.008em;

  /* space */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.75rem; /* 28px */
  --space-7: 2.5rem; /* 40px */
  --space-8: 3.75rem; /* 60px */
  --space-9: 6.25rem; /* 100px */
  --space-10: 10rem; /* 160px */
  --space-11: 15rem; /* 240px */

  /* border radius */
  --border-radius-1: 0.25rem;
  --border-radius-2: 0.5rem;
  --border-radius-3: 1rem;
  --border-radius-4: 1.5rem;
  --border-radius-5: 2rem;

  /* transition */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* 1. Quick feedback (hover, color changes, focus rings) */
  --transition-fast: all 150ms var(--ease);
  /* 2. Default UI motions (buttons, dropdowns, accordions) */
  --transition-medium: all 300ms var(--ease);
  /* 3. Overlays & complex components (modals, sidebars, toasts) */
  --transition-slow: all 500ms var(--ease);
}

@media (min-width: 48em) {
  :root {
    --type-scale: 1.2;
  }
}

@media (min-width: 64em) {
  :root {
    --type-scale: 1.44;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

:root[data-theme='dark'] {
  --color-bg: hsl(211.05 12% 6%);
  --color-bg-light: hsl(211.07 9% 9%);
  --color-text: hsl(211.17 47% 98%);
  --color-text-muted: hsl(211.15 2% 56%);
  --color-text-invert: hsl(228.76 100% 0%);
  --color-text-light: hsl(211.17 47% 98%);

  --color-primary: hsl(14.22 100% 39%);
  --color-secondary: hsl(264.52 62% 27%);

  --color-bg: oklch(0.17 0.005 250);
  --color-bg-light: oklch(0.2 0.005 250);
  --color-text: oklch(0.98 0.005 250);
  --color-text-muted: oklch(0.65 0.005 250);
  --color-text-invert: oklch(0.01 0.005 250);
  --color-text-light: oklch(0.98 0.005 250);

  --color-primary: oklch(calc(0.6601 - 0.12) 0.2007 40.03); /* l - 0.1-15 */
  --color-secondary: oklch(calc(0.4422 - 0.12) 0.1361 296.52); /* l - 0.1-15 */

  --box-shadow-1: 0 0.25rem 0.5rem 0 oklch(0.15 0.005 250 / 0.5);
  --box-shadow-2: 0 0.375rem 0.5rem -0.125rem oklch(0.1 0.005 250 / 0.5),
    0 0.75rem 1rem -0.125rem oklch(0.13 0.005 250 / 0.38);
  --box-shadow-3: 0 0.75rem 1rem -0.25rem oklch(0.06 0.005 250 / 0.54),
    0 1.25rem 1.75rem -0.25rem oklch(0.04 0.005 250 / 0.4);
}

html {
  font-size: 1.0625rem;
  font-size: clamp(1rem, 0.9464rem + 0.242vw, 1.125rem);
  /* 375px => 16px, 768px => 17px, ~1181px => 18px */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: var(--font-family-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
}

h1 {
  font: var(--text-heading-1);
}

h2 {
  font: var(--text-heading-2);
}

h3 {
  font: var(--text-heading-3);
}

h4 {
  font: var(--text-heading-4);
}

button {
  font: var(--text-button);
}

p {
  font: var(--text-body);
  text-wrap: pretty;
}

small {
  font: var(--text-small);
  letter-spacing: var(--text-small-spacing);
}

img,
svg {
  display: block;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

input,
button,
textarea,
select {
  font: inherit;
}

input,
textarea,
select {
  appearance: none;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--border-radius-1);
  background-color: var(--color-bg-light);
  color: var(--color-text);
  transition: var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  outline: none;
}

button {
  appearance: none;
  border: none;
  user-select: none;
  -webkit-user-select: none;
  font: var(--text-button);
  background: none;
  cursor: pointer;
  color: inherit;
  padding: var(--space-3) var(--space-6);
  border-radius: 0.5rem;
  transition: var(--transition-fast);
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-primary, Highlight);
  outline-offset: 2px;
  border-radius: var(--border-radius-1);
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}