/* ═══════════════════════════════════════════════════════════
   ArthaVix — Design Tokens (Base Variables)
   Standardized variables for colors, spacing, and shadows.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Colors ─────────────────────────────────────────── */
    --brand:          #7c3aed; /* Purple Brand */
    --brand-light:    #ede9fe;
    --brand-dark:     #6d28d9;
    --brand-soft:     #f3e8ff;
    
    --ink:            #0f172a; /* Slate 900 */
    --body:           #475569; /* Slate 600 */
    --muted:          #64748b; /* Slate 500 */
    --soft:           #f6f8fb;
    --panel:          #ffffff;
    
    --line:           rgba(124, 58, 237, 0.12);
    --line-light:     #e5e7eb;
    
    --success:        #10b981;
    --error:          #ef4444;
    --warning:        #f59e0b;
    --info:           #3b82f6;

    /* ── Spacing (8px Grid) ─────────────────────────────── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    /* ── Shadows & Radius ───────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.15);
    
    /* ── Typography ─────────────────────────────────────── */
    --font-main: "Poppins", system-ui, sans-serif;
}