:root {
    /* Background Layers */
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #222222;
    --color-bg-tertiary: #2a2a2a;

    /* Accent */
    --color-accent: #f7c948;
    --color-accent-hover: #e6b93a;
    --color-accent-muted: rgba(247, 201, 72, 0.12);
    --color-accent-glow-outer: rgba(247, 201, 72, 0.2);
    --color-accent-glow-inner: rgba(247, 201, 72, 0.1);
    --color-accent-glow-scanner: rgba(247, 201, 72, 0.6);

    /* Text */
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #a0a0a0;
    --color-text-inverted: #1a1a1a;

    /* Borders */
    --color-border: #333333;
    --color-border-accent: #f7c948;

    /* Status */
    --color-success: #4caf50;

    /* Portfolio diagram (Hy-Tek) */
    --color-diagram-node-bg: #4a4a4a; /* Lighter grey for portfolio diagram node boxes, sits between bg-tertiary and white */
    --space-diagram-frame: 56px; /* Matches a single diagram node box height, so the container frame hugs the diagram content */

    /* Lightbox */
    --color-overlay: rgba(26, 26, 26, 0.92); /* bg-primary at high opacity, for the lightbox backdrop */

    /* Typography */
    --font-heading: 'Syne', sans-serif;
    --font-body: 'DM Serif Display', serif;

    /* Type Scale */
    --text-hero: clamp(2.4rem, 5.5vw, 4.2rem);
    --text-h1: clamp(2.5rem, 5vw, 4rem);
    --text-h2: clamp(1.8rem, 3vw, 2.5rem);
    --text-h3: clamp(1.4rem, 2.2vw, 1.8rem);
    --text-body: 1.2rem;
    --text-small: 1.05rem;
    --text-brand: clamp(1.5rem, 2.5vw, 2rem);
    --text-h2-desktop: clamp(2.4rem, 3vw, 3.2rem);
    --text-problem: clamp(1.7rem, 2.8vw, 2.3rem);
    --text-hero-sub: var(--text-h3);
    --text-label: calc(var(--text-small) * 1.5);
    --text-step: calc(var(--text-body) * 1.2);
    --text-intro-large: clamp(1.55rem, 2.6vw, 2rem);
    --text-note-large: clamp(1.3rem, 1.8vw, 1.5rem);
    --text-input-large: clamp(1.4rem, 2vw, 1.6rem);
    --text-detail: calc(var(--text-body) * 1.15);
    --text-testimonial: 0.95rem;

    /* Spacing */
    --nav-height: 73px; /* fallback for no-JS; scripts/main.js measures and overrides this on load and resize */
    --space-section: clamp(5rem, 10vw, 10rem);
    --space-component: 2rem;
    --space-tight: 1rem;
    --space-hero-gap: calc(var(--space-component) * 1.5);
    --space-hero-top: calc(var(--space-component) * 4);
    --space-hero-note-gap: calc(var(--space-component) * 1.25); /* equal gap above and below the hero trust note, between the sub-headline and the CTA button */
    --space-hero-line-shift: calc(var(--text-body) * 1.6); /* one body-text line (font-size x line-height), used to nudge the hero content block and scroll indicator up together while the hero glow's position is compensated to stay put */

    /* Radius */
    --border-radius: 8px;
    --border-radius-large: 16px;
}