@layer reset, base, components, modules, utilities;

:root {
  /* Typography */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-display: 3.5rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;

  /* Layout */
  --max-width: 72rem;
  --gutter: var(--space-lg);
}

/* Dark mode removido por enquanto — light only */

:root {
  --xf-paper: oklch(95.3% 0.016 86);
  --xf-surface: oklch(99.4% 0.008 91);
  --xf-ink: oklch(21.6% 0.038 276);
  --xf-ink-soft: oklch(34.3% 0.039 276);
  --xf-ink-hover: oklch(38% 0.062 277);
  --xf-ink-muted: oklch(42.4% 0.028 277);
  --xf-line-muted: oklch(54.1% 0.024 277);
  --xf-amber: oklch(85.3% 0.163 85);
  --xf-green: oklch(50.09% 0.1115 157.8);
  --xf-green-soft: oklch(92.2% 0.046 157);
  --xf-red-soft: oklch(91.1% 0.04 35);

  --xf-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --xf-font-body: "IBM Plex Sans", system-ui, sans-serif;
  --xf-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --xf-border: 2.5px solid var(--xf-ink);
  --xf-border-thin: 2px solid var(--xf-ink);

  --xf-radius-sm: 0.5rem;
  --xf-radius-md: 0.625rem;
  --xf-radius-lg: 0.75rem;
  --xf-radius-pill: 999px;

  --xf-depth-sm: 3px;
  --xf-depth-md: 5px;
  --xf-depth-lg: 7px;
  --xf-depth-xl: 10px;
  --xf-shadow-sm: var(--xf-depth-sm) var(--xf-depth-sm) 0 var(--xf-ink);
  --xf-shadow-md: var(--xf-depth-md) var(--xf-depth-md) 0 var(--xf-ink);
  --xf-shadow-lg: var(--xf-depth-lg) var(--xf-depth-lg) 0 var(--xf-ink);
  --xf-shadow-xl: var(--xf-depth-xl) var(--xf-depth-xl) 0 var(--xf-ink);

  --xf-focus-ring: 3px solid var(--xf-ink);
  --xf-focus-offset: 3px;
}