/* ============================================================================
   Design tokens — single source of truth for colors, spacing, breakpoints.
   Anything that should be reused across stylesheets should reference these.
   ============================================================================ */

:root {
  /* Brand colors (from legacy general.css usage) */
  --color-primary: #01526f;
  --color-primary-dark: #013d54;
  --color-primary-light: #0488b8;
  --color-accent: #f39c12;
  --color-danger: #e74c3c;
  --color-success: #27ae60;

  /* Neutrals */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f8fa;
  --color-bg-muted: #eef0f3;
  --color-border: #e1e4e8;
  --color-border-strong: #cfd3d8;
  --color-text: #1f2933;
  --color-text-muted: #5b6470;
  --color-text-on-primary: #ffffff;

  /* Spacing scale (8pt-ish) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 17px;

  /* Container */
  --container-max: 1600px;
  --container-padding: 16px;

  /* Header heights — used by sticky offsets */
  --header-height-mobile: 56px;
  --header-height-desktop: 90px;

  /* z-index scale */
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 900;
  --z-modal: 1000;
}

/* Larger gutters on bigger screens */
@media (min-width: 768px) {
  :root {
    --container-padding: 24px;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-padding: 35px;
  }
}