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: #CBD5E1;
  --color-text-tertiary: rgba(255, 255, 255, 0.6);
  --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;
}

/* ============================================
   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);

// Additional common color mappings
$blue-dark: var(--color-brand);
$gold-light: var(--color-gold-light);
$gold-bg: var(--color-gold-bg);
$warm-white: var(--color-bg);
$white: var(--color-bg-card);
$text-muted: var(--color-text-tertiary);
$text-link: var(--color-text-link);
$text-gold: var(--color-text-gold);
$border-light: var(--color-border-light);
$shadow-card: var(--shadow-card);
$danger: var(--color-danger);
$danger-bg: var(--color-danger-bg);
$success: var(--color-success);
$success-bg: var(--color-success-bg);
$warning: var(--color-warning);
$warning-bg: var(--color-warning-bg);
$info: var(--color-info);
$info-bg: var(--color-info-bg);
$bg-input: var(--color-bg-input);
$bg-tag: var(--color-bg-tag);
$bg-card-hover: var(--color-bg-card-hover);
$brand-light: var(--color-brand-light);
$brand: var(--color-brand);