/* Design System — Color Tokens
   Single source of truth for all color variables.
   Imported by style.css and linked directly on pages that
   don't use style.css. */

:root {
  /* Primary Colors */
  --color-black: #111827;
  --color-white: #ffffff;

  /* Grayscale — 8 stops, light → dark
     50  #fafafa  Lightest bg (hover, readonly, section alt)
     100 #f5f5f5  Panel bg (headers, tab hover, landing sections)
     200 #e5e7eb  Light borders (dashed separators, dividers)
     300 #dddddd  Borders (table lines, separators, badge borders)
     400 #cccccc  Medium borders (dots, disabled, scrollbar)
     600 #999999  Muted text (hints, labels, inactive tabs)
     800 #666666  Secondary text (descriptions, nav links)
     900 #333333  Dark accents (tooltips, primary button hover)
  */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #dddddd;
  --color-gray-400: #cccccc;
  --color-gray-600: #999999;
  --color-gray-800: #666666;
  --color-gray-900: #333333;

  /* Semantic Colors - Success (Green) */
  --color-success-50: #e8f5e9;
  --color-success-100: #a5d6a7;
  --color-success-600: #2e7d32;

  /* Semantic Colors - Error (Red) */
  --color-error-50: #ffebee;
  --color-error-100: #ef9a9a;
  --color-error-600: #c62828;
  --color-error-800: #8B0000;

  /* Semantic Colors - Info (Blue) */
  --color-info-50: #e3f2fd;
  --color-info-100: #90caf9;
  --color-info-600: #1565c0;

  /* Semantic Colors - Warning (Orange/Amber) */
  --color-warning-50: #fff3e0;
  --color-warning-100: #ffcc80;
  --color-warning-500: #d97706;
  --color-warning-600: #e65100;
  --color-warning-700: #856404;
  --color-warning-bg: #fff3cd;

  /* Semantic Colors - Accent (Teal/Green for actions) */
  --color-accent-500: #059669;
  --color-accent-600: #047857;

  /* Accent with alpha (for active/highlight backgrounds) */
  --color-accent-bg: rgba(5, 150, 105, 0.04);
  --color-accent-bg-strong: rgba(5, 150, 105, 0.12);

  /* Purple (for badges and categories) */
  --color-purple-50: #f3e8ff;
  --color-purple-100: #ddd6fe;
  --color-purple-600: #7c3aed;
}