/**
 * Security Base Design System
 * Design Tokens - Single Source of Truth
 *
 * Usage: Import this file FIRST before any other stylesheets
 * All components should reference these variables
 */

:root {
  /* ===================================
     PRIMARY BRAND — Security Guard Theme
     Dark navy, professional, masculine
     =================================== */
  --brand-primary: #1E3A5F;
  --brand-primary-light: #2D4A6F;
  --brand-primary-dark: #152A47;

  /* ===================================
     SECONDARY — Graphite tones
     =================================== */
  --brand-secondary: #374151;
  --brand-secondary-light: #4B5563;

  /* ===================================
     ACCENTS — Orange for action, green for success
     =================================== */
  --accent-success: #059669;
  --accent-success-light: #10B981;
  --accent-danger: #DC2626;
  --accent-danger-light: #EF4444;
  --accent-warning: #D97706;
  --accent-warning-light: #F59E0B;
  --accent-info: #1E3A5F;
  --accent-info-light: #2D4A6F;
  --accent-action: #3B82F6;
  --accent-action-hover: #2563EB;

  /* ===================================
     BACKGROUNDS — Light grey, professional
     =================================== */
  --bg-dark-primary: #111827;
  --bg-dark-secondary: #1F2937;
  --bg-dark-tertiary: #374151;
  --bg-light-primary: #FFFFFF;
  --bg-light-secondary: #F8FAFC;
  --bg-light-tertiary: #F1F5F9;

  /* ===================================
     TEXT
     =================================== */
  --text-on-dark-primary: #F9FAFB;
  --text-on-dark-secondary: #D1D5DB;
  --text-on-dark-tertiary: #9CA3AF;
  --text-on-light-primary: #111827;
  --text-on-light-secondary: #4B5563;
  --text-on-light-tertiary: #6B7280;

  /* ===================================
     BORDERS — Cleaner, more defined
     =================================== */
  --border-on-dark: rgba(255, 255, 255, 0.12);
  --border-on-dark-hover: rgba(255, 255, 255, 0.2);
  --border-on-light: #E2E8F0;
  --border-on-light-hover: #CBD5E1;

  /* ===================================
     GRADIENTS — Subtle, professional
     No bright blue gradients
     =================================== */
  --gradient-brand: linear-gradient(135deg, #1E3A5F 0%, #2D4A6F 100%);
  --gradient-brand-hover: linear-gradient(135deg, #152A47 0%, #1E3A5F 100%);
  --gradient-accent: linear-gradient(135deg, #059669 0%, #10B981 100%);
  --gradient-bg-dark: linear-gradient(180deg, #111827 0%, #1F2937 100%);
  --gradient-action: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
  --gradient-action-hover: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);

  /* ===================================
     SHADOWS — Subtle, minimal
     =================================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);
  --shadow-brand: 0 2px 8px rgba(30, 58, 95, 0.15);
  --shadow-brand-hover: 0 4px 12px rgba(30, 58, 95, 0.2);
  --shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);

  /* ===================================
     RADIUS — Minimal, professional (6-8px max)
     =================================== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-2xl: 8px;
  --radius-full: 9999px;

  /* ===================================
     TRANSITIONS
     =================================== */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ===================================
     LEGACY ALIASES (backward compatibility)
     Map old variable names to new tokens
     =================================== */

  /* Old bg variables */
  --bg: var(--bg-dark-primary);
  --panel: var(--bg-dark-secondary);
  --bg-dark: var(--bg-dark-primary);
  --bg-light: var(--bg-light-primary);

  /* Old text variables */
  --text: var(--text-on-dark-primary);
  --muted: var(--text-on-dark-secondary);
  --text-on-dark: var(--text-on-dark-primary);
  --text-on-light: var(--text-on-light-primary);
  --text-muted-on-dark: var(--text-on-dark-secondary);
  --text-muted-on-light: var(--text-on-light-secondary);

  /* Old accent variables */
  --accent: var(--accent-action);
  --primary: var(--brand-primary);
  --ok: var(--accent-success-light);
  --danger: var(--accent-danger-light);
  --ring: rgba(30, 58, 95, 0.25);

  /* Old transition */
  --transition: var(--transition-slow);

  /* Old gradient mappings */
  --gradient-primary: var(--gradient-brand);
  --gradient-primary-hover: var(--gradient-brand-hover);
  --gradient-dark: var(--gradient-bg-dark);
  --gradient-hero: var(--gradient-bg-dark);

  /* Old shadow mappings */
  --shadow-primary: var(--shadow-brand);
  --shadow-card: var(--shadow-sm);
  --shadow-xl: var(--shadow-lg);

  /* Old header gradient */
  --header-gradient: var(--gradient-brand);
  --header-shadow: var(--shadow-brand);

  /* Old radius */
  --radius: var(--radius-lg);

  /* Old border */
  --border: var(--border-on-dark);
  --shadow: var(--shadow-dark);
}