/* ============================================================
   AppxSoft Customer Portal — Design Tokens
   Load order: tokens → legacy → base → layout → components → responsive → rtl
   Dark mode: override these variables under [data-theme="dark"] (future).
   ============================================================ */

:root {
    /* Brand */
    --appx-primary: #1f6f54;
    --appx-primary-hover: #185a44;
    --appx-primary-soft: rgba(31, 111, 84, 0.08);
    --appx-primary-contrast: #ffffff;

    /* Surfaces */
    --appx-background: #f4f6f8;
    --appx-surface: #ffffff;
    --appx-surface-alt: #f8fafc;

    /* Text */
    --appx-text: #1a2332;
    --appx-text-muted: #64748b;

    /* Lines */
    --appx-border: #e5e9ef;
    --appx-border-strong: #d5dbe3;

    /* Status */
    --appx-success: #16a34a;
    --appx-success-soft: rgba(22, 163, 74, 0.1);
    --appx-warning: #d97706;
    --appx-warning-soft: rgba(217, 119, 6, 0.12);
    --appx-danger: #dc2626;
    --appx-danger-soft: rgba(220, 38, 38, 0.1);
    --appx-info: #0284c7;
    --appx-info-soft: rgba(2, 132, 199, 0.1);

    /* Typography */
    --appx-font: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --appx-text-xs: 12px;
    --appx-text-sm: 13px;
    --appx-text-base: 14px;
    --appx-text-lg: 16px;
    --appx-text-xl: 20px;
    --appx-text-2xl: 24px;

    /* Shape */
    --appx-radius-sm: 8px;
    --appx-radius: 12px;
    --appx-radius-lg: 16px;

    /* Elevation (subtle only) */
    --appx-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --appx-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);

    /* Spacing scale */
    --appx-space-1: 4px;
    --appx-space-2: 8px;
    --appx-space-3: 12px;
    --appx-space-4: 16px;
    --appx-space-5: 20px;
    --appx-space-6: 24px;
    --appx-space-8: 32px;

    /* Layout metrics */
    --appx-header-h: 60px;
    --appx-sidebar-w: 264px;
    --appx-sidebar-w-collapsed: 72px;
    --appx-touch: 42px;

    /* Motion */
    --appx-transition: 160ms ease;
}

/* Dark mode scaffold (not activated yet — future-proofing only).
[data-theme="dark"] {
    --appx-background: #0f141a;
    --appx-surface: #171e26;
    --appx-surface-alt: #1d252f;
    --appx-text: #e6eaf0;
    --appx-text-muted: #94a3b8;
    --appx-border: #2a3340;
    --appx-border-strong: #3a4553;
} */