/**
 * scirpolistudio.com Design System Tokens
 */

:root {
    /* Color Palette */
    --bg-primary: #0b0f19;
    --bg-secondary: #0f172a;
    --bg-tertiary: #1e293b;
    --bg-card: rgba(15, 23, 42, 0.75);
    
    --border-color: #1e293b;
    --border-color-hover: #334155;
    --border-color-focus: #38bdf8;
    
    /* Technical Text Color Variables */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-accent: #38bdf8; /* Tech teal/blue */
    
    /* Semantic Status Colors */
    --color-released: #10b981; /* green */
    --color-development: #38bdf8; /* blue */
    --color-experimental: #fbbf24; /* amber */
    --color-archived: #64748b; /* slate */
    --color-error: #ef4444; /* red */
    
    /* Layout and Spacing (Strict 8px grid) */
    --space-2: 4px;
    --space-4: 8px;
    --space-8: 16px;
    --space-12: 24px;
    --space-16: 32px;
    --space-24: 48px;
    --space-32: 64px;
    
    /* Borders & Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    /* Typography Styles */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
    
    /* Transitions & Motion */
    --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Layout boundaries */
    --max-width: 1200px;
    --sidebar-width: 260px;
    
    /* Focus Ring */
    --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-accent);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
    }
}