:root {
  --c-red: #bf3131;
  --c-red-dark: #a42727;
  --c-maroon: #7d0a0a;
  --c-maroon-dark: #5e0707;
  --c-wheat: #ead196;
  --c-wheat-soft: #f2e3be;
  --c-light: #eeeeee;
  --c-paper: #f7f7f5;
  --c-ink: #2a1a1a;
  --c-ink-soft: #5a4a45;
  --c-line: #2a1a1a;
  --c-green: #4e7a4a;
  --c-green-soft: #e4efe2;
  --c-white: #ffffff;

  --c-overlay: rgba(42, 26, 26, 0.55);
  --c-shadow: rgba(42, 26, 26, 0.18);
  --c-shadow-soft: rgba(42, 26, 26, 0.1);

  --font-display: "Fredoka", "Baloo Bhaijaan 2", system-ui, sans-serif;
  --font-display-ar: "Baloo Bhaijaan 2", "Fredoka", system-ui, sans-serif;
  --font-body: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body-ar: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-marker: "Caveat", "Baloo Bhaijaan 2", cursive;

  --fs-200: 0.75rem;
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.375rem;
  --fs-700: 1.75rem;
  --fs-800: 2.25rem;
  --fs-900: 3rem;

  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --r-wobble: 14px 20px 16px 22px;
  --r-wobble-alt: 20px 14px 22px 16px;

  --bw: 2.5px;
  --bw-thick: 3.5px;

  --shadow-sm: 0 2px 0 var(--c-shadow-soft);
  --shadow-md: 3px 4px 0 var(--c-shadow-soft);
  --shadow-lift: 4px 6px 0 var(--c-shadow);
  --shadow-polaroid: 2px 6px 14px var(--c-shadow);

  --container: 1180px;
  --container-narrow: 760px;
  --gutter: 16px;

  --header-h: 64px;

  --z-base: 1;
  --z-doodle: 0;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 300;
  --z-toast: 400;

  --ease: cubic-bezier(0.34, 1.26, 0.64, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
}

@media (min-width: 48rem) {
  :root {
    --gutter: 24px;
    --header-h: 72px;
    --fs-900: 3.5rem;
    --fs-800: 2.75rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --gutter: 32px;
    --fs-900: 4rem;
  }
}