/**
 * CSS Custom Properties (Variables)
 * Kliken AI Design System
 *
 * @package Kliken_AI
 * @since 1.0.0
 */

:root {
	/* Brand Accent Colors */
	--color-accent-primary: #F58220;   /* Kliken dot */
	--color-accent-secondary: #FF6600; /* SiteWit Orange (web safe) */
	--color-accent-tertiary: #FF9149;  /* Bootstrap Orange */
	
	/* Text Colors */
	--color-text-primary: #333333;     /* Near-black */
	--color-text-secondary: #666666;   /* Gray */
	--color-text-light: #999999;       /* Light gray */
	
	/* Background Colors */
	--color-background: #FFFFFF;
	--color-background-light: #F9F9F9;
	--color-background-cream: #FFF9F5;
	
	/* Border Colors */
	--color-border: #E5E5E5;
	--color-border-light: #F0F0F0;
	
	/* Font Families */
	--font-heading: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	
	/* Font Sizes */
	--text-xs: 0.75rem;    /* 12px */
	--text-sm: 0.875rem;   /* 14px */
	--text-base: 1rem;     /* 16px */
	--text-lg: 1.125rem;   /* 18px */
	--text-xl: 1.25rem;    /* 20px */
	--text-2xl: 1.5rem;    /* 24px */
	--text-3xl: 2rem;      /* 32px */
	--text-4xl: 2.5rem;    /* 40px */
	
	/* Fluid Heading Sizes */
	--h1-size: clamp(2.5rem, 5vw, 4rem);      /* 40-64px */
	--h2-size: clamp(2rem, 4vw, 3rem);        /* 32-48px */
	--h3-size: clamp(1.5rem, 3vw, 2rem);      /* 24-32px */
	--h4-size: clamp(1.25rem, 2.5vw, 1.5rem); /* 20-24px */
	
	/* Line Heights */
	--leading-tight: 1.2;
	--leading-normal: 1.5;
	--leading-relaxed: 1.6;
	--leading-loose: 1.8;
	
	/* Spacing Scale (4px base) */
	--space-1: 0.25rem;  /* 4px */
	--space-2: 0.5rem;   /* 8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-6: 1.5rem;   /* 24px */
	--space-8: 2rem;     /* 32px */
	--space-12: 3rem;    /* 48px */
	--space-16: 4rem;    /* 64px */
	--space-20: 5rem;    /* 80px */
	--space-24: 6rem;    /* 96px */
	
	/* Border Radius */
	--radius-sm: 0.25rem;  /* 4px */
	--radius-md: 0.5rem;   /* 8px */
	--radius-lg: 1rem;     /* 16px */
	
	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
	
	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-normal: var(--transition-base);
	--transition-slow: 0.5s ease;
}