/* css/core/variables.css - Structural Constants & Default Colors */
/* v2.1 - Theme classes moved to themes.css for safer editing */
/* ARCHITECTURE: This file contains structural constants (never change) and default colors */
/* IMPORTANT: For theme customization, edit css/core/themes.css instead! */

/* ============================================================================
   STRUCTURAL CONSTANTS - Never change per theme
   ============================================================================ */

:root {
  /* ===== SPACING & LAYOUT ===== */
  --padding-widget: 10px;
  --padding-widget-small: 6px;
  --sidebar-width-collapsed: 60px;
  --sidebar-width-expanded: 200px;
  --grid-gap: 10px;
  --border-radius: 8px;
  --border-radius-small: 4px;

  /* ===== TYPOGRAPHY ===== */
  --font-size-base: 16px;
  --font-size-large: 18px;
  --font-size-small: 14px;
  --font-size-heading: 24px;
  --font-size-widget-title: 24px;
  --font-size-widget-subtitle: 12px;

  /* ===== OUTLINE WIDTHS & OFFSETS ===== */
  --outline-width-selected: 10px;
  --outline-width-focused: 3px;
  --outline-width-selected-legacy: 2px;
  --outline-offset: 0px;
  --outline-offset-widget: 0px;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ===== Z-INDEX STACK ===== */
  --z-sidebar: 10;
  --z-widget-selected: 100;
  --z-focus-overlay: 150;
  --z-widget-focused: 200;
  --z-sidebar-expanded: 300;
  --z-modal: 999;
  --z-sleep: 1000;
  --z-voice-overlay: 10000;
  --z-modal-over-voice: 10500;
  --z-modal-confirmation: 15000;

  /* ===== UNIVERSAL COLORS (never themed) ===== */
  --bg-sleep: #000; /* Sleep screen is always black */
}

/* ============================================================================
   THEMEABLE COLORS - Default (Dark Theme)
   These are the baseline colors that get overridden by theme classes
   ============================================================================ */

:root {
  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: #222;
  --bg-secondary: #333;
  --bg-tertiary: #444;
  --bg-modal-backdrop: rgba(0, 0, 0, 0.7);
  --bg-button: #666;
  --bg-active: rgba(255, 255, 255, 0.2);
  --bg-primary-semi-transparent: rgba(34, 34, 34, 0.9);
  --bg-selected-fill: rgba(168, 176, 184, 0.2);

  /* Derived backgrounds (reference other bg colors) */
  --bg-widget-iframe: var(--bg-secondary);
  --bg-fallback-widget: var(--bg-tertiary);

  /* ===== TEXT COLORS ===== */
  --text-primary: #fff;
  --text-secondary: #ccc;
  --text-muted: #999;

  /* ===== ACCENT COLORS ===== */
  --accent-primary: #00aaff;    /* Primary interactive color (focus, buttons, links) */
  --accent-secondary: #ffaa00;  /* Secondary accent (branding, highlights, voice UI) */
  --accent-selection: #a8b0b8;  /* Selection states */
  --accent-current-time: #ea4335; /* Current time indicator */

  /* ===== SEMANTIC COLORS ===== */
  --color-error: #ff6b6b;
  --color-success: #51cf66;
  --color-warning: #ffd43b;

  /* ===== INTERACTIVE STATES (colors only) ===== */
  --outline-color-nav: #a8b0b8;
  --outline-selected: var(--accent-selection);
  --outline-focused: var(--accent-primary);

  /* ===== DASHBOARD-SPECIFIC ===== */
  --grid-gap-color: #333;

  /* ===== GLOW EFFECTS (Enhanced Focus Mode) ===== */
  --glow-selected: 0 0 20px rgba(168, 176, 184, 0.6), 0 0 45px rgba(168, 176, 184, 0.3);
  --glow-focused: 0 0 25px rgba(0, 170, 255, 0.9), 0 0 55px rgba(0, 170, 255, 0.5);

  /* ===== WIDGET BORDER GRADIENTS ===== */
  --widget-border-gradient-active: linear-gradient(to right, #00aaff 0%, rgba(0, 170, 255, 0.3) 50%, #00aaff 100%);

  /* ===== THEME-SPECIFIC ASSETS (Default - Dark Theme) ===== */
  --sidebar-logo-src: url('/artwork/Dashie_Full_Logo_White_Transparent.png');
  --sidebar-icon-filter: invert(100%); /* White icons for dark theme */
}

/* ============================================================================
   THEME CLASS OVERRIDES
   ============================================================================
   Theme-specific color overrides are now in css/core/themes.css
   This keeps structural constants safe from accidental modification
   ============================================================================ */