/* ============================================
   CRAFASY - Design Tokens
   ============================================ */

:root {
    /* Primary Colors */
    --color-purple: #6C5CE7;
    --color-purple-dark: #5849c7;
    --color-cyan: #00D4FF;
    --color-gold: #FFD700;
    --color-orange: #FFA500;
    --color-red: #ff6b6b;

    /* Background Colors */
    --color-bg-darkest: #0A0E27;
    --color-bg-card: #1A1F3A;
    --color-bg-input: #2A2F4A;
    --color-bg-light: #F8F9FA;
    --color-bg-white: #fff;

    /* Text Colors */
    --color-text-white: #fff;
    --color-text-muted: #9CA3AF;
    --color-text-light: #ccc;
    --color-text-dark: #333;
    --color-text-gray: #666;

    /* Status Colors */
    --color-success: #28a745;
    --color-danger: #ff0000;
    --color-danger-hover: #cc0000;
    --color-warning: #FFA500;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6C5CE7 0%, #00D4FF 100%);
    --gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --gradient-hero: linear-gradient(135deg, #00D4FF 0%, #6C5CE7 50%, #FF6B6B 100%);
    --gradient-dark: linear-gradient(135deg, #0A0E27 0%, #1A1F3A 100%);

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-pill: 50px;

    /* Shadows */
    --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 10px 20px rgba(108, 92, 231, 0.3);
    --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.08);
    --shadow-btn: 0 4px 15px rgba(108, 92, 231, 0.3);

    /* Transitions */
    --transition: all 0.3s;
}