/* ====================================
   VELORA COZY COSMIC DESIGN TOKENS
   Design System 2.0 - Cozy Cosmic Studio
   ==================================== */

:root {
    /* ========================================
       BACKGROUND COLORS
       ======================================== */
    
    --bg-page: #f5f3ff;        /* Very light lavender */
    --bg-surface: #ffffff;
    --bg-surface-soft: #f3eefc;
    
    /* ========================================
       PRIMARY COSMIC COLORS
       ======================================== */
    
    --primary-600: #5b3fd9;
    --primary-500: #7b5cff;
    --primary-100: #ebe4ff;
    
    /* ========================================
       ACCENT COLORS (Love / Highlights)
       ======================================== */
    
    --accent-500: #f973c5;
    --accent-100: #ffe4f4;
    
    /* ========================================
       TEXT COLORS
       ======================================== */
    
    --text-strong: #151022;    /* For headings and important text */
    --text-default: #2a203f;   /* For body text */
    --text-soft: #6b6288;      /* For subheadings and secondary text */
    --text-muted: #9a92b5;     /* For disclaimers, labels, meta info */
    
    /* ========================================
       BORDER & DIVIDER COLORS
       ======================================== */
    
    --border-subtle: #e0d6ff;
    --border-strong: #c5b5ff;
    
    /* ========================================
       ELEMENT COLORS (Astrological)
       ======================================== */
    
    --elem-fire: #ff6b6b;
    --elem-earth: #68a36f;
    --elem-air: #4eaadf;
    --elem-water: #6c7bff;
    
    /* ========================================
       SPACING SCALE
       ======================================== */
    
    --space-xs: 0.5rem;    /* 8px */
    --space-s: 0.75rem;    /* 12px */
    --space-m: 1rem;       /* 16px */
    --space-l: 1.5rem;     /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-xxl: 3rem;     /* 48px */
    
    /* ========================================
       SHADOWS
       ======================================== */
    
    --shadow-soft: 0 18px 45px rgba(16, 12, 40, 0.08);
    
    /* ========================================
       BORDER RADIUS
       ======================================== */
    
    --radius-card: 16px;
    --radius-button: 999px;  /* Pills */
    --radius-input: 12px;
    
    /* ========================================
       TRANSITIONS
       ======================================== */
    
    --transition-base: 0.18s ease;
    --transition-fast: 0.12s ease;
}

/* ========================================
   DARK MODE TOKENS
   ======================================== */

[data-theme="dark"] {
    --bg-page: #050616;
    --bg-surface: #0b0f26;
    --bg-surface-soft: #151829;
    
    --text-strong: #f9f6ff;
    --text-default: #e8e4f0;
    --text-soft: #b8b0d0;
    --text-muted: #8a7fa8;
    
    --border-subtle: #2a2340;
    --border-strong: #3d3255;
    
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.3);
}

/* ========================================
   LEGACY VARIABLE MAPPINGS
   For backward compatibility with existing code
   ======================================== */

:root {
    /* Map to existing --velora-* variables */
    --velora-bg-page: var(--bg-page);
    --velora-bg-surface: var(--bg-surface);
    --velora-bg-surface-soft: var(--bg-surface-soft);
    
    --velora-primary-600: var(--primary-600);
    --velora-primary-500: var(--primary-500);
    --velora-primary-100: var(--primary-100);
    
    --velora-accent-500: var(--accent-500);
    --velora-accent-100: var(--accent-100);
    
    --velora-text-strong: var(--text-strong);
    --velora-text-default: var(--text-default);
    --velora-text-soft: var(--text-soft);
    --velora-text-muted: var(--text-muted);
    
    --velora-border-subtle: var(--border-subtle);
    --velora-border-strong: var(--border-strong);
    
    --velora-elem-fire: var(--elem-fire);
    --velora-elem-earth: var(--elem-earth);
    --velora-elem-air: var(--elem-air);
    --velora-elem-water: var(--elem-water);
    
    --velora-shadow-soft: var(--shadow-soft);
    
    --velora-radius-card: var(--radius-card);
    --velora-radius-button: var(--radius-button);
}