:root {
  color-scheme: light;

  /* Superfícies */
  --color-bg: #f7f6f2;
  --color-surface: #f9f8f5;
  --color-surface-2: #fbfbf9;
  --color-surface-offset: #edeae5;
  --color-border: oklch(from #28251d l c h / 0.12);
  --color-hero-dots: oklch(from #28251d l c h / 0.38);
  --color-divider: #dcd9d5;

  /* Tipografia */
  --color-text: #28251d;
  --color-text-muted: #7a7974;
  --color-text-faint: #bab9b4;
  --color-text-inverse: #f9f8f4;
  --color-on-primary: #f9f8f4;

  /* Acento primário — teal escuro */
  --color-primary: #01696f;
  --color-primary-hover: #0c4e54;
  --color-primary-active: #0f3638;
  --color-primary-light: #cedcd8;

  /* Header / overlay */
  --color-header-bg: oklch(from #f7f6f2 l c h / 0.82);
  --color-header-border: oklch(from #28251d l c h / 0.08);

  /* Transições */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Sombras */
  --shadow-sm: 0 1px 3px oklch(0.2 0.01 80 / 0.07);
  --shadow-md: 0 4px 16px oklch(0.2 0.01 80 / 0.09);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.13);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Larguras */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;

  --site-header-height: 4rem;
}

[data-theme='dark'] {
  color-scheme: dark;

  --color-bg: #1c1b18;
  --color-surface: #23221e;
  --color-surface-2: #2a2824;
  --color-surface-offset: #2f2d28;
  --color-border: oklch(from #f9f8f4 l c h / 0.1);
  --color-hero-dots: oklch(from #eceae4 l c h / 0.2);
  --color-divider: #3d3a35;

  --color-text: #f2f1ec;
  --color-text-muted: #a8a69e;
  --color-text-faint: #6e6c66;
  --color-text-inverse: #1c1b18;
  --color-on-primary: #f9f8f4;

  --color-primary: #01696f;
  --color-primary-hover: #0c8f96;
  --color-primary-active: #0a6d73;
  --color-primary-light: #2d4546;

  --color-header-bg: oklch(from #1c1b18 l c h / 0.85);
  --color-header-border: oklch(from #f9f8f4 l c h / 0.08);

  --shadow-sm: 0 1px 3px oklch(0.05 0.01 80 / 0.4);
  --shadow-md: 0 4px 20px oklch(0.05 0.01 80 / 0.45);
  --shadow-lg: 0 12px 40px oklch(0.05 0.01 80 / 0.5);
}