/* Change the primitive palette here; every app and Cotton UI component follows. */
:root {
  color-scheme: light;
  --primitive-white: #ffffff;
  --primitive-paper: var(--basis-brand-background, #ffffff);
  --primitive-ink: var(--basis-brand-text, #111827);
  --primitive-muted: var(--basis-brand-muted, #374151);
  --primitive-line: var(--basis-brand-border, #e5e7eb);
  --primitive-blue-600: var(--basis-brand-primary, #0400ff);
  --primitive-blue-800: var(--basis-brand-hover, #0300cc);
  --primitive-blue-50: #eef2ff;
  --primitive-orange: #a64c17;
  --primitive-red: #b42332;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-28: 7rem;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.25rem;
  --font-xl: clamp(1.65rem, 3vw, 2.25rem);
  --font-hero: clamp(2rem, 4vw, 3.25rem);
  --radius-sm: 0.5rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.25rem;
  --shadow-soft: 0 4px 18px #11182708;
  --focus-width: 3px;
  --focus-gap: 3px;
  --motion-fast: 140ms;
  --app-bg: var(--primitive-paper);
  --surface: var(--basis-brand-surface, #ffffff);
  --text: var(--primitive-ink);
  --muted: var(--primitive-muted);
  --border: var(--primitive-line);
  --control-border: #64748b;
  --focus: var(--accent);
  --accent: var(--primitive-blue-600);
  --accent-strong: var(--primitive-blue-800);
  --accent-soft: var(--primitive-blue-50);
  --danger: var(--primitive-red);
  --warning: var(--primitive-orange);
  --warning-fill: #ffd0a0;
  --on-accent: var(--primitive-white);
  --brand-logo-width: 5.5rem;
  --brand-logo-width-compact: 3.5rem;
  --hero-background: var(--primitive-blue-800);
  --hero-foreground: var(--primitive-white);
  --hero-action-accent: var(--primitive-white);
  --hero-action-content: var(--primitive-blue-50);
  --hero-action-foreground: var(--primitive-blue-600);
  --nav-width: 15rem;
  --content-width: 76rem;
  --control-height: 2.8rem;
  /* Installed Cotton 0.3.4 / Tailwind v4 public theme properties. */
  --font-sans: var(--font-body);
  --default-font-family: var(--font-body);
  --text-xs: var(--font-xs);
  --text-sm: var(--font-sm);
  --text-base: var(--font-md);
  --text-lg: var(--font-lg);
  --text-xl: var(--font-xl);
  --spacing: var(--space-1);
  --default-transition-duration: var(--motion-fast);
  --color-accent: var(--accent);
  --color-accent-content: var(--accent-strong);
  --color-accent-foreground: var(--on-accent);
  --color-accent-muted: var(--accent);
  --color-muted: var(--muted);
  --color-surface: var(--surface);
  --color-background: var(--app-bg);
  --color-bg: var(--app-bg);
  --color-input-bg: var(--surface);
  --color-card-border: var(--border);
  --color-box-border: var(--border);
  --shadow-box: var(--shadow-soft);
  --shadow-input: none;
  --radius-box: var(--radius-lg);
  --radius-button: var(--radius-sm);
  --radius-control: var(--radius-sm);
  --focus-ring-width: var(--focus-width);
  --focus-ring-offset: var(--focus-gap);
  --focus-ring-color: var(--focus);
  --focus-ring-offset-color: var(--surface);
  --color-red-500: var(--danger);
  --color-red-600: var(--danger);
  --color-amber-500: var(--warning);
  --color-ink-50: #f8fafc;
  --color-ink-100: #f1f5f9;
  --color-ink-200: #e2e8f0;
  --color-ink-300: #cbd5e1;
  --color-ink-400: #94a3b8;
  --color-ink-500: #64748b;
  --color-ink-600: #475569;
  --color-ink-700: #334155;
  --color-ink-800: #1e293b;
  --color-ink-900: #0f172a;
}
:root.dark {
  color-scheme: dark;
  --app-bg: #0f172a;
  --surface: #1e293b;
  --text: #f8fafc;
  --muted: #cbd5e1;
  --border: #475569;
  --control-border: #94a3b8;
  --accent: #a5b4fc;
  --accent-strong: #c7d2fe;
  --accent-soft: #1e1b4b;
  --on-accent: #0f172a;
  --danger: #ffb0b7;
  --warning: var(--warning-fill);
  --shadow-soft: 0 4px 18px #0002;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
  }
}