/* ============================================================================
   CABOZ THEME - Centralized CSS Variables
   ============================================================================
   Single source of truth for all visual theming. 
   These CSS variables replace the Python theme.py configuration.
   Leverages Mantine's CSS variable system for consistency.
   
   Import order:
   1. theme.css      (this file - define all variables)
   2. base.css       (global typography, fonts, resets)
   3. components.css (sidebar, cards, custom components)
   4. pages.css      (page-specific layouts)
*/

:root {
  /* ──────────────────────────────────────────────────────
     DESIGN TOKENS - Core colors, spacing, sizing
     ────────────────────────────────────────────────────── */

  /* COLOR PALETTE - Green primary brand */
  --color-primary: #2e7d32;
  --color-primary-light: #e8f5e8;
  --color-primary-lighter: #d0ebd0;
  --color-primary-lighter-2: #a8d3a8;
  --color-primary-light-3: #7fb97f;
  --color-primary-shade: #5aa45a;
  --color-primary-dark: #236b26;
  --color-primary-darker: #1a5e1f;
  --color-primary-darkest: #0f4b12;

  /* SEMANTIC COLORS */
  --color-error-custom: #d32f2f;
  --color-warning: #f57c00;
  --color-success: #388e3c;
  --color-info: #1976d2;

  /* NEUTRAL GRAYS - Used throughout UI */
  --color-gray-0: #ffffff;
  --color-gray-1: #f8f9fa;
  --color-gray-2: #f1f3f5;
  --color-gray-3: #e9ecef;
  --color-gray-4: #dee2e6;
  --color-gray-5: #adb5bd;
  --color-gray-6: #868e96;
  --color-gray-7: #495057;
  --color-gray-8: #343a40;
  --color-gray-9: #212529;

  /* BACKGROUND & SURFACE COLORS */
  --bg-header: #fafafa;
  --bg-page: #f4f4f5;
  --bg-sidebar: #f9f7f2;
  --bg-paper: #ffffff;
  --bg-home: transparent;

  /* TEXT COLORS */
  --text-primary: #212529;
  --text-dimmed: #868e96;

  /* ──────────────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────────────── */

  /* Font families - Inter optimized for digital interfaces */
  --font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  --font-family-heading: var(--font-family);

  /* Font sizes - Semantic scale (rem units for access) */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;

  /* Line heights - Optimized for readability */
  --line-height-xs: 1.4;
  --line-height-sm: 1.45;
  --line-height-md: 1.55;
  --line-height-lg: 1.6;
  --line-height-xl: 1.65;

  /* ──────────────────────────────────────────────────────
     SPACING & SIZING
     ────────────────────────────────────────────────────── */

  /* Header dimensions */
  --header-height: 56px;
  --header-border-color: #e9ecef;

  /* Sidebar dimensions & spacing */
  --sidebar-width-collapsed: 42px;
  --sidebar-width-expanded: 270px;
  --sidebar-border-color: #e9ecef;
  --sidebar-text-color: #343a40;
  --sidebar-active-bg: #e7f5ff;
  --sidebar-active-color: #228be6;
  --sidebar-hover-bg: #f1f3f5;

  /* Breakpoints for responsive design */
  --breakpoint-xs: 0;
  --breakpoint-sm: 36em;   /* 576px */
  --breakpoint-md: 48em;   /* 768px */
  --breakpoint-lg: 62em;   /* 992px */
  --breakpoint-custom-mobile: 480px;
  --breakpoint-sidebar-hide: 990px;

  /* ──────────────────────────────────────────────────────
     BORDERS & SHADOWS
     ────────────────────────────────────────────────────── */

  /* Border radius - Consistent rounded corners */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows - Layered depth system */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* ──────────────────────────────────────────────────────
     COMPONENT DEFAULTS
     ────────────────────────────────────────────────────── */

  /* Paper (card) defaults */
  --paper-padding: 1rem;
  --paper-radius: var(--radius-md);
  --paper-shadow: var(--shadow-xs);
  --paper-border: 1px solid var(--color-gray-3);

  /* Button defaults */
  --button-font-weight: 500;
  --button-radius: var(--radius-sm);

  /* Table defaults */
  --table-vertical-spacing: 0.5rem;
  --table-horizontal-spacing: 1rem;

  /* ──────────────────────────────────────────────────────
     EXPLORER PAGE
     ────────────────────────────────────────────────────── */

  /* Chrome (header + filters + footer gaps) */
  --explorer-chrome: 250px;
  --explorer-panel-height: calc(100vh - var(--explorer-chrome));

  /* Map info card */
  --map-info-bg: rgba(255, 255, 255, 0.9);
  --map-info-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  --map-info-border: 1px solid rgba(0, 0, 0, 0.1);

  /* Filter buttons layout */
  --explorer-filter-width: 250px;
  --explorer-filter-gap: 8px;
  --explorer-filter-columns: 4;

  /* ──────────────────────────────────────────────────────
     ANIMATIONS & TRANSITIONS
     ────────────────────────────────────────────────────── */

  --transition-fast: 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-base: 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================================
   DARK MODE SUPPORT (if needed in future)
   ============================================================================ */

/* Uncomment and customize when dark mode is implemented:
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #e0e0e0;
    --bg-page: #1a1a1a;
    --bg-paper: #2a2a2a;
  }
}
*/

/* ============================================================================
   PRINT MEDIA - Ensure contrast when printing
   ============================================================================ */

@media print {
  /* Ensure readability in print */
  * {
    background: white !important;
    color: black !important;
  }
}