/**
 * ASAP Cloud Design Tokens 1.0.0
 * Canonical source for WordPress and WHMCS.
 * Generated copies must be refreshed with scripts/sync-design-system.ps1.
 */

:root {
    color-scheme: light;

    /* Brand */
    --asap-color-navy-950: #031b33;
    --asap-color-navy-900: #05294c;
    --asap-color-navy-800: #073b68;
    --asap-color-primary-700: #075985;
    --asap-color-primary-600: #0877b5;
    --asap-color-primary-500: #0b8acb;
    --asap-color-cyan-700: #087e8b;
    --asap-color-cyan-500: #19b8d4;
    --asap-color-cyan-300: #73e4ef;
    --asap-color-lime-500: #a9bc16;
    --asap-color-lime-400: #c4d92f;
    --asap-color-lime-200: #e8f09a;

    /* Neutral scale */
    --asap-color-neutral-0: #ffffff;
    --asap-color-neutral-50: #f8fafc;
    --asap-color-neutral-100: #f1f5f9;
    --asap-color-neutral-200: #e2e8f0;
    --asap-color-neutral-300: #cbd5e1;
    --asap-color-neutral-400: #94a3b8;
    --asap-color-neutral-500: #64748b;
    --asap-color-neutral-600: #475569;
    --asap-color-neutral-700: #334155;
    --asap-color-neutral-800: #1e293b;
    --asap-color-neutral-900: #0f172a;
    --asap-color-neutral-950: #020617;

    /* Semantic color */
    --asap-color-success-700: #0f766e;
    --asap-color-success-100: #ccfbf1;
    --asap-color-warning-700: #8a4b00;
    --asap-color-warning-100: #fef3c7;
    --asap-color-danger-700: #b42318;
    --asap-color-danger-100: #fee4e2;
    --asap-color-info-700: #075985;
    --asap-color-info-100: #e0f2fe;

    /* Semantic roles */
    --asap-color-text: var(--asap-color-neutral-900);
    --asap-color-text-subtle: var(--asap-color-neutral-600);
    --asap-color-text-inverse: var(--asap-color-neutral-0);
    --asap-color-heading: var(--asap-color-navy-900);
    --asap-color-link: var(--asap-color-primary-700);
    --asap-color-link-hover: var(--asap-color-navy-900);
    --asap-color-border: var(--asap-color-neutral-200);
    --asap-color-border-strong: var(--asap-color-neutral-300);
    --asap-color-surface: var(--asap-color-neutral-0);
    --asap-color-surface-soft: var(--asap-color-neutral-50);
    --asap-color-surface-muted: var(--asap-color-neutral-100);
    --asap-color-surface-inverse: var(--asap-color-navy-950);
    --asap-color-focus: var(--asap-color-primary-700);

    /* Typography: one family, system fallback until Inter Latin is self-hosted */
    --asap-font-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --asap-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --asap-font-weight-regular: 400;
    --asap-font-weight-medium: 500;
    --asap-font-weight-semibold: 600;
    --asap-font-weight-bold: 700;
    --asap-font-weight-extrabold: 800;
    --asap-fs-xs: 0.75rem;
    --asap-fs-sm: 0.875rem;
    --asap-fs-base: 1rem;
    --asap-fs-md: 1.125rem;
    --asap-fs-lg: 1.25rem;
    --asap-fs-xl: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
    --asap-fs-2xl: clamp(1.75rem, 1.35rem + 1.2vw, 2.375rem);
    --asap-fs-3xl: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
    --asap-fs-4xl: clamp(2.75rem, 1.75rem + 3.4vw, 5rem);
    --asap-leading-tight: 1.1;
    --asap-leading-heading: 1.2;
    --asap-leading-body: 1.6;
    --asap-tracking-tight: -0.025em;
    --asap-tracking-normal: 0;
    --asap-tracking-wide: 0.08em;

    /* 4/8 spacing system */
    --asap-space-0: 0;
    --asap-space-1: 0.25rem;
    --asap-space-2: 0.5rem;
    --asap-space-3: 0.75rem;
    --asap-space-4: 1rem;
    --asap-space-5: 1.25rem;
    --asap-space-6: 1.5rem;
    --asap-space-8: 2rem;
    --asap-space-10: 2.5rem;
    --asap-space-12: 3rem;
    --asap-space-16: 4rem;
    --asap-space-20: 5rem;
    --asap-space-24: 6rem;
    --asap-space-section: clamp(4rem, 8vw, 7rem);

    /* Layout */
    --asap-container-sm: 45rem;
    --asap-container-md: 64rem;
    --asap-container-lg: 75rem;
    --asap-container-xl: 90rem;
    --asap-gutter: clamp(1rem, 3vw, 2rem);
    --asap-grid-columns: 12;
    --asap-breakpoint-xs: 22.5rem;
    --asap-breakpoint-sm: 48rem;
    --asap-breakpoint-md: 64rem;
    --asap-breakpoint-lg: 90rem;

    /* Shape, border, depth */
    --asap-radius-sm: 0.5rem;
    --asap-radius-md: 0.75rem;
    --asap-radius-lg: 1rem;
    --asap-radius-xl: 1.5rem;
    --asap-radius-2xl: 2rem;
    --asap-radius-pill: 999px;
    --asap-border-width: 1px;
    --asap-shadow-xs: 0 1px 2px rgba(3, 27, 51, 0.06);
    --asap-shadow-sm: 0 10px 30px rgba(3, 27, 51, 0.08);
    --asap-shadow-md: 0 18px 50px rgba(3, 27, 51, 0.12);
    --asap-shadow-lg: 0 24px 70px rgba(3, 27, 51, 0.16);
    --asap-shadow-focus: 0 0 0 3px rgba(7, 89, 133, 0.24);

    /* Motion */
    --asap-duration-fast: 150ms;
    --asap-duration-base: 200ms;
    --asap-duration-slow: 250ms;
    --asap-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --asap-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Layers */
    --asap-z-base: 0;
    --asap-z-dropdown: 100;
    --asap-z-sticky: 200;
    --asap-z-overlay: 300;
    --asap-z-modal: 400;
    --asap-z-toast: 500;

    /* Backwards-compatible aliases used by the current packages */
    --asap-navy-950: var(--asap-color-navy-950);
    --asap-navy-900: var(--asap-color-navy-900);
    --asap-navy-800: var(--asap-color-navy-800);
    --asap-blue-600: var(--asap-color-primary-600);
    --asap-cyan-500: var(--asap-color-cyan-500);
    --asap-cyan-300: var(--asap-color-cyan-300);
    --asap-lime-400: var(--asap-color-lime-400);
    --asap-ink-900: #0c2238;
    --asap-ink-700: #31485e;
    --asap-ink-500: #63778a;
    --asap-cloud-100: #eef5f9;
    --asap-cloud-50: #f7fafc;
    --asap-white: var(--asap-color-neutral-0);
    --asap-navy: #072f57;
    --asap-blue: #0a5f8d;
    --asap-cyan: #20a6c9;
    --asap-lime: #b6cc28;
    --asap-ink: #13263a;
    --asap-muted: #5e6d7c;
    --asap-border: #dce5ec;
    --asap-surface: var(--asap-color-neutral-0);
    --asap-soft: #f3f7fa;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --asap-duration-fast: 0.01ms;
        --asap-duration-base: 0.01ms;
        --asap-duration-slow: 0.01ms;
    }
}