/* ============================================
   Kuzmack Suites - CSS Custom Properties
   Based on brand logo and design system
   ============================================ */

:root {
  /* ==================
     Brand Colors
     ================== */
  
  /* Primary Brand Colors */
  --ks-navy: #0F3044;
  --ks-cream: #E8DCC4;
  --ks-brown: #8B5A3C;
  
  /* Product Accent Colors */
  --ks-tcw-blue: #2563EB;
  --ks-truecut-red: #B91C1C;
  --ks-customweb-green: #059669;
  
  /* Neutral Colors */
  --ks-white: #FFFFFF;
  --ks-light-gray: #F9FAFB;
  --ks-gray: #6B7280;
  --ks-dark-text: #1F2937;
  --ks-black: #111827;
  
  /* Semantic Colors */
  --ks-success: #8B5A3C;
  --ks-danger: #B91C1C;
  --ks-warning: #F59E0B;
  --ks-info: #2563EB;
  
  /* ==================
     Background Colors
     ================== */
  --ks-bg-primary: var(--ks-navy);
  --ks-bg-secondary: var(--ks-white);
  --ks-bg-tertiary: var(--ks-light-gray);
  --ks-bg-dark: var(--ks-navy);
  --ks-bg-light: var(--ks-cream);
  
  /* ==================
     Text Colors
     ================== */
  --ks-text-primary: var(--ks-dark-text);
  --ks-text-secondary: var(--ks-gray);
  --ks-text-on-dark: var(--ks-cream);
  --ks-text-on-light: var(--ks-navy);
  --ks-text-accent: var(--ks-brown);
  
  /* ==================
     Border Colors
     ================== */
  --ks-border-light: var(--ks-cream);
  --ks-border-dark: var(--ks-navy);
  --ks-border-neutral: #E5E7EB;
  
  /* ==================
     Button Colors
     ================== */
  --ks-btn-primary-bg: var(--ks-navy);
  --ks-btn-primary-text: var(--ks-cream);
  --ks-btn-primary-hover: #1a4a63;
  
  --ks-btn-secondary-bg: var(--ks-cream);
  --ks-btn-secondary-text: var(--ks-navy);
  --ks-btn-secondary-hover: #d4c9b0;
  
  --ks-btn-accent-bg: var(--ks-brown);
  --ks-btn-accent-text: var(--ks-white);
  --ks-btn-accent-hover: #a0673f;
  
  /* ==================
     Link Colors
     ================== */
  --ks-link-color: var(--ks-brown);
  --ks-link-hover: var(--ks-navy);
  --ks-link-visited: #6d4630;
  
  /* ==================
     Typography
     ================== */
  --ks-font-family-primary: 'Montserrat', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --ks-font-family-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  
  /* Font Sizes */
  --ks-font-size-xs: 0.75rem;      /* 12px */
  --ks-font-size-sm: 0.875rem;     /* 14px */
  --ks-font-size-base: 1rem;       /* 16px */
  --ks-font-size-lg: 1.125rem;     /* 18px */
  --ks-font-size-xl: 1.25rem;      /* 20px */
  --ks-font-size-2xl: 1.5rem;      /* 24px */
  --ks-font-size-3xl: 2rem;        /* 32px */
  --ks-font-size-4xl: 2.5rem;      /* 40px */
  --ks-font-size-5xl: 3rem;        /* 48px */
  
  /* Font Weights */
  --ks-font-weight-normal: 400;
  --ks-font-weight-medium: 500;
  --ks-font-weight-semibold: 600;
  --ks-font-weight-bold: 700;
  --ks-font-weight-extrabold: 800;
  
  /* Line Heights */
  --ks-line-height-tight: 1.25;
  --ks-line-height-normal: 1.5;
  --ks-line-height-relaxed: 1.75;
  
  /* ==================
     Spacing
     ================== */
  --ks-spacing-xs: 0.25rem;   /* 4px */
  --ks-spacing-sm: 0.5rem;    /* 8px */
  --ks-spacing-md: 1rem;      /* 16px */
  --ks-spacing-lg: 1.5rem;    /* 24px */
  --ks-spacing-xl: 2rem;      /* 32px */
  --ks-spacing-2xl: 3rem;     /* 48px */
  --ks-spacing-3xl: 4rem;     /* 64px */
  --ks-spacing-4xl: 6rem;     /* 96px */
  
  /* ==================
     Border Radius
     ================== */
  --ks-radius-sm: 0.25rem;    /* 4px */
  --ks-radius-md: 0.5rem;     /* 8px */
  --ks-radius-lg: 0.75rem;    /* 12px */
  --ks-radius-xl: 1rem;       /* 16px */
  --ks-radius-full: 9999px;   /* Circular */
  
  /* ==================
     Shadows
     ================== */
  --ks-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ks-shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  --ks-shadow-lg: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  --ks-shadow-xl: 0 8px 24px 0 rgba(0, 0, 0, 0.2);
  
  /* ==================
     Transitions
     ================== */
  --ks-transition-fast: 150ms ease-in-out;
  --ks-transition-base: 300ms ease-in-out;
  --ks-transition-slow: 500ms ease-in-out;
  
  /* ==================
     Z-Index
     ================== */
  --ks-z-dropdown: 1000;
  --ks-z-sticky: 1020;
  --ks-z-fixed: 1030;
  --ks-z-modal-backdrop: 1040;
  --ks-z-modal: 1050;
  --ks-z-popover: 1060;
  --ks-z-tooltip: 1070;
  
  /* ==================
     Breakpoints (for JS)
     ================== */
  --ks-breakpoint-sm: 576px;
  --ks-breakpoint-md: 768px;
  --ks-breakpoint-lg: 1024px;
  --ks-breakpoint-xl: 1280px;
  --ks-breakpoint-2xl: 1536px;
}

