/* Tokens Clayservice: tema claro em :root; escuro pelo sistema ou por data-theme="dark" */
:root {
  --azul-clay: #0152A3;
  --azul-gelo: #08A1DB;
  --grafite: #1F1F1F;
  --nevoa: #F1F1F1;
  --cinza-200: #DBDBDB;
  --cinza-300: #C1C1C1;
  --cinza-500: #878E94;
  --cinza-700: #575D63;
  --surface: #F1F1F1;
  --surface-sunken: #DBDBDB;
  --ink: #1F1F1F;
  --ink-muted: #575D63;
  --brand: #0152A3;
  --on-brand: #F1F1F1;
  --accent: #08A1DB;
  --on-accent: #1F1F1F;
  --link: #0152A3;
  --line: #C1C1C1;
  --line-strong: #575D63;
  --focus: #0152A3;
  --font-display: 500 48px/52px "Iosevka Charon Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-h1: 500 36px/42px "Iosevka Charon Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-h2: 500 28px/34px "Iosevka Charon Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-h3: 500 20px/26px "Iosevka Charon Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-label: 500 13px/16px "Iosevka Charon Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body-lg: 400 18px/28px "Noto Serif", Georgia, "Times New Roman", serif;
  --font-body: 400 16px/26px "Noto Serif", Georgia, "Times New Roman", serif;
  --font-small: 400 14px/22px "Noto Serif", Georgia, "Times New Roman", serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1F1F1F;
    --surface-sunken: #000000;
    --ink: #F1F1F1;
    --ink-muted: #C1C1C1;
    --brand: #0152A3;
    --on-brand: #F1F1F1;
    --accent: #08A1DB;
    --on-accent: #1F1F1F;
    --link: #08A1DB;
    --line: #878E94;
    --line-strong: #878E94;
    --focus: #08A1DB;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #1F1F1F;
  --surface-sunken: #000000;
  --ink: #F1F1F1;
  --ink-muted: #C1C1C1;
  --brand: #0152A3;
  --on-brand: #F1F1F1;
  --accent: #08A1DB;
  --on-accent: #1F1F1F;
  --link: #08A1DB;
  --line: #878E94;
  --line-strong: #878E94;
  --focus: #08A1DB;
  color-scheme: dark;
}