/*
Theme Name: Khwalo & Associates
Theme URI: https://khwalo.co.za
Author: Khwalo & Associates
Author URI: https://khwalo.co.za
Description: A professional custom WordPress theme for Khwalo & Associates, a chartered accounting firm in East London, South Africa. Features a clean, modern design with generous whitespace, restrained color usage, and full accessibility compliance.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: khwalo-theme
*/

:root {
    /* === PRIMITIVE TOKENS === */
    /* Colors - Navy Scale */
    --navy-950: #050D1A;
    --navy-900: #0A1628;
    --navy-800: #0F2035;
    --navy-700: #1B2A4A;
    --navy-600: #243B6A;
    /* Colors - Gold Scale */
    --gold-500: #C9A96E;
    --gold-600: #B8944F;
    --gold-100: rgba(201, 169, 110, 0.08);
    /* Colors - Neutral Scale */
    --gray-900: #111827;
    --gray-800: #1F2937;
    --gray-700: #374151;
    --gray-500: #6B7280;
    --gray-400: #9CA3AF;
    --gray-200: #E5E7EB;
    --gray-50: #F9FAFB;
    --white: #FFFFFF;
    /* Colors - Status */
    --green-600: #16A34A;
    --amber-600: #D97706;
    --red-600: #DC2626;
    --blue-600: #2563EB;
    /* Spacing (8px base) */
    --space-4: 0.25rem;
    /* 4px - 2xs */
    --space-8: 0.5rem;
    /* 8px - xs */
    --space-12: 0.75rem;
    /* 12px - sm */
    --space-16: 1rem;
    /* 16px - md */
    --space-24: 1.5rem;
    /* 24px - lg */
    --space-32: 2rem;
    /* 32px - xl */
    --space-48: 3rem;
    /* 48px - 2xl */
    --space-64: 4rem;
    /* 64px - 3xl */
    --space-96: 6rem;
    /* 96px - 4xl */
    --space-128: 8rem;
    /* 128px - 5xl */
    /* Font Sizes */
    --font-12: 0.75rem;
    --font-14: 0.875rem;
    --font-16: 1rem;
    --font-20: 1.25rem;
    --font-28: 1.75rem;
    --font-36: 2.25rem;
    --font-44: 2.75rem;
    --font-56: 3.5rem;
    /* Font Weights */
    --weight-400: 400;
    --weight-500: 500;
    --weight-600: 600;
    --weight-700: 700;
    /* Line Heights */
    --leading-110: 1.1;
    --leading-120: 1.2;
    --leading-130: 1.3;
    --leading-140: 1.4;
    --leading-150: 1.5;
    --leading-160: 1.6;
    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.05em;
    /* Timing */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    /* Easing */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
    /* Border Radius */
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-16: 16px;
    --radius-full: 9999px;
    /* Shadows / Elevation */
    --shadow-0: none;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.12);

    /* === SEMANTIC TOKENS === */
    --color-primary: var(--navy-900);
    --color-primary-dark: var(--navy-950);
    --color-accent: var(--gold-500);
    --color-accent-hover: var(--gold-600);
    --color-accent-tint: var(--gold-100);
    --color-text-primary: var(--gray-900);
    --color-text-secondary: var(--gray-700);
    --color-text-muted: var(--gray-500);
    --color-text-inverse: var(--white);
    --color-text-inverse-secondary: var(--gray-400);
    --color-surface: var(--white);
    --color-surface-alt: var(--gray-50);
    --color-surface-dark: var(--navy-900);
    --color-surface-dark-alt: var(--gray-800);
    --color-border: var(--gray-200);
    --color-border-dark: rgba(255, 255, 255, 0.1);
    --color-border-accent: var(--gold-500);
    --color-success: var(--green-600);
    --color-warning: var(--amber-600);
    --color-error: var(--red-600);
    --color-info: var(--blue-600);
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-display: var(--font-56);
    --text-h1: var(--font-44);
    --text-h2: var(--font-36);
    --text-h3: var(--font-28);
    --text-h4: var(--font-20);
    --text-body: var(--font-16);
    --text-small: var(--font-14);
    --text-caption: var(--font-12);
    --space-section-y: 12rem;
    --space-section-y-mobile: 7rem;
    --space-container-x: var(--space-48);
    --space-container-x-mobile: var(--space-24);
    --space-grid-gap: var(--space-24);
    --space-grid-gap-mobile: var(--space-16);
    --container-max: 1280px;
    --transition-fast: var(--duration-fast) var(--ease-standard);
    --transition-normal: var(--duration-normal) var(--ease-standard);
    --transition-slow: var(--duration-slow) var(--ease-decelerate);
    --elevation-0: var(--shadow-0);
    --elevation-1: var(--shadow-1);
    --elevation-2: var(--shadow-2);
    --elevation-3: var(--shadow-3);
    --elevation-4: var(--shadow-4);
}