/* crewlogix_business_portal/lib/design-tokens.css */
/* Stitch "Architectural Professionalism" — from architectural_professionalism/DESIGN.md */
:root {
  /* Typography */
  --font-headline: 'Sora', sans-serif;
  --font-body: 'Geist', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Color — surfaces */
  --background: #F9F9FF;
  --surface: #FFFFFF;
  --surface-low: #F3F3FC;
  --surface-high: #E7E8F0;
  --surface-highest: #E1E2EB;

  /* Color — content */
  --on-surface: #191C22;
  --on-surface-variant: #424752;
  --outline: #E2E2E2;
  --outline-variant: #C2C6D5;

  /* Color — brand */
  --primary: #0059BB;
  --primary-hover: #0070EA;
  --primary-container: #0059BB;
  --on-primary: #FFFFFF;

  /* Semantic */
  --error: #BA1A1A;
  --error-container: #FFDAD6;
  --positive: #2E7D32;
  --positive-container: #C8E6C9;
  --amber: #ED6C02;
  --amber-container: #FFE8CC;

  /* Shape + depth */
  --radius: 8px;
  --radius-sm: 4px;
  --shadow-soft: 0px 4px 20px rgba(0, 0, 0, 0.05);
  --border: 1px solid var(--outline);

  /* Spacing */
  --unit: 4px;
  --gutter: 24px;
  --pad-mobile: 16px;
  --pad-desktop: 32px;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-headline); margin: 0; }
.font-mono { font-family: var(--font-mono); }