/* ============================================
   SIA DESIGN CENTER — Design Tokens v0.1.0
   Part of the Shilpkar AI Ecosystem
   ============================================
   
   These tokens define the visual DNA of every
   app in the ecosystem:
   - Sia OS
   - Shilpkar
   - AptiQuiz
   - SwingLab Global
   
   Import this file in any project to inherit
   the full SIA design language.
   ============================================ */

:root {
    /* ============================================
       COLORS — Premium, calm, trustworthy
       ============================================ */
    
    /* Primary — Indigo: intelligence, depth, trust */
    --sia-primary: #4F46E5;
    --sia-primary-hover: #4338CA;
    --sia-primary-light: #EEF2FF;
    --sia-primary-dark: #3730A3;
    
    /* Secondary — Sky Blue: clarity, openness */
    --sia-secondary: #0EA5E9;
    --sia-secondary-hover: #0284C7;
    --sia-secondary-light: #E0F2FE;
    
    /* Accent — Emerald: success, growth, active */
    --sia-accent: #10B981;
    --sia-accent-hover: #059669;
    --sia-accent-light: #ECFDF5;
    
    /* Status Colors — matching your ecosystem */
    --sia-success: #22C55E;
    --sia-success-glow: #22C55E66;
    --sia-warning: #EAB308;
    --sia-warning-glow: #EAB30866;
    --sia-danger: #EF4444;
    --sia-danger-glow: #EF444466;
    --sia-info: #3B82F6;
    
    /* Agent Colors — from Trinity Dashboard */
    --sia-agent-sia: #00D4FF;      /* Sia Memory */
    --sia-agent-partner: #7B2FFC;  /* Partner AI */
    --sia-agent-aider: #FF6B6B;    /* Aider Executor */
    
    /* Neutral Scale — Slate */
    --sia-neutral-50: #F8FAFC;
    --sia-neutral-100: #F1F5F9;
    --sia-neutral-200: #E2E8F0;
    --sia-neutral-300: #CBD5E1;
    --sia-neutral-400: #94A3B8;
    --sia-neutral-500: #64748B;
    --sia-neutral-600: #475569;
    --sia-neutral-700: #334155;
    --sia-neutral-800: #1E293B;
    --sia-neutral-900: #0F172A;
    
    /* Absolute */
    --sia-white: #FFFFFF;
    --sia-black: #000000;
    
    /* ============================================
       TYPOGRAPHY
       ============================================ */
    
    /* Font Families */
    --sia-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sia-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    
    /* Font Sizes */
    --sia-text-xs: 0.75rem;      /* 12px */
    --sia-text-sm: 0.875rem;     /* 14px */
    --sia-text-base: 1rem;       /* 16px */
    --sia-text-lg: 1.125rem;     /* 18px */
    --sia-text-xl: 1.25rem;      /* 20px */
    --sia-text-2xl: 1.5rem;      /* 24px */
    --sia-text-3xl: 1.875rem;    /* 30px */
    --sia-text-4xl: 2.25rem;     /* 36px */
    
    /* Font Weights */
    --sia-weight-normal: 400;
    --sia-weight-medium: 500;
    --sia-weight-semibold: 600;
    --sia-weight-bold: 700;
    
    /* Line Heights */
    --sia-leading-tight: 1.25;
    --sia-leading-normal: 1.5;
    --sia-leading-relaxed: 1.75;
    
    /* Letter Spacing */
    --sia-tracking-tight: -0.02em;
    --sia-tracking-normal: 0;
    --sia-tracking-wide: 0.05em;
    
    /* ============================================
       SPACING — 4px base grid
       ============================================ */
    --sia-space-1: 0.25rem;      /* 4px */
    --sia-space-2: 0.5rem;       /* 8px */
    --sia-space-3: 0.75rem;      /* 12px */
    --sia-space-4: 1rem;         /* 16px */
    --sia-space-5: 1.25rem;      /* 20px */
    --sia-space-6: 1.5rem;       /* 24px */
    --sia-space-8: 2rem;         /* 32px */
    --sia-space-10: 2.5rem;      /* 40px */
    --sia-space-12: 3rem;        /* 48px */
    --sia-space-16: 4rem;        /* 64px */
    --sia-space-20: 5rem;        /* 80px */
    --sia-space-24: 6rem;        /* 96px */
    
    /* ============================================
       BORDERS & RADIUS
       ============================================ */
    --sia-radius-sm: 0.375rem;   /* 6px */
    --sia-radius-md: 0.5rem;     /* 8px */
    --sia-radius-lg: 0.75rem;    /* 12px */
    --sia-radius-xl: 1rem;       /* 16px */
    --sia-radius-full: 9999px;
    
    --sia-border-width: 1px;
    --sia-border-color: var(--sia-neutral-200);
    
    /* ============================================
       SHADOWS — Subtle depth, not heavy
       ============================================ */
    --sia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sia-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --sia-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --sia-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    
    /* Glow — for status indicators (from your ecosystem) */
    --sia-glow-success: 0 0 10px var(--sia-success-glow);
    --sia-glow-warning: 0 0 10px var(--sia-warning-glow);
    --sia-glow-danger: 0 0 10px var(--sia-danger-glow);
    
    /* ============================================
       TRANSITIONS
       ============================================ */
    --sia-transition-fast: 150ms ease;
    --sia-transition-normal: 250ms ease;
    --sia-transition-slow: 350ms ease;
    
    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --sia-z-base: 0;
    --sia-z-dropdown: 100;
    --sia-z-sticky: 200;
    --sia-z-modal: 300;
    --sia-z-toast: 400;
    --sia-z-tooltip: 500;
    
    /* ============================================
       LAYOUT
       ============================================ */
    --sia-container-max: 1280px;
    --sia-container-padding: var(--sia-space-6);
}