/* The Syns Workspace design system (sites/FORMAT.md § 3): every line of the first :root mirrors DESIGN.md. */
:root {
  --color-primary: #0a5cff;
  --color-primary-2: #3d7bff;
  --color-fill: #0a5cff;
  --color-on-fill: #ffffff;
  --color-primary-wash: #e8efff;
  --color-on-primary-wash: #0a3fb8;
  --color-select: #d6e4ff;
  --color-on-select: #00329b;
  --color-focus: #0a5cff;
  --color-glow: rgba(10, 92, 255, 0.28);
  --color-paper: #ffffff;
  --color-canvas: #f8f9fc;
  --color-surface: #f2f4f9;
  --color-surface-high: #e9edf4;
  --color-surface-highest: #dfe4ed;
  --color-ink: #0b0d12;
  --color-ink-2: #3c4250;
  --color-muted: #5c6577;
  --color-outline: #747b89;
  --color-line: #e3e7ee;
  --color-divider: #d5dae3;
  --color-inverse: #16191f;
  --color-on-inverse: #f2f4f9;
  --color-inverse-accent: #7fb0ff;
  --color-good: #15a367;
  --color-good-wash: #e3f6ec;
  --color-on-good-wash: #0b6b43;
  --color-error: #d93025;
  --color-error-wash: #fce8e6;
  --color-mark-black: #08090a;
  --color-mark-green: #00c853;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-display: 3.375rem;
  --font-weight-display: 600;
  --leading-display: 1.185;
  --tracking-display: -0.03em;
  --font-headline: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-headline: 2.75rem;
  --font-weight-headline: 500;
  --leading-headline: 1.227;
  --tracking-headline: -0.025em;
  --font-title-l: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-title-l: 1.5rem;
  --font-weight-title-l: 500;
  --leading-title-l: 1.333;
  --tracking-title-l: -0.015em;
  --font-title: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-title: 1.375rem;
  --font-weight-title: 400;
  --leading-title: 1.273;
  --tracking-title: -0.01em;
  --font-title-s: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-title-s: 1rem;
  --font-weight-title-s: 500;
  --leading-title-s: 1.5;
  --tracking-title-s: -0.005em;
  --font-lead: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-lead: 1.125rem;
  --font-weight-lead: 400;
  --leading-lead: 1.556;
  --tracking-lead: 0em;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-body: 1rem;
  --font-weight-body: 400;
  --leading-body: 1.5;
  --tracking-body: 0em;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-ui: 0.875rem;
  --font-weight-ui: 400;
  --leading-ui: 1.429;
  --tracking-ui: 0em;
  --font-label: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-label: 0.875rem;
  --font-weight-label: 500;
  --leading-label: 1.429;
  --tracking-label: 0em;
  --font-label-s: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-label-s: 0.75rem;
  --font-weight-label-s: 500;
  --leading-label-s: 1.333;
  --tracking-label-s: 0.005em;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-mono: 0.875rem;
  --font-weight-mono: 400;
  --leading-mono: 1.429;
  --tracking-mono: 0em;
  --radius-pill: 9999px;
  --radius-landmark: 16px;
  --radius-fab: 16px;
  --radius-card: 12px;
  --radius-chip: 8px;
  --radius-dialog: 8px;
  --radius-menu: 4px;
  --radius-field: 4px;
  --radius-thumb: 4px;
  --spacing-unit: 4px;
  --spacing-gutter: 24px;
  --spacing-section: 80px;
  --spacing-section-l: 120px;
  --spacing-page: 1200px;
  --spacing-page-wide: 1440px;
  --spacing-topbar: 64px;
  --spacing-nav: 256px;
  --spacing-row: 48px;
  --spacing-control: 40px;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.4, 0.1, 0.5, 1.4);
  --duration-s: 150ms;
  --duration-m: 300ms;
  --duration-laser: 6s;
  --state-hover: 0.08;
  --state-pressed: 0.12;
  --state-dragged: 0.16;
  --shadow-1: 0 1px 2px 0 rgba(16, 24, 40, 0.3), 0 1px 3px 1px rgba(16, 24, 40, 0.15);
  --shadow-2: 0 1px 2px 0 rgba(16, 24, 40, 0.3), 0 2px 6px 2px rgba(16, 24, 40, 0.15);
  --shadow-3: 0 1px 3px 0 rgba(16, 24, 40, 0.3), 0 4px 8px 3px rgba(16, 24, 40, 0.15);
  --shadow-fab: 0 1px 3px 0 rgba(16, 24, 40, 0.24), 0 4px 8px 3px rgba(16, 24, 40, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #3d7bff;
    --color-primary-2: #7fb0ff;
    --color-fill: #7fb0ff;
    --color-on-fill: #001a4d;
    --color-primary-wash: #0f1d3d;
    --color-on-primary-wash: #c9daff;
    --color-select: #14336f;
    --color-on-select: #d6e4ff;
    --color-focus: #7fb0ff;
    --color-glow: rgba(61, 123, 255, 0.38);
    --color-paper: #06080d;
    --color-canvas: #0c0f16;
    --color-surface: #131721;
    --color-surface-high: #1a1f2b;
    --color-surface-highest: #232a38;
    --color-ink: #eef0f6;
    --color-ink-2: #c0c7d4;
    --color-muted: #97a1b5;
    --color-outline: #6c7588;
    --color-line: #1d2331;
    --color-divider: #262d3c;
    --color-inverse: #e6e9f0;
    --color-on-inverse: #16191f;
    --color-inverse-accent: #0047d6;
    --color-good: #4cd58a;
    --color-good-wash: #0f2a1c;
    --color-on-good-wash: #9ff0c4;
    --color-error: #f2b8b5;
    --color-error-wash: #3b1412;
    --color-mark-black: #f7f8f8;
    --color-mark-green: #2bff88;
    --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.6), 0 1px 3px 1px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 1px 2px 0 rgba(0, 0, 0, 0.6), 0 2px 6px 2px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 4px 8px 3px rgba(0, 0, 0, 0.35);
    --shadow-fab: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 4px 8px 3px rgba(0, 0, 0, 0.3);
  }
}

/* The front page's own names, mapped onto the roles above so the film and the feature demos follow the
   brand: the short names the page's CSS already used, and abg … aline for the app inside the film. */
:root {
  --bg: var(--color-paper);
  --fg: var(--color-ink);
  --mute: var(--color-muted);
  --line: var(--color-line);
  --soft: var(--color-surface);
  --acc: var(--color-primary);
  --acc2: var(--color-primary-2);
  --glow: var(--color-glow);
  --accsoft: var(--color-primary-wash);
  --good: var(--color-good);
  --goodsoft: var(--color-good-wash);
  --abg: var(--color-canvas);
  --abar: var(--color-canvas);
  --acard: var(--color-paper);
  --afg: var(--color-ink);
  --amute: var(--color-muted);
  --aline: var(--color-line);
  --r: var(--radius-landmark);
  --maxw: var(--spacing-page);
  --sy: 0;
}