/* AthenaPlus design tokens
 * One source of truth for spacing / type / colour / shape / motion. Pages and
 * components should reach for these custom properties instead of hardcoded
 * values so the look stays consistent and is easy to retune from one file.
 */

:root {
    /* ---- Spacing scale (4px base) ------------------------------------ */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---- Type scale ------------------------------------------------- */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: 28px;
    --font-size-3xl: 34px;

    --line-tight: 1.25;
    --line-base: 1.5;
    --line-relaxed: 1.7;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;

    /* ---- Colour palette --------------------------------------------- */
    /* Neutrals */
    --color-bg: #f5f7fa;
    --color-surface: #ffffff;
    --color-surface-2: #f8f9fc;
    --color-border: #e4e8ee;
    --color-border-strong: #cdd5df;
    --color-text: #1a2334;
    --color-text-muted: #5f6b7c;
    --color-text-subtle: #8895a7;

    /* Brand */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: #e0ecff;
    --color-primary-fg: #ffffff;

    /* Status */
    --color-success: #16a34a;
    --color-success-soft: #dcfce7;
    --color-warning: #d97706;
    --color-warning-soft: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;
    --color-info: #0284c7;
    --color-info-soft: #e0f2fe;

    /* ---- Shape ------------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ---- Elevation -------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);

    /* ---- Layout ----------------------------------------------------- */
    --layout-sidebar-w: 240px;
    --layout-sidebar-w-collapsed: 64px;
    --layout-topbar-h: 56px;

    /* ---- Motion ----------------------------------------------------- */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 280ms;
    --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);

    /* ---- Z-index ----------------------------------------------------
       Off-canvas drawer pattern needs backdrop BELOW the sidebar so
       taps on nav links reach the sidebar instead of the dimmer. */
    --z-backdrop: 1035;
    --z-sidebar: 1040;
    --z-topbar: 1050;
    --z-dropdown: 1055;
    --z-modal: 1060;
}

/* Reduced-motion users get instant transitions */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
        --motion-slow: 0ms;
    }
}