/**
 * PIMAura Theme System - Design Tokens
 * =====================================
 * Single source of truth for all colors, spacing, typography, and visual properties.
 * Change values here to update the entire application.
 * 
 * Usage: var(--token-name)
 * Example: background: var(--color-primary);
 */

:root {
  /* ==========================================
     BRAND COLORS
     ========================================== */
  --color-brand-blue: #686e73;
  --color-brand-blue-hover: #2d3748;
  --color-brand-blue-light: rgba(74, 85, 104, 0.1);
  
  --color-brand-yellow: #FFB200;
  --color-brand-yellow-hover: #E6A000;
  --color-brand-yellow-light: rgba(255, 178, 0, 0.1);

  /* ==========================================
     PRIMARY COLORS (Actions, CTAs)
     ========================================== */
  --color-primary: #1a1a1a;
  --color-primary-hover: #333333;
  --color-primary-active: #0d0d0d;
  
  /* ==========================================
     SEMANTIC COLORS (Status, Feedback)
     ========================================== */
  --color-success: #10B981;
  --color-success-hover: #059669;
  --color-success-light: #dcfce7;
  --color-success-border: #bbf7d0;
  --color-success-text: #166534;
  
  --color-error: #EF4444;
  --color-error-hover: #DC2626;
  --color-error-light: #fee2e2;
  --color-error-border: #fecaca;
  --color-error-text: #991b1b;
  
  --color-warning: #F59E0B;
  --color-warning-hover: #D97706;
  --color-warning-light: #fef3c7;
  --color-warning-border: #fde68a;
  --color-warning-text: #92400e;
  
  --color-info: #3B82F6;
  --color-info-hover: #2563EB;
  --color-info-light: #dbeafe;
  --color-info-border: #bfdbfe;
  --color-info-text: #1e40af;

  /* ==========================================
     NEUTRAL COLORS (Text, Backgrounds, Borders)
     ========================================== */
  /* Text */
  --color-text-primary: #24292e;
  --color-text-secondary: #586069;
  --color-text-tertiary: #6a737d;
  --color-text-muted: #959da5;
  --color-text-placeholder: #a0aec0;
  --color-text-inverse: #ffffff;
  
  /* Backgrounds */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #fafbfc;
  --color-bg-tertiary: #f6f8fa;
  --color-bg-page: #f5f7fa;
  --color-bg-hover: #f1f5f9;
  --color-bg-active: #e2e8f0;
  
  /* Borders */
  --color-border-primary: #e1e4e8;
  --color-border-secondary: #d1d5da;
  --color-border-tertiary: #eaecef;
  --color-border-focus: var(--color-brand-blue);

  /* ==========================================
     STATUS BADGE COLORS
     ========================================== */
  --color-status-draft: #6B7280;
  --color-status-sent: #3B82F6;
  --color-status-accepted: #10B981;
  --color-status-declined: #EF4444;
  --color-status-expired: #F59E0B;
  --color-status-active: #10B981;
  --color-status-inactive: #6B7280;

  /* ==========================================
     SPACING SCALE
     ========================================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  /* Font Families */
  --font-family-base: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  
  /* Font Sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-base: 1.4;
  --line-height-relaxed: 1.6;

  /* ==========================================
     BORDER RADIUS
     ========================================== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ==========================================
     SHADOWS
     ========================================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.2);
  
  /* Focus Shadow */
  --shadow-focus: 0 0 0 3px rgba(0, 109, 255, 0.15);
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.15);

  /* ==========================================
     TRANSITIONS
     ========================================== */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.3s ease;

  /* ==========================================
     SOFT UI / NEUMORPHISM BUTTON TOKENS
     ========================================== */
  /* Base Properties - Compact sizing (30% smaller than original) */
  --soft-ui-bg: #f0f2f5;
  --soft-ui-text: #333333;
  --soft-ui-padding-y: 8px;
  --soft-ui-padding-x: 17px;
  --soft-ui-radius: 8px;
  --soft-ui-font-weight: 600;
  --soft-ui-transition: 0.2s ease;
  --soft-ui-icon-size: 16px;
  --soft-ui-icon-gap: 6px;

  /* Shadows - Normal State */
  --soft-ui-shadow-light: -4px -4px 10px rgba(255, 255, 255, 0.7);
  --soft-ui-shadow-dark: 4px 4px 10px rgba(0, 0, 0, 0.1);

  /* Shadows - Hover State */
  --soft-ui-shadow-light-hover: -6px -6px 14px rgba(255, 255, 255, 0.8);
  --soft-ui-shadow-dark-hover: 6px 6px 14px rgba(0, 0, 0, 0.12);

  /* Shadows - Active (Pressed) State */
  --soft-ui-shadow-inset-dark: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
  --soft-ui-shadow-inset-light: inset -2px -2px 4px rgba(255, 255, 255, 0.7);

  /* Accent Variant - Primary Brand Color */
  --soft-ui-accent-bg: rgba(0, 51, 117, 0.08);
  --soft-ui-accent-bg-hover: rgba(0, 51, 117, 0.15);
  --soft-ui-accent-color: #003375;

  /* ==========================================
     Z-INDEX SCALE
     ========================================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ============================================
   MODULE COLOR SYSTEM - Visual Wayfinding
   Add this section to your theme.css file
   ============================================ */

/* 
 * Document Flow Color Progression:
 * Quotation (Blue) → Sales Order (Teal) → Delivery Order (Amber) → Invoice (Purple)
 */

:root {
  /* Quotation Module - Purple (Opportunity, Proposal) */
  --module-quotation-accent: #6f42c1;
  --module-quotation-light: #f3e8ff;
  --module-quotation-muted: #e9d5ff;
  --module-quotation-dark: #5b21b6;

  /* Sales Order Module - Teal (Commitment, Confirmed) */
  --module-sales-order-accent: #14B8A6;
  --module-sales-order-light: #F0FDFA;
  --module-sales-order-muted: #CCFBF1;
  --module-sales-order-dark: #0F766E;

  /* Delivery Order Module - Amber (Action, Logistics) */
  --module-delivery-order-accent: #F59E0B;
  --module-delivery-order-light: #FFFBEB;
  --module-delivery-order-muted: #FEF3C7;
  --module-delivery-order-dark: #B45309;

  /* Invoice Module - Purple (Financial, Completion) */
  --module-invoice-accent: #8B5CF6;
  --module-invoice-light: #F5F3FF;
  --module-invoice-muted: #EDE9FE;
  --module-invoice-dark: #6D28D9;
}

/* ==========================================
   DARK MODE SUPPORT (Future)
   ========================================== */
/* 
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #242424;
    --color-text-primary: #e5e5e5;
    // ... etc
  }
}
*/