/* Silencecast design tokens, direction B (Listener).
   Generated from work/scratch/B2/tokens.py; contrast ratios are in tokens.json.

   Plain CSS: the --sc-* custom properties below work in any page.
   Light is the default; dark follows prefers-color-scheme, and data-theme="light" or
   data-theme="dark" on any element forces a theme for that subtree.

   Tailwind 4: @import "tailwindcss"; then @import "./tokens.css"; the @theme inline block
   maps the tokens to utilities (bg-surface, text-text-muted, border-control-border,
   ring-focus, text-h2, rounded-md, p-4 ...). Browsers ignore @theme, so the file is safe
   to load directly too. The font itself is loaded separately (see brand/fonts/README.md). */

:root,
[data-theme="light"] {
  color-scheme: light;
  --sc-color-bg: #FAF7F2;
  --sc-color-surface: #FFFFFF;
  --sc-color-text: #24201C;
  --sc-color-text-muted: #665D53;
  --sc-color-border: #E4DDD2;
  --sc-color-control-border: #857A6E;
  --sc-color-primary: #24201C;
  --sc-color-primary-hover: #3A342D;
  --sc-color-on-primary: #FFFFFF;
  --sc-color-accent: #B8741A;
  --sc-color-link: #87510E;
  --sc-color-focus: #B8741A;
  --sc-color-live: #266842;
  --sc-color-live-tint: #EDF5EF;
  --sc-color-success: #266842;
  --sc-color-success-tint: #EDF5EF;
  --sc-color-warning: #87510E;
  --sc-color-warning-tint: #FAEFDD;
  --sc-color-info: #24201C;
  --sc-color-info-tint: #F2EDE5;
  --sc-color-alert: #B3261E;
  --sc-color-alert-hover: #8F1E18;
  --sc-color-on-alert: #FFFFFF;
  --sc-color-alert-tint: #FBEAE7;
  --sc-color-disabled-bg: #EEE9E1;
  --sc-color-disabled-text: #8F857A;
  --sc-color-pattern: #24201C;
  --sc-pattern-opacity: 0.11;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sc-color-bg: #1B1815;
    --sc-color-surface: #27231F;
    --sc-color-text: #F3EEE7;
    --sc-color-text-muted: #B3A899;
    --sc-color-border: #3A342D;
    --sc-color-control-border: #857A6E;
    --sc-color-primary: #F3EEE7;
    --sc-color-primary-hover: #FFFFFF;
    --sc-color-on-primary: #1B1815;
    --sc-color-accent: #E6AE5C;
    --sc-color-link: #EDBB72;
    --sc-color-focus: #E6AE5C;
    --sc-color-live: #5CC08A;
    --sc-color-live-tint: #1E2D24;
    --sc-color-success: #5CC08A;
    --sc-color-success-tint: #1E2D24;
    --sc-color-warning: #EDBB72;
    --sc-color-warning-tint: #33281A;
    --sc-color-info: #F3EEE7;
    --sc-color-info-tint: #2C2824;
    --sc-color-alert: #F28B82;
    --sc-color-alert-hover: #F5A49D;
    --sc-color-on-alert: #1B1815;
    --sc-color-alert-tint: #3A221F;
    --sc-color-disabled-bg: #2F2A25;
    --sc-color-disabled-text: #7A7064;
    --sc-color-pattern: #F3EEE7;
    --sc-pattern-opacity: 0.09;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --sc-color-bg: #1B1815;
  --sc-color-surface: #27231F;
  --sc-color-text: #F3EEE7;
  --sc-color-text-muted: #B3A899;
  --sc-color-border: #3A342D;
  --sc-color-control-border: #857A6E;
  --sc-color-primary: #F3EEE7;
  --sc-color-primary-hover: #FFFFFF;
  --sc-color-on-primary: #1B1815;
  --sc-color-accent: #E6AE5C;
  --sc-color-link: #EDBB72;
  --sc-color-focus: #E6AE5C;
  --sc-color-live: #5CC08A;
  --sc-color-live-tint: #1E2D24;
  --sc-color-success: #5CC08A;
  --sc-color-success-tint: #1E2D24;
  --sc-color-warning: #EDBB72;
  --sc-color-warning-tint: #33281A;
  --sc-color-info: #F3EEE7;
  --sc-color-info-tint: #2C2824;
  --sc-color-alert: #F28B82;
  --sc-color-alert-hover: #F5A49D;
  --sc-color-on-alert: #1B1815;
  --sc-color-alert-tint: #3A221F;
  --sc-color-disabled-bg: #2F2A25;
  --sc-color-disabled-text: #7A7064;
  --sc-color-pattern: #F3EEE7;
  --sc-pattern-opacity: 0.09;
}

