@property --logo-glow-breath { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --logo-glow-boost { syntax: '<number>'; inherits: true; initial-value: 1; }

:root {
    
    
    --color-bg-page: #F5F6FA;
    --color-bg-card: #FFFFFF;
    --color-bg-card-2: #F7F8FB;
    --color-bg-header: #FFFFFF;
    --color-bg-header-2: #FFFFFF;          
    --color-bg-sidebar: #1F2937;
    --color-bg-sidebar-2: #1F2937;
    --color-bg-footer: #FFFFFF;
    --color-bg-page-soft: #F5F6FA;
    --color-bg-tag: #F0F1F3;
    --color-bg-tag-hover: #E8E9ED;
    
    --color-cat-bg: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --color-cat-fg: color-mix(in srgb, var(--color-accent) 70%, var(--color-text-title));
    --color-cat-border: color-mix(in srgb, var(--color-accent) 30%, transparent);
    --color-cat-glow: 0 0 10px color-mix(in srgb, var(--color-accent) 45%, transparent);
    
    --color-tag-edition: #9333ea;
    --color-tag-edition-glow: 0 0 10px color-mix(in srgb, #9333ea 45%, transparent);
    --color-tag-size: #555555;
    --color-tag-size-glow: 0 0 10px color-mix(in srgb, #555555 45%, transparent);
    
    --color-badge-gold-deep: #7a4a00;
    
    --logo-glow-color: #f5b70a;      
    
    --logo-glow-blur-base: 9px;
    --logo-glow-blur-peak: 12px;
    --logo-glow-alpha-base: .42;     
    --logo-glow-alpha-peak: .50;
    --logo-glow-blur: var(--logo-glow-blur-base);
    --logo-glow-alpha: var(--logo-glow-alpha-base);
    
    --logo-glow-breath: 0;
    --logo-glow-boost: 1;
    
    --color-text-title: #1f2937;
    --color-text-primary: #374151;
    --color-text-secondary: #6b7280;
    --color-text-dim: #9ca3af;
    --color-text-invert: #FFFFFF;
    --color-accent-ink: #FFFFFF;           
    
    --color-on-accent: #FFFFFF;
    
    --color-accent: #3B82F6;
    --color-accent-hover: #2563EB;
    --color-accent-dark: #1D4ED8;
    --color-accent-soft: rgba(59,130,246,0.12);
    --color-accent-gradient: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-border-mid: #d1d5db;
    --color-border-soft: var(--color-border);   
    --color-border-width: 1px;
    
    --color-nav-link: #374151;
    --color-nav-link-hover: #3B82F6;
    --color-nav-link-active: #2563EB;
    
    --color-sidebar-text: #cbd5e1;
    --color-sidebar-text-dim: #9ca3af;
    --color-sidebar-hover: rgba(59,130,246,0.12);
    --color-sidebar-active-bg: rgba(59,130,246,0.12);
    --color-sidebar-active-text: #1D4ED8;
    --color-sidebar-border: #374151;
    
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 14px;
    --font-size-title: 20px;
    --font-line-height: 1.6;
    
    --font-weight-base: 500;
    
    --radius-card: 12px;
    --radius-sm: 8px;
    --main-radius: 14px;                   
    
    --main-shadow: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    
    --icon-shadow: 0 2px 8px rgba(0,0,0,0.16);
    --main-shadow-hover: 0 8px 24px rgba(0,0,0,0.15);
    
    --gap-block: 20px;
    
    --color-danger: #EF4444;
    --color-warning: #F59E0B;
    --color-warning-ink: #1F2937;   
    --color-success: #22C55E;
    
    --warning: var(--color-warning);
    --warning-soft: color-mix(in srgb, var(--color-warning) 16%, transparent);
    --blue: #3b82f6; 
    --green: var(--color-success);
    --amber: var(--color-warning);
    --orange: #f97316; 
    --red: var(--color-danger);
    
    --color-info: #2563eb;
    
    --color-lifetime-bg: #0B0E1A;
    --color-lifetime-bg-2: #241A08;
    
    --color-lifetime-gold: #e8c46a;
    
    --color-gold-tan: #d4af6a;
    
    --color-bg-input: var(--color-bg-card);
    --color-bg-soft: var(--color-bg-page-soft);
    --color-text-body: var(--color-text-primary);
    
    --overlay: rgba(0,0,0,.55);
    --overlay-soft: rgba(0,0,0,.45);
    
    --color-onwhite-bg: #ffffff;
    --color-onwhite-dim: #6b7280;        
    --color-onwhite-text: #0b0f14;       
    --color-onwhite-danger: #b91c1c;     
}

[data-theme="dark"] {
    
    
    --color-bg-page: #0B0E1A;
    --color-bg-card: #1A2234;
    --color-bg-card-2: #1F2937;
    --color-bg-header: #0B0E1A;
    --color-bg-header-2: var(--color-bg-card);
    --color-bg-sidebar: #1A2234;
    --color-bg-sidebar-2: #1F2937;
    --color-bg-footer: #0B0E1A;
    --color-bg-page-soft: #1A2234;
    --color-bg-tag: #1F2937;
    --color-bg-tag-hover: #243044;
    
    --color-cat-bg: color-mix(in srgb, var(--color-accent) 18%, transparent);
    --color-cat-fg: color-mix(in srgb, var(--color-accent) 90%, var(--color-text-title));
    --color-cat-border: color-mix(in srgb, var(--color-accent) 40%, transparent);
    --color-cat-glow: 0 0 10px color-mix(in srgb, var(--color-accent) 45%, transparent);
    
    --logo-glow-alpha-base: .62;
    --logo-glow-alpha-peak: .72;
    --logo-glow-blur-base: 13px;
    --logo-glow-blur-peak: 17px;
    
    --color-text-title: #E5E7EB;
    --color-text-primary: #D1D5DB;
    --color-text-secondary: #9CA3AF;
    --color-text-dim: #6B7280;
    --color-text-invert: #FFFFFF;
    --color-accent-ink: #0B0E1A;           
    
    --color-on-accent: var(--color-accent-ink);
    
    --color-accent: #6FB5E4;
    --color-accent-hover: #8CC5EF;
    --color-accent-dark: #5299C6;
    --color-accent-soft: rgba(111,181,228,0.16);
    --color-accent-gradient: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    
    --color-border: #2A3346;
    --color-border-strong: #374151;
    --color-border-mid: #374151;
    --color-border-width: 1px;
    
    --color-nav-link: #E5E7EB;
    --color-nav-link-hover: #6FB5E4;
    --color-nav-link-active: #6FB5E4;
    
    --color-sidebar-text: #D1D5DB;
    --color-sidebar-text-dim: #9CA3AF;
    --color-sidebar-hover: #243044;
    --color-sidebar-active-bg: rgba(111,181,228,0.16);
    --color-sidebar-active-text: #93CBF0;
    --color-sidebar-border: #2A3346;
    
    --color-danger: #EF4444;
    --color-warning: #F59E0B;
    --color-warning-ink: #1F2937;
    --color-success: #22C55E;
    
    --color-info: #3b82f6;
    
    --color-lifetime-bg: #0B0E1A;
    --color-lifetime-bg-2: #241A08;
    
    --color-lifetime-gold: #e8c46a;
    
    --main-shadow: 0 4px 16px rgba(0,0,0,0.30);
    --main-shadow-hover: 0 8px 24px rgba(0,0,0,0.30);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    
    --icon-shadow: 0 2px 8px rgba(0,0,0,0.45);
    --overlay: rgba(0,0,0,.7);
    
    --color-bg-input: var(--color-bg-card);
    --color-bg-soft: var(--color-bg-card-2);
    --color-text-body: var(--color-text-primary);
    
}


:root {
    
    --mc-radius-full: 9999px;

    
    --mc-gap-xs: 4px;
    --mc-gap-sm: 8px;
    --mc-gap-md: 12px;
    --mc-gap-lg: 16px;
    --mc-gap-xl: 24px;
    --mc-gap-2xl: 32px;

    
    --mc-font-h1: 24px;
    --mc-font-h2: 20px;
    --mc-font-h3: 16px;
    --mc-font-body: 14px;
    --mc-font-small: 13px;
    --mc-font-tiny: 12px;

    
    --mc-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --mc-dur: 0.25s;
    --mc-dur-tab: 0.3s;

    
    --mc-tap: 44px;
}