/* ============================================
   ShellMinder Design Token System
   Generated: 2026-01-27
   Version: 1.0.0
   ============================================ */

:root {
  /* ============================================
     SPACING SYSTEM (8px base)
     ============================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  
  /* ============================================
     TYPOGRAPHY SYSTEM
     ============================================ */
  /* Font families */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  
  /* Type scale (1.25× ratio) */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.25rem;      /* 20px */
  --text-xl: 1.5rem;       /* 24px */
  --text-2xl: 1.875rem;    /* 30px */
  --text-3xl: 2.25rem;     /* 36px */
  --text-4xl: 3rem;        /* 48px */
  
  /* Line heights */
  --leading-tight: 1.25;
  --leading-base: 1.5;
  --leading-relaxed: 1.75;
  
  /* Font weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* ============================================
     COLOR SYSTEM
     ============================================ */
  /* Brand colors */
  --color-primary: #0d6efd;
  --color-primary-hover: #0b5ed7;
  --color-primary-active: #0a58ca;
  --color-primary-text: #ffffff;
  
  --color-secondary: #6c757d;
  --color-secondary-hover: #5c636a;
  --color-secondary-active: #565e64;
  
  /* Semantic colors */
  --success: #198754;
  --success-bg: #d1e7dd;
  --success-border: #badbcc;
  --success-text: #0f5132;
  
  --warning: #ffc107;
  --warning-bg: #fff3cd;
  --warning-border: #ffecb5;
  --warning-text: #664d03;
  
  --danger: #dc3545;
  --danger-bg: #f8d7da;
  --danger-border: #f5c2c7;
  --danger-text: #842029;
  
  --info: #0dcaf0;
  --info-bg: #cff4fc;
  --info-border: #b6effb;
  --info-text: #055160;
  
  /* Neutral scale */
  --surface-1: #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #e9ecef;
  --surface-4: #dee2e6;
  --surface-5: #adb5bd;
  
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-tertiary: #adb5bd;
  --text-inverse: #ffffff;
  
  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.125);
  --border-strong: rgba(0, 0, 0, 0.25);
  
  /* Terminal */
  --terminal-bg: #000000;
  --terminal-fg: #ffffff;
  --terminal-cursor: #ffffff;
  
  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm: 4px;
  --radius-base: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  
  /* ============================================
     SHADOWS (4-layer depth)
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
  
  /* ============================================
     MOTION SYSTEM
     ============================================ */
  /* Durations */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-moderate: 300ms;
  --duration-slow: 500ms;
  
  /* Easing */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.23, 0.88, 0.26, 0.92);
  
  /* ============================================
     LAYOUT DIMENSIONS
     ============================================ */
  --header-height: 56px;
  --sidebar-width: 280px;
  --content-max-width: 1440px;
  --task-panel-width: 20%;
  --task-panel-min-width: 300px;
  
  /* ============================================
     Z-INDEX SYSTEM
     ============================================ */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1010;
  --z-fixed: 1020;
  --z-modal-backdrop: 1030;
  --z-modal: 1040;
  --z-toast: 1050;
  --z-tooltip: 1060;
  
  /* ============================================
     BACKDROP EFFECTS
     ============================================ */
  --backdrop-blur: blur(8px);
  --backdrop-darken: rgba(0, 0, 0, 0.5);
  --backdrop-lighten: rgba(255, 255, 255, 0.9);

  /* ============================================
     NAVBAR
     ============================================ */
  --navbar-bg: #343a40;
  --navbar-text: #ffffff;

  /* ============================================
     SITE THEME (light defaults)
     ============================================ */
  --site-bg: var(--surface-2);
  --site-card-bg: var(--surface-1);
  --site-card-header-bg: var(--surface-2);
  --site-text: var(--text-primary);
  --site-text-muted: var(--text-secondary);
  --site-border: var(--border-default);
  --site-footer-bg: var(--surface-2);
  --site-input-bg: var(--surface-1);
  --site-table-hover: var(--surface-2);
  --site-dropdown-bg: var(--surface-1);
  --site-dropdown-hover: var(--surface-2);
}

/* ============================================
   DARK SITE THEME
   Only affects chrome (navbar, cards, footer, etc.)
   Terminal styles are NOT affected
   ============================================ */
[data-site-theme="dark"] {
  --surface-1: #1a1d21;
  --surface-2: #212529;
  --surface-3: #2c3034;
  --surface-4: #373b3f;
  --surface-5: #495057;

  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --text-tertiary: #6c757d;
  --text-inverse: #212529;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.125);
  --border-strong: rgba(255, 255, 255, 0.25);

  --site-bg: #1a1d21;
  --site-card-bg: #212529;
  --site-card-header-bg: #2c3034;
  --site-text: #e9ecef;
  --site-text-muted: #adb5bd;
  --site-border: rgba(255, 255, 255, 0.125);
  --site-footer-bg: #212529;
  --site-input-bg: #2c3034;
  --site-table-hover: #2c3034;
  --site-dropdown-bg: #2c3034;
  --site-dropdown-hover: #373b3f;

  --navbar-bg: #11141a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);

  /* Semantic colors adapted for dark backgrounds */
  --success-bg: #0d3320;
  --success-border: #146c3d;
  --success-text: #75d5a0;

  --warning-bg: #332b00;
  --warning-border: #665600;
  --warning-text: #ffe066;

  --danger-bg: #3b1015;
  --danger-border: #6e2028;
  --danger-text: #f5929e;

  --info-bg: #032830;
  --info-border: #065060;
  --info-text: #6edff6;

  --backdrop-darken: rgba(0, 0, 0, 0.7);
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   GLOBAL FOCUS STATES (WCAG AA Compliance)
   ============================================ */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  transition: outline-offset var(--duration-fast) var(--ease-out);
}

/* Remove default focus for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Button focus states */
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Form control focus states */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}