/*
Theme Name: HfxIT
Theme URI: https://hfxit.ltd
Author: Hfx IT
Author URI: https://hfxit.ltd
Description: Custom WordPress theme for Hfx IT — a professional IT services company with hubs in London, UK and Halifax, Canada. Built for performance, accessibility, and a clear solutions-led structure.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://hfxit.ltd/license
Text Domain: hfxit
Tags: technology, corporate, responsive, services, custom-menu, custom-logo
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand Colors */
  --color-primary:    #1A2B4A;
  --color-accent:     #00A8E8;
  --color-cta:        #FF6B35;
  --color-cta-hover:  #E85520;

  /* Neutrals */
  --color-white:      #FFFFFF;
  --color-light:      #F8FAFF;
  --color-alt-bg:     #EEF4FF;
  --color-border:     #CBD5E0;
  --color-muted:      #718096;
  --color-text:       #2D3748;
  --color-dark:       #1A202C;

  /* Accent light */
  --color-accent-10:  rgba(0, 168, 232, 0.1);
  --color-accent-20:  rgba(0, 168, 232, 0.2);

  /* Typography */
  --font-heading: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Sizing */
  --container-max: 1200px;
  --container-wide: 1400px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(26, 43, 74, 0.08);
  --shadow-md:  0 4px 20px rgba(26, 43, 74, 0.12);
  --shadow-lg:  0 8px 40px rgba(26, 43, 74, 0.16);
  --shadow-card: 0 2px 12px rgba(26, 43, 74, 0.1);

  /* Transitions */
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Nav height */
  --nav-height: 72px;
}