/* ==========================================================================
   Haksec Group brand tokens (v1.0.0, 2026-08-21)
   Extracted from the live site (resources/css/app.css).
   Hex/rgba fallbacks are canonical; oklch upgrades apply where supported.
   ========================================================================== */
:root {
    color-scheme: dark;

    /* UI palette */
    --void: #131019;
    --surface-1: #1a1622;
    --surface-2: #221c2d;
    --surface-3: #2b2438;
    --line: rgba(122, 106, 148, 0.28);
    --line-strong: rgba(146, 128, 176, 0.45);

    --text: #efeaf5;
    --text-mute: #b2a8c2;
    --text-dim: #837792;

    --accent: #f0409c;       /* primary: hot magenta */
    --accent-hi: #ff7dbd;    /* accent as text on dark */
    --accent-deep: #8f1f5c;  /* hard-shadow tone */
    --signal: #62b7f0;       /* signal blue — status, sparing use */
    --signal-hi: #9bd2fa;
    --violet: #9d6bde;       /* depth, gradients */
    --violet-hi: #bfa0ec;
    --danger: #ff7a7a;       /* errors only */

    /* Logo palette (fixed — never restyle the logo with UI colours) */
    --logo-outline-deep: #0c0b12;
    --logo-outline: #1d1e2a;
    --logo-outline-soft: #43475d;
    --logo-laptop-shade: #7b899f;
    --logo-laptop: #95a5b6;
    --logo-laptop-light: #c4d2da;
    --logo-white: #ffffff;
    --logo-magenta: #ff53cb;
    --logo-pink-light: #ffbafc;
    --logo-purple: #9131a0;
    --logo-purple-deep: #4f1f64;
    --logo-blue: #49afde;
    --logo-blue-deep: #266cb4;

    /* Type */
    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --fs-display: clamp(2.5rem, 7.5vw, 5.4rem);
    --fs-title: clamp(1.9rem, 4vw, 3rem);
    --fs-lede: clamp(1.02rem, 1.4vw, 1.18rem);
    --fs-body: 1rem;
    --fs-small: 0.9rem;
    --fs-caption: 0.78rem;
    --fs-eyebrow: 0.72rem;

    /* Space */
    --px: 0.5rem;            /* the atomic pixel unit */
    --shell-max: 74rem;
    --shell-pad: clamp(1.25rem, 4vw, 2.5rem);
    --section-block: clamp(4rem, 9vh, 6.5rem);

    /* Shape: no radii — the brand is built from square pixels */
    --radius: 0;

    /* Shadows: hard offsets only, no blur */
    --shadow-btn: var(--px) var(--px) 0 0 var(--accent-deep);

    /* Motion: quantised */
    --step-ease: steps(6, end);
    --snap: 150ms steps(3, end);
}

@supports (color: oklch(0% 0 0)) {
    :root {
        --void: oklch(15% 0.025 305);
        --surface-1: oklch(18.5% 0.03 305);
        --surface-2: oklch(22% 0.035 305);
        --surface-3: oklch(26% 0.04 305);
        --line: oklch(45% 0.05 305 / 0.35);
        --line-strong: oklch(55% 0.06 305 / 0.5);

        --text: oklch(94.5% 0.012 320);
        --text-mute: oklch(75% 0.03 310);
        --text-dim: oklch(60% 0.035 308);

        --accent: oklch(66% 0.235 355);
        --accent-hi: oklch(76% 0.17 355);
        --accent-deep: oklch(45% 0.18 355);
        --signal: oklch(74% 0.115 240);
        --signal-hi: oklch(84% 0.08 240);
        --violet: oklch(62% 0.16 300);
        --violet-hi: oklch(75% 0.11 300);
        --danger: oklch(72% 0.16 25);
    }
}