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

:root {
  /* ==================
     Brand Colors
     ================== */
  
  /* Primary Brand Colors — sourced from kuzmack-logo-512px.svg */
  --ks-navy: #0A2B3A;
  --ks-cream: #F5EAD0;
  --ks-brown: #C1833A;

  /* Extended Brand Palette (from logo illustration) */
  --ks-navy-ink:   #30383C;   /* outlines / heavy text */
  --ks-brown-dark: #55453D;   /* shadow brown */
  --ks-brown-mid:  #66573A;   /* mid brown */
  --ks-tan:        #DBB785;   /* light highlight tan */
  --ks-ember:      #CF4C37;   /* burnt orange accent (the tongue) */
  
  /* 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: #059669;
  --ks-success-bg: #D1FAE5;
  --ks-success-hover: #047857;
  --ks-danger: #DC2626;
  --ks-danger-bg: #FEE2E2;
  --ks-danger-hover: #B91C1C;
  --ks-warning: #D97706;
  --ks-warning-bg: #FEF3C7;
  --ks-warning-hover: #B45309;
  --ks-info: #2563EB;
  --ks-info-bg: #DBEAFE;
  --ks-info-hover: #1D4ED8;

  /* Extended Neutral Ramp (for UI chrome) */
  --ks-neutral-50:  #F9FAFB;
  --ks-neutral-100: #F3F4F6;
  --ks-neutral-200: #E5E7EB;
  --ks-neutral-300: #D1D5DB;
  --ks-neutral-400: #9CA3AF;
  --ks-neutral-500: #6B7280;
  --ks-neutral-600: #4B5563;
  --ks-neutral-700: #374151;
  --ks-neutral-800: #1F2937;
  --ks-neutral-900: #111827;

  /* Ghost / Tertiary Button (Rule 7) */
  --ks-btn-ghost-bg: transparent;
  --ks-btn-ghost-text: var(--ks-neutral-600);
  --ks-btn-ghost-hover-bg: var(--ks-neutral-100);

  /* Prose Max Width (Rule 6: 50-75 ch line length) */
  --ks-prose-max-width: 65ch;
  
  /* ==================
     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 — 1.5x heading scale (Rule 5)
     Body tokens (xs/sm/base/lg) are fine-grain UI chrome.
     Heading tokens (xl→5xl) enforce ≥1.25x adjacent ratio, 1.5x target. */
  --ks-font-size-xs:   0.75rem;    /* 12px — caption */
  --ks-font-size-sm:   0.875rem;   /* 14px — small */
  --ks-font-size-base: 1rem;       /* 16px — body */
  --ks-font-size-lg:   1.25rem;    /* 20px — lead / label */
  --ks-font-size-xl:   1.5rem;     /* 24px — H3           (1.2x)  */
  --ks-font-size-2xl:  2rem;       /* 32px — H2           (1.33x) */
  --ks-font-size-3xl:  3rem;       /* 48px — H1           (1.5x)  */
  --ks-font-size-4xl:  4.5rem;     /* 72px — Display      (1.5x)  */
  --ks-font-size-5xl:  6rem;       /* 96px — Hero display (1.33x) */
  
  /* 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); }

/* ==================
   Prose Container (Rule 6: 50-75 char line length)
   ================== */
.ks-prose {
  max-width: var(--ks-prose-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ==================
   Button Hierarchy (Rule 7)
   ================== */
.ks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ks-spacing-sm);
  padding: var(--ks-spacing-sm) var(--ks-spacing-md);
  border-radius: var(--ks-radius-md);
  font-family: var(--ks-font-family-primary);
  font-size: var(--ks-font-size-sm);
  font-weight: var(--ks-font-weight-semibold);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ks-transition-fast);
  text-decoration: none;
}

.ks-btn-primary {
  background-color: var(--ks-btn-primary-bg);
  color: var(--ks-btn-primary-text);
  box-shadow: var(--ks-shadow-sm);
}
.ks-btn-primary:hover { background-color: var(--ks-btn-primary-hover); }

.ks-btn-secondary {
  background-color: transparent;
  color: var(--ks-navy);
  border-color: var(--ks-navy);
}
.ks-btn-secondary:hover {
  background-color: var(--ks-btn-secondary-bg);
  color: var(--ks-btn-secondary-text);
}

.ks-btn-ghost {
  background-color: var(--ks-btn-ghost-bg);
  color: var(--ks-btn-ghost-text);
  font-weight: var(--ks-font-weight-medium);
}
.ks-btn-ghost:hover { background-color: var(--ks-btn-ghost-hover-bg); }