/**
 * Kanbanditto Theme System - Base Variables
 * 
 * This file defines all CSS custom properties used throughout the application.
 * These are the default (dark theme) values. Other themes override these via
 * [data-theme="theme-name"] selectors.
 * 
 * Naming Convention: --kb-{category}-{element}-{variant}
 * 
 * Categories:
 *   bg      - Backgrounds
 *   text    - Text colors
 *   border  - Borders
 *   accent  - Brand/action colors
 *   surface - Glass/overlay surfaces
 *   shadow  - Box shadows
 *   radius  - Border radii
 *   ease    - Transition easings
 */

:root {
  /* ========================================================================
   * BACKGROUNDS
   * ======================================================================== */
  
  /* Page/app backgrounds - darkest to lightest */
  --kb-bg-deep: #09090b;
  --kb-bg-page: #111114;
  --kb-bg-secondary: #18181b;
  --kb-bg-tertiary: #1f1f23;
  --kb-bg-elevated: #27272a;
  
  /* Component-specific backgrounds */
  --kb-bg-input: #141417;
  --kb-bg-card: #232326;
  --kb-bg-card-hover: #2a2a2e;
  --kb-bg-column: rgba(24, 24, 27, 0.75);
  --kb-bg-column-hover: rgba(24, 24, 27, 0.85);
  --kb-bg-dropdown: #303033;
  --kb-bg-modal: #18181b;
  --kb-bg-header: rgba(15, 15, 20, 0.8);
  
  /* ========================================================================
   * TEXT COLORS
   * ======================================================================== */
  
  --kb-text-primary: #e4e4e7;
  --kb-text-secondary: #a1a1aa;
  --kb-text-tertiary: #71717a;
  --kb-text-muted: #52525b;
  --kb-text-inverse: #09090b;
  
  /* ========================================================================
   * BORDERS
   * ======================================================================== */
  
  --kb-border-subtle: rgba(255, 255, 255, 0.06);
  --kb-border-default: rgba(255, 255, 255, 0.1);
  --kb-border-hover: rgba(255, 255, 255, 0.15);
  --kb-border-strong: rgba(255, 255, 255, 0.2);
  
  /* ========================================================================
   * ACCENT COLORS
   * ======================================================================== */
  
  /* Primary accent (indigo) */
  --kb-accent-primary: #818cf8;
  --kb-accent-primary-hover: #6366f1;
  --kb-accent-primary-soft: rgba(129, 140, 248, 0.12);
  --kb-accent-primary-glow: rgba(129, 140, 248, 0.25);
  
  /* Secondary accent (purple) */
  --kb-accent-secondary: #a78bfa;
  --kb-accent-tertiary: #c4b5fd;
  
  /* Semantic colors */
  --kb-accent-success: #34d399;
  --kb-accent-success-soft: rgba(52, 211, 153, 0.12);
  --kb-accent-warning: #fbbf24;
  --kb-accent-warning-soft: rgba(251, 191, 36, 0.12);
  --kb-accent-danger: #f87171;
  --kb-accent-danger-hover: #ef4444;
  --kb-accent-danger-soft: rgba(248, 113, 113, 0.12);
  
  /* ========================================================================
   * SURFACES (Glass/Overlays)
   * ======================================================================== */
  
  --kb-surface-glass: rgba(255, 255, 255, 0.04);
  --kb-surface-glass-hover: rgba(255, 255, 255, 0.07);
  --kb-surface-overlay: rgba(0, 0, 0, 0.75);
  --kb-surface-scrim: rgba(0, 0, 0, 0.5);
  
  /* ========================================================================
   * SHADOWS
   * ======================================================================== */
  
  --kb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --kb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --kb-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --kb-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);
  
  /* Component shadows */
  --kb-shadow-card: 
    0 2px 4px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1);
  --kb-shadow-card-hover: 
    0 6px 16px rgba(0, 0, 0, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.12);
  --kb-shadow-column: 
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --kb-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.3);
  --kb-shadow-modal: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 24px 64px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  
  /* ========================================================================
   * BORDER RADII
   * ======================================================================== */
  
  --kb-radius-xs: 4px;
  --kb-radius-sm: 8px;
  --kb-radius-md: 12px;
  --kb-radius-lg: 16px;
  --kb-radius-xl: 20px;
  --kb-radius-full: 9999px;
  
  /* ========================================================================
   * TRANSITIONS & EASINGS
   * ======================================================================== */
  
  --kb-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --kb-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --kb-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  --kb-transition-fast: 0.1s ease;
  --kb-transition-normal: 0.15s ease;
  --kb-transition-slow: 0.2s ease;
  
  /* ========================================================================
   * COMPONENT-SPECIFIC TOKENS
   * ======================================================================== */
  
  /* Skeleton loading */
  --kb-skeleton-base: var(--kb-bg-input);
  --kb-skeleton-shine: var(--kb-bg-tertiary);
  
  /* Focus ring */
  --kb-focus-ring: 0 0 0 3px var(--kb-accent-primary-glow);
  
  /* Scrollbar */
  --kb-scrollbar-thumb: var(--kb-border-default);
  --kb-scrollbar-thumb-hover: var(--kb-border-hover);
  --kb-scrollbar-track: transparent;
}