/* ============================================================
   0724 Client Area — Design Tokens (Phase 1)
   Source of truth: 0724_Cursor_UX_Reference_Pack / main-site-reference/style.css
   Compact application UI — not a marketing page.
   ============================================================ */

:root {
    /* Live 0724.co.za palette */
    --bg: #070b12;
    --surface: #0c1220;
    --surface2: #101828;
    --border: #192038;
    --border-l: #22305a;
    --cyan: #00d4ff;
    --cyan-dim: #00a8cc;
    --cyan-glow: rgba(0, 212, 255, 0.11);
    --cyan-border: rgba(0, 212, 255, 0.22);
    --text: #cfe0f0;
    --muted: #6a7a9a;
    --muted2: #8090b0;
    --white: #ffffff;
    --green: #22c55e;
    --orange: #f97316;
    --red: #ef4444;

    --sans: "Space Grotesk", sans-serif;
    --mono: "JetBrains Mono", monospace;

    --r: 10px;
    --r-lg: 16px;
    --r-sm: 8px;

    /* App shell (denser than public site nav-h: 72px) */
    --cx-nav-h: 64px;
    --cx-topbar-h: 40px;
    --cx-container: 1200px;
    --cx-container-pad: clamp(1rem, 3vw, 1.5rem);
    --cx-radius: var(--r);
    --cx-radius-lg: var(--r-lg);
    --cx-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --cx-focus: 0 0 0 3px var(--cyan-glow);

    /* Status semantics (chip / alert accents — cyan remains primary action) */
    --cx-success: var(--green);
    --cx-warning: var(--orange);
    --cx-danger: var(--red);
    --cx-info: var(--cyan);

    /* Legacy aliases used by custom.css — keep existing rules working */
    --bg-0724: var(--bg);
    --surface-0724: var(--surface);
    --surface2-0724: var(--surface2);
    --border-0724: var(--border);
    --border-l-0724: var(--border-l);
    --cyan-0724: var(--cyan);
    --cyan-dim-0724: var(--cyan-dim);
    --cyan-glow-0724: var(--cyan-glow);
    --cyan-border-0724: var(--cyan-border);
    --text-0724: var(--text);
    --muted-0724: var(--muted);
    --muted2-0724: var(--muted2);
    --white-0724: var(--white);
    --green-0724: var(--green);
    --orange-0724: var(--orange);
    --red-0724: var(--red);

    --font-primary: var(--sans);
    --font-mono: var(--mono);
    --rounding-sm: var(--r-sm);
    --rounding-md: var(--r);
    --rounding-lg: var(--r-lg);

    /* WHMCS semantic bridges already referenced in custom.css */
    --primary: var(--cyan);
    --primary-lifted: var(--cyan-dim);
    --primary-accented: var(--cyan-dim);
    --primary-50: rgba(0, 212, 255, 0.05);
    --primary-100: var(--cyan-glow);
    --primary-200: var(--cyan-border);
    --primary-300: var(--cyan-dim);
    --primary-400: #00c4ec;
    --primary-500: var(--cyan);
    --primary-600: var(--cyan);
    --primary-700: #33dcff;
    --success: var(--green);
    --warning: #f59e0b;
    --error: var(--red);
    --info: var(--cyan);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --cx-motion: 0ms;
    }
}