/* =============================================================================
   PROTOCOL RAW OPERATIONS PORTAL - DESIGN TOKENS
   Based on Visual Identity Guide v2.1, adapted for internal tooling
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     BRAND COLORS (from Visual Identity Guide v2.1)
     --------------------------------------------------------------------------- */
  
  /* Core Brand */
  --color-espresso: #2B2523;        /* Authority, headlines, primary text */
  --color-forest-green: #2D5144;    /* Verification, proof, trust */
  --color-burnt-sienna: #B85C3A;    /* Action, CTAs, energy */
  
  /* Backgrounds */
  --color-cream: #F9F7F4;           /* Primary background */
  --color-warm-linen: #EBE8E3;      /* Alternate background */
  --color-stone: #C4BCB0;           /* Rich contrast (use sparingly) */
  --color-deep-charcoal: #1A1816;   /* Dark sections, footer */
  
  /* Supporting */
  --color-warm-gray: #918A85;       /* Body text, secondary */
  --color-taupe: #6B6360;           /* Muted text, subtle borders */
  --color-amber: #D4A574;           /* Pending states, premium highlights */
  
  /* ---------------------------------------------------------------------------
     OPS PORTAL SEMANTIC COLORS
     Mapped from brand colors for functional contexts
     --------------------------------------------------------------------------- */
  
  /* Text */
  --text-primary: var(--color-espresso);
  --text-secondary: #7C7C78;        /* Slightly cooler for ops readability */
  --text-muted: var(--color-taupe);
  --text-inverse: #FFFFFF;
  
  /* Backgrounds */
  --bg-page: #FEFDF7;               /* Slightly warmer than pure cream */
  --bg-surface: #FFFFFF;            /* Cards, inputs, elevated elements */
  --bg-surface-alt: #F2EEE3;        /* Sections, alternating rows */
  --bg-header: #FFFFFF;
  
  /* Interactive - Primary (Action) */
  --color-primary: #D48762;         /* Warmer sienna for ops context */
  --color-primary-hover: #C17654;
  --color-primary-text: #FFFFFF;
  
  /* Interactive - Secondary (Verification/Success) */
  --color-secondary: #4B685B;       /* Softer forest green */
  --color-secondary-hover: #3E5449;
  --color-secondary-text: #FFFFFF;
  
  /* Status Colors */
  --color-success: #4B685B;         /* Forest green family */
  --color-success-light: rgba(75, 104, 91, 0.1);
  --color-success-border: #4B685B;
  
  --color-warning: #F57C00;         /* Orange for attention */
  --color-warning-light: #FFF8E1;
  --color-warning-border: #FFD54F;
  
  --color-error: #8B3A3A;           /* Warm red, not harsh */
  --color-error-light: rgba(139, 58, 58, 0.1);
  --color-error-border: #8B3A3A;
  
  --color-info: var(--color-secondary);
  --color-info-light: rgba(75, 104, 91, 0.08);
  --color-info-border: var(--color-secondary);
  
  /* Risk Levels (for pack queue) */
  --color-risk-high: #D32F2F;
  --color-risk-medium: #F57C00;
  --color-risk-standard: #388E3C;
  
  /* Scan States */
  --color-scan-pending: #FFD54F;
  --color-scan-pending-text: #F57C00;
  --color-scan-active: var(--color-primary);
  --color-scan-complete: var(--color-success);
  --color-scan-error: var(--color-error);
  
  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------------- */
  
  /* Font Families */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font Sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  
  /* ---------------------------------------------------------------------------
     SPACING
     --------------------------------------------------------------------------- */
  
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  
  /* ---------------------------------------------------------------------------
     BORDERS & RADIUS
     --------------------------------------------------------------------------- */
  
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-color: rgba(124, 124, 120, 0.2);
  --border-color-strong: #7C7C78;
  
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* ---------------------------------------------------------------------------
     SHADOWS
     --------------------------------------------------------------------------- */
  
  --shadow-sm: 0 1px 2px rgba(43, 37, 35, 0.05);
  --shadow-md: 0 2px 8px rgba(43, 37, 35, 0.06);
  --shadow-lg: 0 4px 16px rgba(43, 37, 35, 0.08);
  --shadow-focus: 0 0 0 3px rgba(75, 104, 91, 0.1);
  
  /* ---------------------------------------------------------------------------
     TRANSITIONS
     --------------------------------------------------------------------------- */
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* ---------------------------------------------------------------------------
     Z-INDEX SCALE
     --------------------------------------------------------------------------- */
  
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  
  /* ---------------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------------- */
  
  --max-width-content: 1200px;
  --header-height: 72px;
  --nav-height: 52px;
}