/*
 * GERADO — não editar à mão.
 *
 * Fonte: handbook/brand/theme.css
 * Regenerar: node handbook/brand/scripts/build-css-vars.mjs ../../site/assets/theme.css
 *
 * Uma alteração feita aqui desaparece na próxima geração, e entretanto faz a
 * identidade divergir do resto sem ninguém dar por isso. O sítio de mexer na
 * cor, na tipografia ou no raio é o theme.css.
 */

:root {
  --color-brand-100: oklch(0.970 0.015 248);
  --color-brand-200: oklch(0.930 0.035 248);
  --color-brand-300: oklch(0.870 0.060 248);
  --color-brand-400: oklch(0.780 0.070 248);
  --color-brand-500: oklch(0.680 0.074 248);
  --color-brand-600: oklch(0.580 0.070 248);
  --color-brand-700: oklch(0.480 0.062 248);
  --color-brand-800: oklch(0.380 0.050 248);
  --color-brand-900: oklch(0.290 0.035 248);
  --color-neutral-50: oklch(0.985 0.003 248);
  --color-neutral-100: oklch(0.970 0.004 248);
  --color-neutral-200: oklch(0.930 0.004 248);
  --color-neutral-300: oklch(0.870 0.004 248);
  --color-neutral-400: oklch(0.780 0.004 248);
  --color-neutral-500: oklch(0.680 0.005 248);
  --color-neutral-600: oklch(0.580 0.005 248);
  --color-neutral-700: oklch(0.480 0.005 248);
  --color-neutral-800: oklch(0.380 0.005 248);
  --color-neutral-900: oklch(0.290 0.005 248);
  --color-neutral-950: oklch(0.240 0.005 248);
  --color-danger-400: oklch(0.780 0.125 27);
  --color-danger-700: oklch(0.480 0.160 27);
  --color-warning-400: oklch(0.780 0.130 75);
  --color-warning-700: oklch(0.480 0.100 75);
  --color-success-400: oklch(0.780 0.130 150);
  --color-success-700: oklch(0.480 0.130 150);
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-weight-display: 600;
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.06em;
  --spacing: 0.25rem;
  --radius: 0.25rem;
  --radius-card: 1.25rem;
  --radius-pill: 9999px;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --color-chart-1: oklch(0.620 0.100 248);
  --color-chart-2: oklch(0.620 0.100 195);
  --color-chart-3: oklch(0.620 0.100 300);
  --color-chart-4: oklch(0.620 0.100 145);
  --color-chart-5: oklch(0.620 0.100 40);

  --background: var(--color-neutral-100);
  --foreground: var(--color-neutral-950);
  --card: var(--color-neutral-50);
  --card-foreground: var(--color-neutral-950);
  --popover: var(--color-neutral-50);
  --popover-foreground: var(--color-neutral-950);
  --primary: var(--color-brand-700);
  --primary-foreground: var(--color-neutral-50);
  --secondary: var(--color-neutral-200);
  --secondary-foreground: var(--color-neutral-950);
  --muted: var(--color-neutral-200);
  --muted-foreground: var(--color-neutral-700);
  --accent: var(--color-brand-100);
  --accent-foreground: var(--color-brand-800);
  --danger: var(--color-danger-700);
  --danger-foreground: var(--color-neutral-50);
  --warning: var(--color-warning-700);
  --warning-foreground: var(--color-neutral-50);
  --success: var(--color-success-700);
  --success-foreground: var(--color-neutral-50);
  --border: var(--color-neutral-300);
  --input: var(--color-neutral-600);
  --ring: var(--color-brand-700);
}

.dark {
  --background: var(--color-neutral-950);
  --foreground: var(--color-neutral-100);
  --card: var(--color-neutral-900);
  --card-foreground: var(--color-neutral-100);
  --popover: var(--color-neutral-900);
  --popover-foreground: var(--color-neutral-100);
  --primary: var(--color-brand-400);
  --primary-foreground: var(--color-neutral-950);
  --secondary: var(--color-neutral-800);
  --secondary-foreground: var(--color-neutral-100);
  --muted: var(--color-neutral-800);
  --muted-foreground: var(--color-neutral-400);
  --accent: var(--color-neutral-800);
  --accent-foreground: var(--color-brand-300);
  --danger: var(--color-danger-400);
  --danger-foreground: var(--color-neutral-950);
  --warning: var(--color-warning-400);
  --warning-foreground: var(--color-neutral-950);
  --success: var(--color-success-400);
  --success-foreground: var(--color-neutral-950);
  --border: var(--color-neutral-800);
  --input: var(--color-neutral-500);
  --ring: var(--color-brand-400);
}