/* ==================
   Utility Classes
   ================== */

/* Background Colors */
.ks-bg-navy { background-color: var(--ks-navy); }
.ks-bg-cream { background-color: var(--ks-cream); }
.ks-bg-brown { background-color: var(--ks-brown); }
.ks-bg-white { background-color: var(--ks-white); }
.ks-bg-light-gray { background-color: var(--ks-light-gray); }

/* Text Colors */
.ks-text-navy { color: var(--ks-navy); }
.ks-text-cream { color: var(--ks-cream); }
.ks-text-brown { color: var(--ks-brown); }
.ks-text-white { color: var(--ks-white); }
.ks-text-dark { color: var(--ks-dark-text); }
.ks-text-gray { color: var(--ks-gray); }

/* Border Colors */
.ks-border-cream { border-color: var(--ks-cream); }
.ks-border-navy { border-color: var(--ks-navy); }
.ks-border-brown { border-color: var(--ks-brown); }

/* Product Accents */
.ks-accent-tcw { color: var(--ks-tcw-blue); }
.ks-accent-truecut { color: var(--ks-truecut-red); }
.ks-border-tcw { border-color: var(--ks-tcw-blue); }
.ks-border-truecut { border-color: var(--ks-truecut-red); }
.ks-accent-customweb { color: var(--ks-customweb-green); }
.ks-border-customweb { border-color: var(--ks-customweb-green); }

/* Typography */
.ks-font-primary { font-family: var(--ks-font-family-primary); }
.ks-font-bold { font-weight: var(--ks-font-weight-bold); }
.ks-font-semibold { font-weight: var(--ks-font-weight-semibold); }

/* Shadows */
.ks-shadow-sm { box-shadow: var(--ks-shadow-sm); }
.ks-shadow-md { box-shadow: var(--ks-shadow-md); }
.ks-shadow-lg { box-shadow: var(--ks-shadow-lg); }

/* Border Radius */
.ks-rounded-sm { border-radius: var(--ks-radius-sm); }
.ks-rounded-md { border-radius: var(--ks-radius-md); }
.ks-rounded-lg { border-radius: var(--ks-radius-lg); }
.ks-rounded-full { border-radius: var(--ks-radius-full); }