/**
 * TRUSSCORE MATERIAL ESTIMATOR - CUSTOM THEME OVERRIDES
 * 
 * This file allows you to customize the look and feel of the estimator
 * without modifying the core application files.
 * 
 * USAGE:
 * 1. Keep this file in the /deploy folder
 * 2. Add this line to index.html AFTER the main CSS link:
 *    <link href="/custom-theme.css" rel="stylesheet">
 * 3. Uncomment and modify any variables below to customize the theme
 * 
 * When you receive updates from the developer:
 * - Replace all files in /deploy EXCEPT this file
 * - Re-add the custom-theme.css link to the new index.html
 */

:root {
  /* ============================================
     BRAND COLORS
     Uncomment and change these to rebrand the app
     ============================================ */
  
  /* Primary brand color (buttons, links, accents) */
  --color-primary: #FEB100;
  --color-primary-dark: #3a4b5c;
  --color-primary-light: #FEB100;

  /* Secondary/accent color (success states, checkmarks) */
  --color-secondary: #3a4b5c;
  --color-secondary-dark: #3a4b5c;
  
  
  /* ============================================
     NEUTRAL COLORS
     ============================================ */
  
  /* Background colors */
  /* --color-white: #FFFFFF; */
  /* --color-gray-50: #F9FAFB; */
  /* --color-gray-100: #F5F5F5; */
  /* --color-gray-200: #E0E0E0; */
  
  /* Text colors */
  /* --color-gray-800: #333333; */
  /* --color-gray-900: #222222; */
  
  
  /* ============================================
     SEMANTIC COLORS
     ============================================ */
  
  /* --color-success: #00A651; */
  /* --color-warning: #F5A623; */
  /* --color-error: #D0021B; */
  /* --color-info: #0066CC; */
  
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  /* Font family - change to use your brand font */
  /* --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; */
  --font-family: "Muli", sans-serif;
  
  /* Font sizes */
  /* --font-size-xs: 12px; */
  /* --font-size-sm: 14px; */
  /* --font-size-md: 16px; */
  /* --font-size-lg: 18px; */
  /* --font-size-xl: 20px; */
  /* --font-size-2xl: 24px; */
  /* --font-size-3xl: 30px; */
  /* --font-size-4xl: 36px; */
  
  /* Font weights */
  /* --font-weight-normal: 400; */
  /* --font-weight-medium: 500; */
  /* --font-weight-semibold: 600; */
  /* --font-weight-bold: 700; */
  
  
  /* ============================================
     SPACING & LAYOUT
     ============================================ */
  
  /* --spacing-xs: 4px; */
  /* --spacing-sm: 8px; */
  /* --spacing-md: 16px; */
  /* --spacing-lg: 24px; */
  /* --spacing-xl: 32px; */
  /* --spacing-2xl: 48px; */
  /* --spacing-3xl: 64px; */
  
  /* Container width */
  /* --container-max-width: 1200px; */
  /* --container-padding: 20px; */
  
  
  /* ============================================
     BORDERS & SHADOWS
     ============================================ */
  
  /* Border radius */
  /* --radius-sm: 4px; */
  /* --radius-md: 8px; */
  /* --radius-lg: 12px; */
  /* --radius-xl: 16px; */
  
  /* Shadows */
  /* --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); */
  /* --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); */
  /* --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); */
  /* --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); */
  
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  
  /* --transition-fast: 150ms ease; */
  /* --transition-normal: 250ms ease; */
  /* --transition-slow: 350ms ease; */
}


/* ============================================
   CUSTOM CSS OVERRIDES
   Add any additional custom styles below
   ============================================ */

/* Example: Change header background */
 .header {
  background: linear-gradient(135deg, #3a4b5c 0%, #3a4b5c 100%);
}

.header-nav .nav-link {
  color: #ffffff;
}
.logo-text span.logo-estimator {
  color: #ffffff;
}

/* Example: Customize buttons */
/* .btn-primary {
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
} */

/* Example: Add custom logo */
/* Replace the default logo icon with your custom logo */
.logo-icon {
  width: 180px !important;
  height: 50px !important;
  background: url('/images/trusscore-colour-light.svg') no-repeat center;
  background-size: contain;
}

/* Hide the default SVG content */
.logo-icon rect,
.logo-icon path {
  display: none;
}

/* Hide all the text - just show the logo */
.logo-text {
  display: none !important;
}