/* Design tokens for say.as. Component CSS uses these variables only. */

:root {
  color-scheme: light;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-display: Constantia, "Iowan Old Style", Palatino, "Palatino Linotype", serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-input: 17px;
  --text-lead: 18px;
  --text-lg: 20px;
  --text-hero: 30px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-tight: 6px;
  --radius-control: 12px;
  --radius-bubble: 18px;
  --radius-pill: 999px;
  --radius: var(--radius-control);

  --tap: 44px;
  --send: 44px;
  --column: 40rem;
  --gap-run: 3px;
  --gap-turn: 10px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --paper: #e6f1ea;
  --panel: #f7fbf8;
  --ink: #10241c;
  --ink-soft: #3c564b;
  --line: #c5d6cc;
  --own: #14362d;
  --own-ink: #f4fbf7;
  --theirs: #ffffff;
  --brass: #8a6424;
  --brass-ink: #fff8e8;
  --danger: #9c2c28;
  --danger-ink: #fff7f6;
  --shadow: 0 8px 20px color-mix(in srgb, var(--ink) 28%, transparent);

  --background: var(--paper);
  --foreground: var(--ink);
  --card: var(--panel);
  --card-foreground: var(--ink);
  --popover: var(--panel);
  --popover-foreground: var(--ink);
  --primary: var(--own);
  --primary-foreground: var(--own-ink);
  --secondary: var(--paper);
  --secondary-foreground: var(--ink);
  --muted: #d5e6dc;
  --muted-foreground: var(--ink-soft);
  --accent: #d5e6dc;
  --accent-foreground: var(--ink);
  --destructive: var(--danger);
  --border: var(--line);
  --input: var(--line);
  --ring: var(--own);
  --sidebar: var(--panel);
  --sidebar-foreground: var(--ink);
  --sidebar-primary: var(--own);
  --sidebar-primary-foreground: var(--own-ink);
  --sidebar-accent: var(--paper);
  --sidebar-accent-foreground: var(--ink);
  --sidebar-border: var(--line);
  --sidebar-ring: var(--own);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0d1713;
    --panel: #15211c;
    --ink: #e7f3ec;
    --ink-soft: #b7cbc1;
    --line: #2d443a;
    --own: #2f5e4e;
    --own-ink: #f4fbf7;
    --theirs: #1c2e27;
    --brass: #e2c27a;
    --brass-ink: #1c1508;
    --danger: #ffb4ab;
    --danger-ink: #3b0907;
    --muted: #24362f;
    --accent: #24362f;
  }
}

html.dark {
  color-scheme: dark;
  --paper: #0d1713;
  --panel: #15211c;
  --ink: #e7f3ec;
  --ink-soft: #b7cbc1;
  --line: #2d443a;
  --own: #2f5e4e;
  --own-ink: #f4fbf7;
  --theirs: #1c2e27;
  --brass: #e2c27a;
  --brass-ink: #1c1508;
  --danger: #ffb4ab;
  --danger-ink: #3b0907;
  --muted: #24362f;
  --accent: #24362f;
}