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

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

@font-face {
  font-family: "Amiko";
  src: url("../assets/fonts/amiko-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-primary: "Amiko", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --clr-brand-50: oklch(0.98 0.03 45);
  --clr-brand-100: oklch(0.95 0.08 45);
  --clr-brand-200: oklch(0.9 0.12 45);
  --clr-brand-300: oklch(0.82 0.15 45);
  --clr-brand-400: oklch(0.72 0.18 45);
  --clr-brand-500: oklch(0.62 0.2 45);
  --clr-brand-600: oklch(0.52 0.18 45);
  --clr-brand-700: oklch(0.42 0.15 45);
  --clr-brand-800: oklch(0.32 0.12 45);
  --clr-brand-900: oklch(0.22 0.08 45);

  --clr-accent-50: oklch(0.96 0.04 190);
  --clr-accent-100: oklch(0.92 0.08 190);
  --clr-accent-200: oklch(0.85 0.14 190);
  --clr-accent-300: oklch(0.75 0.18 190);
  --clr-accent-400: oklch(0.65 0.2 190);
  --clr-accent-500: oklch(0.55 0.22 190);
  --clr-accent-600: oklch(0.45 0.2 190);
  --clr-accent-700: oklch(0.35 0.16 190);
  --clr-accent-800: oklch(0.28 0.12 190);
  --clr-accent-900: oklch(0.2 0.08 190);

  --clr-neutral-50: oklch(0.99 0 0);
  --clr-neutral-100: oklch(0.97 0 0);
  --clr-neutral-200: oklch(0.93 0 0);
  --clr-neutral-300: oklch(0.86 0 0);
  --clr-neutral-400: oklch(0.72 0 0);
  --clr-neutral-500: oklch(0.56 0 0);
  --clr-neutral-600: oklch(0.46 0 0);
  --clr-neutral-700: oklch(0.36 0 0);
  --clr-neutral-800: oklch(0.26 0 0);
  --clr-neutral-900: oklch(0.16 0 0);

  --clr-success: oklch(0.65 0.18 145);
  --clr-error: oklch(0.58 0.22 25);
  --clr-warning: oklch(0.75 0.18 75);

  --clr-bg: var(--clr-neutral-50);
  --clr-fg: var(--clr-neutral-900);
  --clr-muted: var(--clr-neutral-100);
  --clr-muted-fg: var(--clr-neutral-600);
  --clr-border: var(--clr-neutral-200);

  --clr-primary: var(--clr-brand-500);
  --clr-primary-hover: var(--clr-brand-600);
  --clr-primary-fg: var(--clr-neutral-50);

  --clr-secondary: var(--clr-accent-500);
  --clr-secondary-hover: var(--clr-accent-600);
  --clr-secondary-fg: var(--clr-neutral-50);

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
  --space-sm: clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
  --space-md: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem);
  --space-xl: clamp(2rem, 1.8rem + 1vw, 3rem);
  --space-2xl: clamp(3rem, 2.7rem + 1.5vw, 4.5rem);
  --space-3xl: clamp(4rem, 3.6rem + 2vw, 6rem);

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.13vw, 2.625rem);
  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 2.35rem + 2vw, 4rem);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1);

  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

  color-scheme: light;
}