/**
 * TKA Energy — Design System Tokens
 *
 * CSS custom properties for consistent theming.
 */

:root {
	/* ── Colors ───────────────────────────── */
	--color-primary: #3498db;
	--color-primary-hover: #2a76a9;
	--color-primary-light: #5baee4;
	--color-primary-dark: #1d6fa5;

	--color-dark: #16242e;
	--color-darker: #171717;
	--color-darkest: #0d0d0d;

	--color-text: #898989;
	--color-text-light: #9c9c9c;
	--color-heading: #000000;
	--color-heading-light: #4e4e4e;

	--color-light: #f8f9f9;
	--color-lighter: #f4f4f4;
	--color-white: #ffffff;

	--color-border: #e5e5e5;
	--color-border-dark: #2e2e2e;

	--color-success: #69cd72;
	--color-error: #e74c3c;
	--color-warning: #f39c12;

	/* ── Typography ────────────────────────── */
	--font-heading: 'Montserrat', sans-serif;
	--font-body: 'PT Sans', sans-serif;

	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-md: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 21px;
	--font-size-h5: 16px;
	--font-size-h4: 21px;
	--font-size-h3: 24px;
	--font-size-h2: 28px;
	--font-size-h1: 32px;
	--font-size-hero: 48px;

	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--line-height-loose: 1.8;

	/* ── Spacing ───────────────────────────── */
	--space-xs: 5px;
	--space-sm: 10px;
	--space-md: 15px;
	--space-lg: 20px;
	--space-xl: 30px;
	--space-2xl: 40px;
	--space-3xl: 60px;
	--space-4xl: 80px;

	--section-padding: 80px 0;
	--section-padding-sm: 50px 0;

	/* ── Layout ────────────────────────────── */
	--container-max: 1170px;
	--container-md: 970px;
	--container-narrow: 750px;

	--header-height: 80px;
	--header-height-sticky: 60px;
	--top-bar-height: 42px;

	--border-radius-sm: 3px;
	--border-radius: 4px;
	--border-radius-lg: 8px;

	--box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
	--box-shadow-hover: 0 5px 25px rgba(0, 0, 0, 0.12);
	--box-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);

	/* ── Transitions ───────────────────────── */
	--transition-fast: 0.15s ease;
	--transition: 0.3s ease;
	--transition-slow: 0.5s ease;
}
