/* Tasca tokens: generated from the Tasca design system's tokens.json. Dark is the default theme. */

:root {
  --font-display: Gloock, Georgia, serif;
  --font-sans: Karla, system-ui, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 44px;
  --radius-none: 0px;
  --radius-full: 9999px;
  --size-control: 38px;
  --size-badge: 32px;
  --size-hero: 280px;
  --size-hero-phone: 200px;
  --layout-split: 520px;
  --layout-max: 1120px;
  --layout-measure: 46ch;
}

:root,
:root[data-theme="dark"],
.ts-site[data-theme="dark"] {
  --surface: #1c201b;
  --surface-photo: #2b3128;
  --surface-hover: #262b24;
  --ink: #f1e9d8;
  --ink-muted: #b9b19f;
  --accent: #e3b04b;
  --accent-fill: #e3b04b;
  --on-accent-fill: #1c201b;
  --frame: #e3b04b;
  --rule: #3d4438;
  --focus-ring: 0 0 0 2px #1c201b, 0 0 0 4px #e3b04b;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --surface: #f5efe2;
    --surface-photo: #e7dfcc;
    --surface-hover: #ece4d3;
    --ink: #1f241e;
    --ink-muted: #5a5a4c;
    --accent: #845a0c;
    --accent-fill: #845a0c;
    --on-accent-fill: #ffffff;
    --frame: #9c701d;
    --rule: #d6ccb6;
    --focus-ring: 0 0 0 2px #f5efe2, 0 0 0 4px #845a0c;
    color-scheme: light;
  }
}

:root[data-theme="light"],
.ts-site[data-theme="light"] {
  --surface: #f5efe2;
  --surface-photo: #e7dfcc;
  --surface-hover: #ece4d3;
  --ink: #1f241e;
  --ink-muted: #5a5a4c;
  --accent: #845a0c;
  --accent-fill: #845a0c;
  --on-accent-fill: #ffffff;
  --frame: #9c701d;
  --rule: #d6ccb6;
  --focus-ring: 0 0 0 2px #f5efe2, 0 0 0 4px #845a0c;
  color-scheme: light;
}