:root {
  --sc-font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sc-text-display: 2.75rem;
  --sc-text-display-lh: 3.25rem;
  --sc-text-display-weight: 600;
  --sc-text-display-tracking: -0.01em;
  --sc-text-h1: 2rem;
  --sc-text-h1-lh: 2.5rem;
  --sc-text-h1-weight: 600;
  --sc-text-h1-tracking: -0.005em;
  --sc-text-h2: 1.5rem;
  --sc-text-h2-lh: 2rem;
  --sc-text-h2-weight: 600;
  --sc-text-h2-tracking: 0em;
  --sc-text-h3: 1.25rem;
  --sc-text-h3-lh: 1.75rem;
  --sc-text-h3-weight: 600;
  --sc-text-h3-tracking: 0em;
  --sc-text-lead: 1.125rem;
  --sc-text-lead-lh: 1.75rem;
  --sc-text-lead-weight: 400;
  --sc-text-lead-tracking: 0em;
  --sc-text-body: 1rem;
  --sc-text-body-lh: 1.5rem;
  --sc-text-body-weight: 400;
  --sc-text-body-tracking: 0em;
  --sc-text-label: 1rem;
  --sc-text-label-lh: 1.5rem;
  --sc-text-label-weight: 600;
  --sc-text-label-tracking: 0em;
  --sc-text-small: 0.875rem;
  --sc-text-small-lh: 1.25rem;
  --sc-text-small-weight: 400;
  --sc-text-small-tracking: 0em;
  --sc-radius-sm: 6px;
  --sc-radius-md: 10px;
  --sc-radius-lg: 16px;
  --sc-radius-full: 9999px;
  --sc-spacing: 0.25rem;
  --sc-space-0: 0rem;
  --sc-space-1: 0.25rem;
  --sc-space-2: 0.5rem;
  --sc-space-3: 0.75rem;
  --sc-space-4: 1rem;
  --sc-space-5: 1.25rem;
  --sc-space-6: 1.5rem;
  --sc-space-8: 2rem;
  --sc-space-10: 2.5rem;
  --sc-space-12: 3rem;
  --sc-space-16: 4rem;
  --sc-space-24: 6rem;
  --sc-control-height: 48px;
  --sc-control-height-sm: 40px;
  --sc-focus-width: 2px;
  --sc-focus-offset: 2px;
  --sc-icon: 24px;
  --sc-icon-sm: 20px;
}

@theme inline {
  --color-*: initial;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-bg: var(--sc-color-bg);
  --color-surface: var(--sc-color-surface);
  --color-text: var(--sc-color-text);
  --color-text-muted: var(--sc-color-text-muted);
  --color-border: var(--sc-color-border);
  --color-control-border: var(--sc-color-control-border);
  --color-primary: var(--sc-color-primary);
  --color-primary-hover: var(--sc-color-primary-hover);
  --color-on-primary: var(--sc-color-on-primary);
  --color-accent: var(--sc-color-accent);
  --color-link: var(--sc-color-link);
  --color-focus: var(--sc-color-focus);
  --color-live: var(--sc-color-live);
  --color-live-tint: var(--sc-color-live-tint);
  --color-success: var(--sc-color-success);
  --color-success-tint: var(--sc-color-success-tint);
  --color-warning: var(--sc-color-warning);
  --color-warning-tint: var(--sc-color-warning-tint);
  --color-info: var(--sc-color-info);
  --color-info-tint: var(--sc-color-info-tint);
  --color-alert: var(--sc-color-alert);
  --color-alert-hover: var(--sc-color-alert-hover);
  --color-on-alert: var(--sc-color-on-alert);
  --color-alert-tint: var(--sc-color-alert-tint);
  --color-disabled-bg: var(--sc-color-disabled-bg);
  --color-disabled-text: var(--sc-color-disabled-text);
  --color-pattern: var(--sc-color-pattern);
  --font-*: initial;
  --font-sans: var(--sc-font-sans);
  --text-*: initial;
  --text-display: var(--sc-text-display);
  --text-display--line-height: var(--sc-text-display-lh);
  --text-display--font-weight: var(--sc-text-display-weight);
  --text-display--letter-spacing: var(--sc-text-display-tracking);
  --text-h1: var(--sc-text-h1);
  --text-h1--line-height: var(--sc-text-h1-lh);
  --text-h1--font-weight: var(--sc-text-h1-weight);
  --text-h1--letter-spacing: var(--sc-text-h1-tracking);
  --text-h2: var(--sc-text-h2);
  --text-h2--line-height: var(--sc-text-h2-lh);
  --text-h2--font-weight: var(--sc-text-h2-weight);
  --text-h2--letter-spacing: var(--sc-text-h2-tracking);
  --text-h3: var(--sc-text-h3);
  --text-h3--line-height: var(--sc-text-h3-lh);
  --text-h3--font-weight: var(--sc-text-h3-weight);
  --text-h3--letter-spacing: var(--sc-text-h3-tracking);
  --text-lead: var(--sc-text-lead);
  --text-lead--line-height: var(--sc-text-lead-lh);
  --text-lead--font-weight: var(--sc-text-lead-weight);
  --text-lead--letter-spacing: var(--sc-text-lead-tracking);
  --text-body: var(--sc-text-body);
  --text-body--line-height: var(--sc-text-body-lh);
  --text-body--font-weight: var(--sc-text-body-weight);
  --text-body--letter-spacing: var(--sc-text-body-tracking);
  --text-label: var(--sc-text-label);
  --text-label--line-height: var(--sc-text-label-lh);
  --text-label--font-weight: var(--sc-text-label-weight);
  --text-label--letter-spacing: var(--sc-text-label-tracking);
  --text-small: var(--sc-text-small);
  --text-small--line-height: var(--sc-text-small-lh);
  --text-small--font-weight: var(--sc-text-small-weight);
  --text-small--letter-spacing: var(--sc-text-small-tracking);
  --radius-*: initial;
  --radius-sm: var(--sc-radius-sm);
  --radius-md: var(--sc-radius-md);
  --radius-lg: var(--sc-radius-lg);
  --radius-full: var(--sc-radius-full);
  --spacing: var(--sc-spacing);
}