/* Design tokens — SSIT Solutions
   Breakpoint convention (applied per-page via @media, CSS has no native
   media-query custom properties): desktop >1024px, tablet <=1024px,
   mobile <=768px, small mobile <=480px (only where a page needs it). */
:root {
  /* brand */
  --color-primary: #02457a;
  --color-primary-dark: #013058;
  --color-primary-light: #0a5c9e;

  /* text / surfaces */
  --color-ink: #111b21;
  --color-ink-muted: #4a5b68;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f8fc;
  --color-surface-tint: #eef4fb;
  --color-border: #dbe4ee;
  --color-accent-gold: #f4a30a;

  /* product accents */
  --accent-busy: #c0392b;
  --accent-tally: #003399;
  --accent-kaizen: #0e6db5;
  --accent-utho: #0d7d63;
  --accent-tsplus: #6a4c93;

  /* layout */
  --content: 1024px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(2, 25, 45, .06);
  --shadow-md: 0 4px 16px rgba(2, 25, 45, .08);
  --shadow-lg: 0 12px 32px rgba(2, 25, 45, .12);

  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* motion */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* legacy aliases (kept so existing per-page CSS referencing these still works) */
  --blue: var(--color-primary);
  --white: var(--color-surface);
}