:root {
  /* Brand Colors extracted from logo */
  --brand-primary: #f07b22; /* High-energy premium orange from weaving icon */
  --brand-primary-hover: #d96d1c;
  --brand-secondary: #222222; /* Dark slate from "AKARE TEKSTIL" text */
  --brand-accent: #6f8a5a; /* Natural green from leaf icon - use sparingly */
  
  /* Neutral Color Palette */
  --surface-primary: #ffffff;
  --surface-secondary: #f8f9fa;
  --surface-dark: #121212;
  --surface-dark-light: #1e1e1e;
  
  /* Text Colors */
  --text-primary: #111822;
  --text-secondary: #5f6368;
  --text-on-dark: #ffffff;
  --text-on-dark-secondary: #c9c9c9;
  
  /* Borders & Dividers */
  --border-light: #e0e0e0;
  --border-dark: #333333;
  
  /* Typography - Clean & Premium */
  --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-secondary: 'Playfair Display', Georgia, serif; /* For elegant headers to signify textile/fashion */
  
  /* Spacing System */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 5rem;
  --spacing-4xl: 8rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Header Height */
  --header-height: 80px;
}