/**
 * CSM Design Tokens – matches csm-ui look and feel.
 * Single source of truth for colors, spacing, typography, and shadows.
 * Use these variables across all CSM styles for consistency and easy theming.
 */

:root {
  /* Colors – primary & neutrals */
  --csm-color-text-primary: #1a1a1a;
  --csm-color-text-secondary: #666;
  --csm-color-text-muted: #6b7280;
  --csm-color-border: #ddd;
  --csm-color-border-light: #e5e7eb;
  --csm-color-bg-page: #f5f5f5;
  --csm-color-bg-card: #ffffff;
  --csm-color-bg-input: #ffffff;
  --csm-color-bg-hover: #f5f5f5;
  --csm-color-bg-subtle: #f9fafb;
  --csm-color-bg-row-alt: #fafafa;
  --csm-color-bg-row-alt-hover: #f5f5f5;
  --csm-color-bg-header: #f9fafb;
  --csm-color-bg-header-hover: #f3f4f6;
  --csm-color-bg-unit: #f5f5f5;
  --csm-color-overlay: rgba(0, 0, 0, 0.5);
  --csm-color-primary: #1a1a1a;

  /* Status colors */
  --csm-color-good: #10b981;
  --csm-color-good-bg: #d1fae5;
  --csm-color-good-text: #065f46;
  --csm-color-watch: #f59e0b;
  --csm-color-watch-bg: #fef3c7;
  --csm-color-watch-text: #92400e;
  --csm-color-flagged: #ef4444;
  --csm-color-flagged-bg: #fee2e2;
  --csm-color-flagged-text: #991b1b;

  /* Typography */
  --csm-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  --csm-font-size-xs: 12px;
  --csm-font-size-sm: 14px;
  --csm-font-size-base: 16px;
  --csm-font-size-lg: 20px;
  --csm-font-size-xl: 28px;
  --csm-font-size-2xl: 32px;
  --csm-font-weight-medium: 500;
  --csm-font-weight-semibold: 600;

  /* Spacing */
  --csm-space-1: 4px;
  --csm-space-2: 8px;
  --csm-space-3: 12px;
  --csm-space-4: 16px;
  --csm-space-5: 20px;
  --csm-space-6: 24px;
  --csm-radius-sm: 6px;
  --csm-radius-md: 8px;
  --csm-radius-lg: 12px;
  --csm-max-width-content: 1400px;

  /* Shadows */
  --csm-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
  --csm-shadow-modal: 0 10px 25px rgba(0, 0, 0, 0.2);
}