:root {
  --color-papel: #F1EFE8;
  --color-tinta: #2C2C2A;
  --color-gris-ui: #888780;

  --color-azul-figma: #378ADD;
  --color-morado-ps: #7F77DD;
  --color-naranja-ai: #EF9F27;
  --color-rosa-id: #D4537E;

  --color-link: var(--color-azul-figma);
  --color-acento: var(--color-naranja-ai);

  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
  --font-sans: 'Inter', 'Geist', system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(2rem, 5vw, 3rem);
  --fs-h2: clamp(1.5rem, 4vw, 2rem);
  --fs-h3: clamp(1.15rem, 3vw, 1.5rem);
  --fs-body: 1rem;
  --fs-meta: 0.75rem;
  --fs-small: 0.875rem;

  --lh-body: 1.65;
  --lh-headings: 1.2;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --radius: 8px;
  --radius-lg: 12px;
  --border: 0.5px solid var(--color-gris-ui);
  --border-light: 0.5px solid color-mix(in srgb, var(--color-gris-ui) 40%, transparent);

  --max-width: 72rem;
  --content-width: 42rem;

  --transition: 200ms ease;
}

[data-theme="dark"] {
  --color-papel: #1A1A18;
  --color-tinta: #F1EFE8;
  --color-gris-ui: #6B6A65;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-papel: #1A1A18;
    --color-tinta: #F1EFE8;
    --color-gris-ui: #6B6A65;
  }
}