@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src:
        url("/fonts/inter/inter-latin-400-normal.woff2") format("woff2"),
        url("/fonts/inter/inter-latin-400-normal.woff") format("woff");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: block;
    src:
        url("/fonts/inter/inter-latin-500-normal.woff2") format("woff2"),
        url("/fonts/inter/inter-latin-500-normal.woff") format("woff");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: block;
    src:
        url("/fonts/inter/inter-latin-600-normal.woff2") format("woff2"),
        url("/fonts/inter/inter-latin-600-normal.woff") format("woff");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src:
        url("/fonts/inter/inter-latin-700-normal.woff2") format("woff2"),
        url("/fonts/inter/inter-latin-700-normal.woff") format("woff");
}

:root,
[data-ziony-theme="ziony-blue"] {
    color-scheme: light;

    /* Typography */
    --ziony-font-sans: "Inter", "Segoe UI", Arial, sans-serif;
    --ziony-font-size-page-title: clamp(1.75rem, 1.55rem + 0.55vw, 2.22rem);

    /* Brand and navigation */
    --ziony-color-primary: #1463ff;
    --ziony-color-primary-strong: #0754e8;
    --ziony-color-primary-disabled: #8fb3ef;
    --ziony-color-primary-rgb: 20, 99, 255;
    --ziony-color-primary-soft: #e8f0ff;
    --ziony-color-primary-soft-hover: #d8e6ff;
    --ziony-color-sidebar-start: #071a36;
    --ziony-color-sidebar-middle: #07346f;
    --ziony-color-sidebar-end: #032352;
    --ziony-color-sidebar-text: #d9e8ff;
    --ziony-color-sidebar-muted: #9fb6d8;
    --ziony-color-app-kicker: #33527d;

    /* Canvas and content */
    --ziony-color-canvas: #f6f8fc;
    --ziony-color-surface: #ffffff;
    --ziony-color-surface-subtle: #f9fbfe;
    --ziony-color-surface-hover: #f4f8ff;
    --ziony-color-text: #132039;
    --ziony-color-text-muted: #66758f;
    --ziony-color-border: #e1e7f0;
    --ziony-color-border-strong: #cfd9e7;

    /* Semantic accents */
    --ziony-color-success: #18885b;
    --ziony-color-success-rgb: 24, 136, 91;
    --ziony-color-success-soft: #edf8f3;
    --ziony-color-success-border: #b8e1cf;
    --ziony-color-warning: #d97706;
    --ziony-color-warning-rgb: 217, 119, 6;
    --ziony-color-warning-soft: #fff7e8;
    --ziony-color-warning-border: #f0d3a3;
    --ziony-color-danger: #dc3545;
    --ziony-color-danger-strong: #b4232f;
    --ziony-color-danger-soft: #fff1f2;
    --ziony-color-danger-border: #efbdc2;
    --ziony-color-info: #2e89e6;
    --ziony-color-info-soft: #edf5ff;
    --ziony-color-info-border: #bdd8f6;
    --ziony-color-neutral: #8794a8;
    --ziony-color-neutral-rgb: 135, 148, 168;
    --ziony-color-neutral-soft: #f1f4f8;
    --ziony-color-neutral-border: #d8e0ea;
    --ziony-color-accent-cyan: #0a89a6;
    --ziony-color-accent-cyan-rgb: 10, 137, 166;
    --ziony-color-accent-violet: #6e56cf;
    --ziony-color-accent-violet-rgb: 110, 86, 207;
    --ziony-color-accent-indigo: #3658c9;
    --ziony-color-accent-indigo-rgb: 54, 88, 201;
    --ziony-color-accent-rose: #d14e69;
    --ziony-color-accent-rose-rgb: 209, 78, 105;

    /* Section headers: approved muted category palette. */
    --ziony-color-section-customer: #c8acf2;
    --ziony-color-section-customer-text: #38204f;
    --ziony-color-section-delivery: #eeb285;
    --ziony-color-section-delivery-text: #54301d;
    --ziony-color-section-items: #9bcdc4;
    --ziony-color-section-items-text: #18463e;
    --ziony-color-section-shipments: #e99e9a;
    --ziony-color-section-shipments-text: #602c2d;
    --ziony-color-section-groups: #b8cbed;
    --ziony-color-section-groups-text: #263c64;
    --ziony-color-section-audit: #dce3ed;
    --ziony-color-section-audit-text: #34445b;

    /* Controls and overlays */
    --ziony-color-control: #ffffff;
    --ziony-color-control-hover: #f7faff;
    --ziony-color-control-disabled: #eef2f7;
    --ziony-color-control-placeholder: #8a98ad;
    --ziony-color-overlay: rgba(3, 17, 39, 0.52);
    --ziony-control-height: 2.7rem;
    --ziony-control-height-compact: 2.2rem;

    /* Data grids */
    --ziony-grid-header-surface: #f7f9fc;
    --ziony-grid-header-text: #53627a;
    --ziony-grid-row-divider: #edf1f6;
    --ziony-grid-row-hover: #f4f8ff;
    --ziony-grid-row-selected: #eaf2ff;
    --ziony-grid-state-overlay: rgba(248, 251, 255, 0.92);
    --ziony-grid-progress-track: #e7edf4;

    /* Focus, depth and shape */
    --ziony-focus-ring: 0 0 0 3px rgba(var(--ziony-color-primary-rgb), 0.2);
    --ziony-shadow-sm: 0 2px 8px rgba(28, 47, 82, 0.05);
    --ziony-shadow-md: 0 12px 28px rgba(23, 56, 111, 0.1);
    --ziony-shadow-lg: 0 18px 42px rgba(23, 56, 111, 0.14);
    --ziony-shadow-dialog: 0 28px 80px rgba(3, 20, 50, 0.24);
    --ziony-radius-sm: 0.5rem;
    --ziony-radius-md: 0.75rem;
    --ziony-radius-lg: 1rem;
    --ziony-radius-pill: 999px;

    /* Compact spacing scale */
    --ziony-space-1: 0.25rem;
    --ziony-space-2: 0.5rem;
    --ziony-space-3: 0.75rem;
    --ziony-space-4: 1rem;
    --ziony-space-5: 1.25rem;
    --ziony-space-6: 1.5rem;
    --ziony-space-8: 2rem;

    /* Shared application measurements */
    --ziony-sidebar-width: 252px;
    --ziony-sidebar-collapsed-width: 78px;
    --ziony-sidebar-mobile-compact-width: 66px;
    --ziony-topbar-height: 68px;

    /* Motion */
    --ziony-motion-fast: 160ms;
    --ziony-motion-base: 220ms;
    --ziony-motion-slow: 280ms;
    --ziony-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Compatibility aliases for the staged page migration. */
    --ziony-primary: var(--ziony-color-primary);
    --ziony-primary-hover: var(--ziony-color-primary-strong);
    --ziony-primary-disabled: var(--ziony-color-primary-disabled);
    --ziony-primary-rgb: var(--ziony-color-primary-rgb);
    --ziony-primary-soft: var(--ziony-color-primary-soft);
    --ziony-primary-soft-hover: var(--ziony-color-primary-soft-hover);
    --ziony-text-strong: var(--ziony-color-text);
}

@media (prefers-reduced-motion: reduce) {
    :root,
    [data-ziony-theme="ziony-blue"] {
        --ziony-motion-fast: 0.01ms;
        --ziony-motion-base: 0.01ms;
        --ziony-motion-slow: 0.01ms;
    }
}