num/client/styles/theme.scss

/* ============================================
   Theme System — CSS Custom Properties
   ============================================
   Two themes: dark (universe) and light (warm).
   Deep-cosmos pages (index/chart/payment/subscribe)
   always use dark palette via explicit page styles.
   All other pages use CSS variables below.
   ============================================ */

/* ----- Default: Dark Theme (Universe) ----- */
:root {
  // Backgrounds
  --color-bg: #0c0a1a;
  --color-bg-secondary: #120d28;
  --color-bg-tertiary: #0f0c1e;
  --color-bg-card: rgba(255, 255, 255, 0.06);
  --color-bg-card-hover: rgba(255, 255, 255, 0.1);
  --color-bg-input: rgba(255, 255, 255, 0.1);
  --color-bg-tag: rgba(255, 255, 255, 0.08);
  --color-bg-overlay: rgba(12, 10, 26, 0.85);

  // Text
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A0AEC0;
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-text-link: #60A5FA;
  --color-text-gold: #C9A84C;

  // Brand
  --color-brand: #1E3A5F;
  --color-brand-light: #2C5282;
  --color-gold: #C9A84C;
  --color-gold-bg: rgba(201, 168, 76, 0.15);
  --color-gold-light: #FEF3C7;

  // Borders
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.06);
  --color-border-focus: rgba(201, 168, 76, 0.5);

  // Status
  --color-success: #10b981;
  --color-success-bg: rgba(16, 185, 129, 0.15);
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(251, 191, 36, 0.15);
  --color-danger: #ef4444;
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-info: #3B82F6;
  --color-info-bg: rgba(59, 130, 246, 0.15);

  // UI Elements
  --color-tab-active: #1E3A5F;
  --color-tab-inactive: #A0AEC0;
  --color-nav-bg: #1E3A5F;
  --color-nav-text: #FFFFFF;
  --color-btn-primary: #1E3A5F;
  --color-btn-primary-text: #FFFFFF;
  --color-btn-gold: #C9A84C;
  --color-btn-gold-text: #1A1A2E;
  --color-badge-super: linear-gradient(135deg, #06b6d4, #0891b2);
  --color-badge-practitioner: linear-gradient(135deg, #7c3aed, #6d28d9);
  --color-badge-vip: linear-gradient(135deg, #C9A84C, #A0843C);

  // Typography
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 24px;
  --font-2xl: 32px;

  // Spacing
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  // Border radius
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  // Shadows
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: var(--shadow-card);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-btn: 0 4px 15px rgba(30, 58, 95, 0.4);
  --shadow-gold: 0 4px 15px rgba(201, 168, 76, 0.3);

  // Z-index
  --z-tabbar: 100;
  --z-navbar: 90;
  --z-modal: 200;
  --z-toast: 300;

  // Transitions
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ----- Light Theme (Warm) ----- */
[data-theme="light"] {
  --color-bg: #F8F6F1;
  --color-bg-secondary: #F0EDE6;
  --color-bg-tertiary: #E8E5DE;
  --color-bg-card: #FFFFFF;
  --color-bg-card-hover: #F7F8FC;
  --color-bg-input: #F3F4F6;
  --color-bg-tag: #F3F4F6;
  --color-bg-overlay: rgba(248, 246, 241, 0.9);

  --color-text-primary: #1A1A2E;
  --color-text-secondary: #4A5568;
  --color-text-tertiary: #9CA3AF;
  --color-text-link: #2563EB;
  --color-text-gold: #92400E;

  --color-brand: #1E3A5F;
  --color-brand-light: #1E3A5F;
  --color-gold: #C9A84C;
  --color-gold-bg: #FEF3C7;
  --color-gold-light: #FEF3C7;

  --color-border: #E2E8F0;
  --color-border-light: #F3F4F6;
  --color-border-focus: rgba(201, 168, 76, 0.6);

  --color-success: #059669;
  --color-success-bg: #D1FAE5;
  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;
  --color-danger: #DC2626;
  --color-danger-bg: #FEE2E2;
  --color-info: #2563EB;
  --color-info-bg: #DBEAFE;

  --color-tab-active: #1E3A5F;
  --color-tab-inactive: #A0AEC0;
  --color-nav-bg: #1E3A5F;
  --color-nav-text: #FFFFFF;
  --color-btn-primary: #1E3A5F;
  --color-btn-primary-text: #FFFFFF;
  --color-btn-gold: #C9A84C;
  --color-btn-gold-text: #1A1A2E;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-btn: 0 4px 12px rgba(30, 58, 95, 0.2);
  --shadow-gold: 0 4px 12px rgba(201, 168, 76, 0.2);
}

/* ============================================
   Number Energy Colors (single source of truth)
   ============================================ */
$num-colors: (
  1: #D94A4A,
  2: #4A90D9,
  3: #E8A238,
  4: #2D8B67,
  5: #D4A017,
  6: #7B6FA0,
  7: #4A6FA5,
  8: #C9A84C,
  9: #B85C3A
);

@function num-color($n) {
  @return map-get($num-colors, $n);
}

// Export as CSS custom properties for JS access
:root {
  --num-1: #D94A4A;
  --num-2: #4A90D9;
  --num-3: #E8A238;
  --num-4: #2D8B67;
  --num-5: #D4A017;
  --num-6: #7B6FA0;
  --num-7: #4A6FA5;
  --num-8: #C9A84C;
  --num-9: #B85C3A;
}

/* ============================================
   SCSS Variable Mapping (backward compatibility)
   New code should use var(--xxx) directly.
   ============================================ */
$primary-color: var(--color-brand);
$success-color: var(--color-success);
$warning-color: var(--color-warning);
$danger-color: var(--color-danger);
$text-primary: var(--color-text-primary);
$text-secondary: var(--color-text-secondary);
$bg-color: var(--color-bg);
$bg-color-secondary: var(--color-bg-secondary);
$card-bg: var(--color-bg-card);
$border-color: var(--color-border);
$gold: var(--color-gold);
$font-xs: var(--font-xs);
$font-sm: var(--font-sm);
$font-base: var(--font-base);
$font-lg: var(--font-lg);
$font-xl: var(--font-xl);
$radius-sm: var(--radius-sm);
$radius-md: var(--radius-md);
$radius-lg: var(--radius-lg);
$radius-full: var(--radius-full);
$shadow-sm: var(--shadow-sm);
$shadow-md: var(--shadow-md);
$shadow-lg: var(--shadow-card);