/* 
 * Root Variables
 */

:root {
  --color-white-true: #fff;
  --color-white: #f8fafc;
  --color-black-true: #000;
  --color-black: #020617;
  --color-primary: #16a34a;
  --color-primary-dark: #166534;
  --color-primary-light: #4ade80;
  --color-secondary: #2563eb;
  --color-secondary-dark: #1e40af;
  --color-secondary-light: #60a5fa;
  --color-gray-1: #f1f5f9;
  --color-gray-2: #cbd5e1;
  --color-gray-3: #94a3b8;
  --color-gray-4: #334155;
  --color-gray-5: #0f172a;

  --font-size-base: clamp(1rem, 0.4886rem + 1.7045vw, 1.375rem);
  --font-size-xxs: max(0.625rem, 50%);
  --font-size-xs: max(0.75rem, 67.5%);
  --font-size-sm: max(0.875rem, 82.5%);
  --font-size-md: 100%;
  --font-size-lg: 125%;
  --font-size-xl: 144%;
  --font-size-2xl: 158%;
  --font-size-3xl: 175%;
  --font-size-4xl: 195%;
  --font-size-5xl: 300%;

  --line-height: 1.5;
  --line-height-tight: 1.1;
  --letter-spacing-tight: -0.02em;
  --letter-spacing: -0.01em;

  --space-xxs: clamp(0.1875rem, 0.1vw, 0.25rem);
  --space-xs: clamp(0.375rem, 0.2vw, 0.5rem);
  --space-sm: clamp(0.75rem, 0.4vw, 1rem);
  --space-md: clamp(1rem, 0.8vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2vw, 2rem);
  --space-xl: clamp(2rem, 2vw, 3rem);
  --space-2xl: clamp(3rem, 2.8vw, 4.5rem);
  --space-3xl: clamp(3.5rem, 4vw, 6rem);
  --space-4xl: clamp(4.5rem, 4.8vw, 7.5rem);
  --space-5xl: clamp(5.5rem, 6.4vw, 9.5rem);

  --wide-width: 1200px;
  --narrow-width: 720px;

  --root-padding: clamp(0.75rem, 1.2vw, 1.5rem);

  --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

@media (min-width: 832px) {
  :root {
    --font-size-lg: 120%;
    --font-size-xl: 150%;
    --font-size-2xl: 170%;
    --font-size-3xl: 220%;
    --font-size-4xl: 290%;
    --font-size-5xl: 350%;
  }
}