/* ============================================================================
   CSS CUSTOM PROPERTIES - Design Tokens
   ============================================================================ */

:root {
  /* Brand Colors */
  --bg-gray: rgb(82, 86, 89);
  --sidebar-gray: #d1d4d2;
  --black-bar: #2b2b2b;
  --paper-white: #ffffff;
  --text-dark: rgb(0, 0, 0);
  --text-gray: rgb(51, 51, 51);
  --accent-blue: #0066cc;
  --border-gray: #dddddd;

  /* Theme System - These get overridden by color-theme.css */
  /* Page Background */
  --page-bg: #b8bbbe;

  /* Paper/Card Backgrounds */
  --paper-bg: #ffffff;
  --paper-secondary-bg: #f5f5f5;

  /* Text Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #333333;
  --text-muted: #666666;
  --text-light: #999999;

  /* Action Bar & Navigation */
  --action-bar-bg: #2b2b2b;
  --action-bar-text: #ffffff;
  --action-bar-text-muted: rgba(255, 255, 255, 0.85);

  /* Borders & Dividers */
  --border-color: #333333;
  --border-light: #e0e0e0;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5);

  /* Interactive Elements */
  --button-bg: transparent;
  --button-bg-hover: rgba(0, 0, 0, 0.05);
  --button-bg-active: rgba(0, 0, 0, 0.1);

  /* Accent Colors */
  --accent-blue: #0066cc;
  --accent-green: #27ae60;

  /* Sidebar */
  --sidebar-bg: #d1d4d2;
}