@layer app.tokens, app.shared;

:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;

  --space-0-35rem: 0.35rem;
  --space-0-4rem: 0.4rem;
  --space-0-5rem: 0.5rem;
  --space-0-75rem: 0.75rem;

  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-11: 11px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-999: 999px;

  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-11-5: 11.5px;
  --font-size-12: 12px;
  --font-size-12-5: 12.5px;
  --font-size-13: 13px;
  --font-size-13-5: 13.5px;
  --font-size-14: 14px;
  --font-size-14-5: 14.5px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-30: 30px;

  --font-size-0-875rem: 0.875rem;
  --font-size-1rem: 1rem;
}

/* Semantic defaults for pages which use the shared shell without a room palette.
   A room's :root palette always wins, including when its sheet loads first. */
:where(html) {
  --bg: #0e0a07;
  --surface: #1a120a;
  --ink: #f2e5c8;
  --border-accent: rgba(233, 189, 118, 0.22);
  --display: Georgia, serif;
}
@media (prefers-color-scheme: light) {
  :where(html) {
    --bg: #f5f0e6;
    --surface: #ffffff;
    --ink: #2a2015;
    --border-accent: rgba(140, 98, 33, 0.32);
  }
}