:root {
  --na-text-font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --na-text-font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  --na-text-size-xs: 0.6875rem;
  --na-text-size-sm: 0.8125rem;
  --na-text-size-md: 0.9375rem;
  --na-text-size-lg: 1.0625rem;
  --na-text-size-xl: 1.25rem;
  --na-text-size-2xl: 1.5rem;
  --na-text-size-3xl: 1.875rem;

  --na-heading-size-h1: 2.25rem;
  --na-heading-size-h2: 1.875rem;
  --na-heading-size-h3: 1.5rem;
  --na-heading-size-h4: 1.25rem;
  --na-heading-size-h5: 1.0625rem;
  --na-heading-size-h6: 0.9375rem;

  --na-text-weight-thin: 100;
  --na-text-weight-extralight: 200;
  --na-text-weight-light: 300;
  --na-text-weight-regular: 400;
  --na-text-weight-medium: 500;
  --na-text-weight-semibold: 600;
  --na-text-weight-bold: 700;
  --na-text-weight-extrabold: 800;
  --na-text-weight-black: 900;

  --na-color-default: #6b7280;
  --na-color-primary: #3b82f6;
  --na-color-secondary: #6366f1;
  --na-color-success: #22c55e;
  --na-color-warning: #f59e0b;
  --na-color-danger: #ef4444;
  --na-color-info: #0ea5e9;
  --na-color-brand: #8b5cf6;
  --na-color-accent: #14b8a6;

  --na-color-white: #ffffff;
  --na-color-black: #000000;
  --na-color-disabled: #d1d5db;

  --na-body-color: var(--na-color-black);
  --na-body-background: var(--na-color-white);

  --na-breakpoint-xs: 480px;
  --na-breakpoint-sm: 640px;
  --na-breakpoint-md: 768px;
  --na-breakpoint-lg: 1024px;
  --na-breakpoint-xl: 1280px;
  --na-breakpoint-2xl: 1536px;
  --na-breakpoint-3xl: 1920px;

  --na-container-xs: 480px;
  --na-container-sm: 640px;
  --na-container-md: 768px;
  --na-container-lg: 1024px;
  --na-container-xl: 1280px;
  --na-container-2xl: 1536px;
  --na-container-3xl: 1920px;
}

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

* {
  margin: 0;
  padding: 0;
  min-width: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  hanging-punctuation: first last;
}

body {
  font-family: var(--na-text-font-sans);
  color: var(--na-body-color);
  background-color: var(--na-body-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p,
li,
figcaption {
  text-wrap: pretty;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

textarea {
  resize: vertical;
  resize: block;
}

:target {
  scroll-margin-block: 5ex;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

a {
  color: inherit;
  text-decoration-skip-ink: auto;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}