/**
 * Design System & Global Color Declarations
 * Josxph Limited Client Portal
 * 
 * EDIT THIS FILE to change colors across the entire application.
 * All CSS files should reference these CSS custom properties (variables)
 * instead of hard-coded color values.
 */

:root {
  /* ============================================
     PRIMARY BRAND COLORS
     ============================================ */
  --color-primary: #ffd32f;           /* Josxph Yellow - main brand color */
  --color-primary-light: #ffe066;     /* Lighter yellow for hovers */
  --color-primary-dark: #e6be2a;      /* Darker yellow for active states */
  --color-primary-pale: #fff9e6;      /* Very light yellow for backgrounds */
  
  /* ============================================
     SECONDARY COLORS
     ============================================ */
  --color-secondary: #003262;         /* Navy blue - professional */
  --color-secondary-light: #004d8c;   /* Lighter navy */
  --color-secondary-dark: #001f3f;    /* Darker navy */
  
  /* ============================================
     ACCENT COLORS
     ============================================ */
  --color-accent: #2c3e50;            /* Dark slate - for text emphasis */
  --color-accent-light: #34495e;      /* Medium slate */
  
  /* ============================================
     TEXT COLORS
     ============================================ */
  --color-text: #2c3e50;              /* Alias for primary text */
  --color-text-primary: #2c3e50;      /* Main body text - dark slate */
  --color-text-secondary: #6c757d;    /* Secondary text - grey */
  --color-text-light: #6c757d;        /* Alias for secondary text */
  --color-text-muted: #95a5a6;        /* Muted text - light grey */
  --color-text-inverse: #ffffff;      /* Text on dark backgrounds */
  --color-text-link: #003262;         /* Links - navy */
  --color-text-link-hover: #004d8c;   /* Link hover state */
  
  /* ============================================
     BACKGROUND COLORS
     ============================================ */
  --color-bg-primary: #ffffff;        /* Main background - white */
  --color-bg-secondary: #f8f9fa;      /* Light grey background */
  --color-bg-tertiary: #e9ecef;       /* Medium grey background */
  --color-bg-dark: #2c3e50;           /* Dark background */
  --color-bg-overlay: rgba(0, 0, 0, 0.5);  /* Modal overlays */
  
  /* ============================================
     STATUS & FEEDBACK COLORS
     ============================================ */
  --color-success: #28a745;           /* Success - green */
  --color-success-light: #d4edda;     /* Light green background */
  --color-success-dark: #155724;      /* Dark green text */
  
  --color-error: #dc3545;             /* Error - red */
  --color-error-light: #f8d7da;       /* Light red background */
  --color-error-dark: #721c24;        /* Dark red text */
  
  --color-warning: #ffc107;           /* Warning - amber */
  --color-warning-light: #fff3cd;     /* Light amber background */
  --color-warning-dark: #856404;      /* Dark amber text */
  
  --color-info: #17a2b8;              /* Info - teal */
  --color-info-light: #d1ecf1;        /* Light teal background */
  --color-info-dark: #0c5460;         /* Dark teal text */
  
  --color-purple: #9b59b6;            /* Purple - for duration badges */
  --color-purple-light: #e8daef;      /* Light purple background */
  --color-purple-dark: #6c3483;       /* Dark purple text */
  
  /* ============================================
     UI ELEMENT COLORS
     ============================================ */
  --color-border: #dee2e6;            /* Default borders */
  --color-border-light: #e9ecef;      /* Lighter borders */
  --color-border-dark: #ced4da;       /* Darker borders */
  --color-border-focus: #ffd32f;      /* Focus state borders */
  
  --color-shadow: rgba(0, 0, 0, 0.1); /* Default shadows */
  --color-shadow-dark: rgba(0, 0, 0, 0.2); /* Darker shadows */
  
  --color-hover: rgba(255, 211, 47, 0.1);  /* Hover state background */
  --color-active: rgba(255, 211, 47, 0.2); /* Active state background */
  
  /* ============================================
     SPECIFIC COMPONENT COLORS
     ============================================ */
  
  /* Sidebar */
  --color-sidebar-bg: #2c3e50;
  --color-sidebar-text: #ecf0f1;
  --color-sidebar-hover: rgba(255, 211, 47, 0.1);
  --color-sidebar-active: #ffd32f;
  
  /* Cards */
  --color-card-bg: #ffffff;
  --color-card-border: #e9ecef;
  --color-card-shadow: rgba(0, 0, 0, 0.08);
  
  /* Buttons */
  --color-button-primary-bg: #ffd32f;
  --color-button-primary-text: #000000;
  --color-button-primary-hover: #e6be2a;
  
  --color-button-secondary-bg: #6c757d;
  --color-button-secondary-text: #ffffff;
  --color-button-secondary-hover: #5a6268;
  
  --color-button-danger-bg: #dc3545;
  --color-button-danger-text: #ffffff;
  --color-button-danger-hover: #c82333;
  
  /* Forms */
  --color-input-bg: #ffffff;
  --color-input-border: #ced4da;
  --color-input-focus-border: #ffd32f;
  --color-input-focus-shadow: rgba(255, 211, 47, 0.25);
  --color-input-disabled-bg: #e9ecef;
  --color-input-placeholder: #6c757d;
  
  /* Tables */
  --color-table-header-bg: #f8f9fa;
  --color-table-row-hover: #f8f9fa;
  --color-table-border: #dee2e6;
  --color-table-stripe: #f8f9fa;
  
  /* Badges & Status */
  --color-badge-published: #28a745;
  --color-badge-draft: #6c757d;
  --color-badge-pending: #ffc107;
  --color-badge-archived: #17a2b8;
  
  /* ============================================
     SPACING SCALE
     ============================================ */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-family-base: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-family-primary: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'Monaco', 'Courier New', monospace;
  
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 2rem;      /* 32px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 2;
  
  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;  /* Circular */
  
  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ============================================
     BREAKPOINTS (for JavaScript)
     ============================================ */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1280px;
}

/* ============================================
   USAGE EXAMPLES
   ============================================ */

/*
  Instead of:
    color: #ffd32f;
    background: #2c3e50;
    
  Use:
    color: var(--color-primary);
    background: var(--color-text-primary);
    
  This allows you to change colors globally by editing this file!
  
  Button example:
    .btn-primary {
      background: var(--color-button-primary-bg);
      color: var(--color-button-primary-text);
      border-radius: var(--radius-md);
      padding: var(--space-sm) var(--space-lg);
      transition: var(--transition-base);
    }
    
    .btn-primary:hover {
      background: var(--color-button-primary-hover);
    }
    
  Card example:
    .card {
      background: var(--color-card-bg);
      border: 1px solid var(--color-card-border);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      box-shadow: var(--shadow-md);
    }
    
  Text example:
    .text-primary {
      color: var(--color-text-primary);
      font-family: var(--font-family-primary);
      line-height: var(--line-height-normal);
    }
    
    .text-muted {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
    }
*/

/* ============================================
   DARK MODE (Optional - for future)
   ============================================ */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #2c2c2c;
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0a0;
    --color-card-bg: #2c2c2c;
    --color-border: #404040;
  }
}
*/