/* 
 * Wire Solved Brand Styles
 * Following the Wire Solved Brand & Style Guide
 */

/* ========================================
   CSS Variables - Brand Foundation
   ======================================== */

   :root {
    /* Brand Colors */
    --color-primary: #D4B996;        /* Wire Tan (from logo) */
    --color-primary-dark: #C4A67A;   /* Darker tan for gradients/hover */
    --color-accent: #D47600;         /* Safety Orange */
    --color-accent-hover: #B86500;   /* Darker orange for hover */
    
    /* Neutral Colors */
    --color-bg-light: #F5F5F5;       /* Light gray background */
    --color-bg-white: #FFFFFF;       /* Pure white */
    --color-text-primary: #212121;   /* Dark gray for body text */
    --color-text-secondary: #9E9E9E; /* Medium gray for labels */
    --color-border: #CCCCCC;         /* Medium gray borders */
    --color-border-light: #E0E0E0;   /* Light gray borders */
    
    /* State Colors */
    --color-success: #388E3C;        /* Success green */
    --color-error: #D32F2F;          /* Error red */
    --color-warning: #D47600;        /* Warning orange (same as accent) */
    
    /* Typography */
    --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* Font Sizes (using rem for scalability) */
    --font-size-h1: 2rem;      /* 32px */
    --font-size-h2: 1.5rem;    /* 24px */
    --font-size-h3: 1.25rem;   /* 20px */
    --font-size-body: 1rem;    /* 16px */
    --font-size-small: 0.875rem; /* 14px */
    --font-size-tiny: 0.75rem;   /* 12px */
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    
    /* Spacing (8pt grid system) */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 1rem;     /* 16px */
    --space-md: 1.5rem;   /* 24px */
    --space-lg: 2rem;     /* 32px */
    --space-xl: 3rem;     /* 48px */
    
    /* Border Radius */
    --radius-sm: 4px;     /* Standard radius */
    --radius-md: 6px;     /* Medium radius */
    --radius-lg: 12px;    /* Large radius for cards */
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
  }
  
  /* ========================================
     Base Typography
     ======================================== */
  
  body {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text-primary);
  }
  
  h1 {
    font-size: var(--font-size-h1);
    margin-bottom: var(--space-md);
  }
  
  h2 {
    font-size: var(--font-size-h2);
  }
  
  h3 {
    font-size: var(--font-size-h3);
  }
  
  p {
    margin: 0 0 var(--space-sm) 0;
  }
  
  small {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    display: block;
    margin-top: var(--space-xs);
  }
  
  /* Links */
  a {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  
  a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }
  
  a:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  
  /* ========================================
     Utility Classes
     ======================================== */
  
  .text-primary { color: var(--color-primary); }
  .text-accent { color: var(--color-accent); }
  .text-success { color: var(--color-success); }
  .text-error { color: var(--color-error); }
  .text-muted { color: var(--color-text-secondary); }
  
  .bg-white { background-color: var(--color-bg-white); }
  .bg-light { background-color: var(--color-bg-light); }
  
  .font-bold { font-weight: var(--font-weight-bold); }
  .font-medium { font-weight: var(--font-weight-medium); }
  
  /* Spacing utilities (following 8pt grid) */
  .mt-xs { margin-top: var(--space-xs); }
  .mt-sm { margin-top: var(--space-sm); }
  .mt-md { margin-top: var(--space-md); }
  .mt-lg { margin-top: var(--space-lg); }
  
  .mb-xs { margin-bottom: var(--space-xs); }
  .mb-sm { margin-bottom: var(--space-sm); }
  .mb-md { margin-bottom: var(--space-md); }
  .mb-lg { margin-bottom: var(--space-lg); }
  
  .p-sm { padding: var(--space-sm); }
  .p-md { padding: var(--space-md); }
  .p-lg { padding: var(--space-lg); }