/* =============================================
   UI TOKENS — Stripe-like v1.1
   Timix Client Panel
   ============================================= */
:root {
    /* ── Colours ── */
    --bg: #F6F9FC;
    --surface: #FFFFFF;
    --surface-2: #F1F5F9;
    --border: #E6EBF1;

    --text: #0A2540;
    --text-2: #425466;
    --muted: #6B7C93;

    --sidebar: #0B1220;
    --sidebar-2: #111827;
    --sidebar-text: #E6EEF8;
    --sidebar-muted: #9FB3C8;

    --primary: #635BFF;
    --primary-hover: #5147FF;
    --danger: #E11D48;
    --success: #0E9F6E;
    --warning: #F59E0B;

    /* ── Radius ── */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;

    /* ── Shadows ── */
    --sh-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
    --sh-md: 0 14px 36px rgba(10, 37, 64, 0.12);

    /* ── Spacing ── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;

    /* ── Typography ── */
    --fs-1: 12px;
    --fs-2: 14px;
    --fs-3: 16px;
    --fs-4: 20px;
    --fs-5: 24px;
    --lh: 1.4;

    /* ── System ── */
    --ca-sidebar-w: 240px;
    --ca-header-h: 64px;
    --ca-ease: 0.15s ease;
    --ca-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Backward-compat aliases (ca-* → tokens) ── */
    --ca-primary: var(--primary);
    --ca-primary-hover: var(--primary-hover);
    --ca-primary-light: rgba(99, 91, 255, 0.10);
    --ca-success: var(--success);
    --ca-success-light: rgba(14, 159, 110, 0.10);
    --ca-danger: var(--danger);
    --ca-danger-light: rgba(225, 29, 72, 0.10);
    --ca-warning: var(--warning);
    --ca-warning-light: rgba(245, 158, 11, 0.10);
    --ca-info: #3B82F6;
    --ca-info-light: rgba(59, 130, 246, 0.10);
    --ca-bg: var(--bg);
    --ca-surface: var(--surface);
    --ca-surface-hover: var(--surface-2);
    --ca-sidebar-bg: var(--sidebar);
    --ca-sidebar-hover: var(--sidebar-2);
    --ca-sidebar-active: var(--primary);
    --ca-text-primary: var(--text);
    --ca-text-secondary: var(--muted);
    --ca-text-muted: var(--sidebar-muted);
    --ca-sidebar-text: var(--sidebar-text);
    --ca-border: var(--border);
    --ca-border-light: var(--surface-2);

    /* legacy names used in some routes */
    --color-surface: var(--surface);
    --color-border: var(--border);
    --color-primary: var(--primary);
    --color-danger: var(--danger);
    --color-success: var(--success);
    --color-surface-hover: var(--surface-2);
    --text-main: var(--text);
    --text-secondary: var(--muted);

    --radius-btn: var(--r-sm);
    --ca-radius: var(--r-sm);
    --ca-radius-sm: 6px;
    --ca-radius-lg: var(--r-lg);
}