num/client/uni.scss

/* ============================================
   uni.scss — Global SCSS Variables
   
   All colors are now CSS custom properties
   defined in styles/theme.scss.
   Only structural tokens remain here.
   ============================================ */

/* -------- Theme System (inlined from styles/theme.scss) -------- */
/* Two themes: dark (universe) and light (warm).                  */
/* Deep-cosmos pages (index/chart/payment/subscribe)              */
/* use explicit dark palette. All others use CSS vars below.      */
/* ============================================================== */

/* Default: Dark Theme (Universe) */
:root {
  --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);
  --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;
  --color-brand: #1E3A5F;
  --color-brand-light: #2C5282;
  --color-gold: #C9A84C;
  --color-gold-bg: rgba(201, 168, 76, 0.15);
  --color-gold-light: #FEF3C7;
  --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);
  --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);
  --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);
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 24px;
  --font-2xl: 32px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --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-tabbar: 100;
  --z-navbar: 90;
  --z-modal: 200;
  --z-toast: 300;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ===== Theme Classes for Class-Based Theming ===== */
/* Applied to page root elements via :class="themeClass" */
.theme-dark {
  --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);
  --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;
  --color-brand: #1E3A5F;
  --color-brand-light: #1E3A5F;
  --color-elevated: #172943;
  --color-gold: #C9A84C;
  --color-gold-bg: rgba(201, 168, 76, 0.15);
  --color-gold-light: #FEF3C7;
  --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);
  --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);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --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);
}

.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-elevated: #2C5282;
  --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;
  --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 */
$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);
}

: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 compat — new code: use var(--xxx)) */
$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);

/* Spacing (unchanged) */
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: var(--spacing-md);
$spacing-lg: var(--spacing-lg);
$spacing-xl: var(--spacing-xl);