/*
 * Value Construction — design tokens
 *
 * WEB-A03.8: :root custom properties copied intact from legacy-v4.css section 01.
 * WEB-D01: additive Global Design System tokens. Do not remove V4 values until
 * page conversion (WEB-P01+). Existing parity CSS still references V4 names.
 */
/* --- from legacy-v4.css lines 1-45 --- */
/* ======================================================================
   VALUE CONSTRUCTION LLC — GLOBAL CONSULTING DESIGN SYSTEM
   Version: 4.0
   Purpose: Production-oriented corporate WordPress + WooCommerce visual system
   Direction: Global engineering / construction consultancy
   ====================================================================== */

/* ----------------------------------------------------------------------
   01. DESIGN TOKENS
   ---------------------------------------------------------------------- */
:root {
    --vc-navy-950: #071521;
    --vc-navy-900: #0b1f33;
    --vc-navy-800: #12314c;
    --vc-navy-700: #1c4568;
    --vc-steel-600: #4f6475;
    --vc-steel-500: #66788a;
    --vc-steel-300: #aab6c1;
    --vc-steel-200: #cfd7de;
    --vc-steel-100: #e8edf1;
    --vc-surface: #f5f7f9;
    --vc-white: #ffffff;
    --vc-text: #18232d;
    --vc-muted: #5d6a75;
    --vc-accent: #d96b27;
    --vc-accent-hover: #b95418;
    --vc-success: #1f7a50;
    --vc-danger: #b42318;
    --vc-warning: #9a6700;

    --vc-font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --vc-font-heading: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --vc-container: 1240px;
    --vc-radius-sm: 2px;
    --vc-radius-md: 4px;
    --vc-radius-lg: 6px;

    --vc-shadow-sm: 0 2px 10px rgba(7, 21, 33, 0.08);
    --vc-shadow-md: 0 10px 30px rgba(7, 21, 33, 0.10);
    --vc-shadow-lg: 0 18px 50px rgba(7, 21, 33, 0.14);

    --vc-transition: 180ms ease;
}

/* ----------------------------------------------------------------------
   D01. GLOBAL DESIGN SYSTEM TOKENS (additive)
   Target: international construction / project-management consultancy.
   Gold is accent only. V4 --vc-accent (orange) remains for live parity CSS.
   ---------------------------------------------------------------------- */
:root {
    /* Specified D01 palette (navy matches V4; steel-700/gold are new) */
    --vc-steel-700: #45525e;
    --vc-gold: #d9ad22;

    /* Semantic aliases for new components. Do not rebind V4 --vc-text/--vc-accent. */
    --vc-text-muted: var(--vc-muted);
    --vc-heading: var(--vc-navy-900);
    --vc-border: var(--vc-steel-200);
    --vc-bg: var(--vc-white);
    --vc-bg-alt: var(--vc-surface);
    --vc-primary: var(--vc-navy-900);
    --vc-primary-hover: var(--vc-navy-700);
    --vc-focus: var(--vc-navy-700);

    /* Typography — existing Inter stack; no remote fonts */
    --vc-text-display: clamp(2.75rem, 2rem + 3.5vw, 5rem); /* 44–80px */
    --vc-text-h1: clamp(2.75rem, 2.1rem + 3vw, 5rem); /* 44–80px */
    --vc-text-h2: clamp(2.75rem, 2.4rem + 1.5vw, 3.5rem); /* 44–56px */
    --vc-text-h3: clamp(1.75rem, 1.55rem + 0.8vw, 2.125rem); /* 28–34px */
    --vc-text-h4: clamp(1.3125rem, 1.25rem + 0.3vw, 1.5rem); /* 21–24px */
    --vc-text-body-lg: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); /* 18–20px */
    --vc-text-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem); /* 16–18px */
    --vc-text-small: 0.875rem; /* 14px */
    --vc-text-caption: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem); /* 12–13px */
    --vc-leading-tight: 1.15;
    --vc-leading-snug: 1.28;
    --vc-leading-body: 1.65;
    --vc-tracking-display: -0.03em;
    --vc-tracking-body: 0;

    /* Spacing scale */
    --vc-space-1: 4px;
    --vc-space-2: 8px;
    --vc-space-3: 12px;
    --vc-space-4: 16px;
    --vc-space-6: 24px;
    --vc-space-8: 32px;
    --vc-space-12: 48px;
    --vc-space-16: 64px;
    --vc-space-20: 80px;
    --vc-space-24: 96px;
    --vc-space-30: 120px;
    --vc-section-space: clamp(4rem, 3rem + 4vw, 7.5rem); /* 64–120px */
    --vc-section-space-sm: clamp(2.5rem, 2rem + 2vw, 4rem); /* 40–64px */

    /* Containers — V4 --vc-container stays 1240px for parity */
    --vc-container-site: 1280px;
    --vc-container-content: 1160px;
    --vc-container-reading: 800px;
    --vc-gutter: clamp(20px, 4vw, 40px);

    /* D01 radii (V4 --vc-radius-sm/md/lg unchanged) */
    --vc-radius-xs: 2px;
    --vc-radius-ds-sm: 4px;
    --vc-radius-ds-md: 8px;

    /* Subtle elevation only */
    --vc-shadow-hairline: 0 1px 0 rgba(7, 21, 33, 0.06);
    --vc-shadow-ds-sm: 0 1px 3px rgba(7, 21, 33, 0.08);

    /* Control metrics */
    --vc-control-height: 50px;
    --vc-btn-height: 48px;
}