:root {
  /* ==========================================================================
     UX-Deck Unified Design Tokens
     Shared across mkdocs-life, GoogleAlertManager, YoutubeAudio.Fetch,
     mkdocs-investment, and HomeAssistant (Android TV).
     ========================================================================== */

  /* Spacing Scale (8pt grid system with 4pt half-steps) */
  --ux-space-2xs: 4px;
  --ux-space-xs:  8px;
  --ux-space-sm:  12px;
  --ux-space-md:  16px;
  --ux-space-lg:  24px;
  --ux-space-xl:  32px;
  --ux-space-2xl: 48px;
  --ux-space-3xl: 64px;

  /* Typography Scale & Project-Specific Font Stacks */
  --ux-font-sans: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --ux-font-editorial: "Noto Serif TC", "Newsreader", "Merriweather", "Songti TC", Georgia, serif;
  --ux-font-display: "Plus Jakarta Sans", "Noto Sans TC", sans-serif;
  --ux-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ux-font-serif: var(--ux-font-editorial);

  --ux-text-xs:   0.75rem;    /* 12px */
  --ux-text-sm:   0.875rem;   /* 14px */
  --ux-text-base: 1rem;       /* 16px */
  --ux-text-lg:   1.125rem;   /* 18px */
  --ux-text-xl:   1.25rem;    /* 20px */
  --ux-text-2xl:  1.5rem;     /* 24px */
  --ux-text-3xl:  1.875rem;   /* 30px */
  --ux-text-4xl:  2.25rem;    /* 36px */
  --ux-text-tv:   2.5rem;     /* 40px - 10-foot UI glanceable */

  --ux-line-tight:  1.2;
  --ux-line-normal: 1.5;
  --ux-line-relaxed: 1.7;

  /* Border Radii */
  --ux-radius-sm:  6px;
  --ux-radius-md:  10px;
  --ux-radius-lg:  16px;
  --ux-radius-xl:  24px;
  --ux-radius-full: 9999px;

  /* Elevation Shadows */
  --ux-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ux-shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.08), 0 1px 3px -1px rgba(0, 0, 0, 0.05);
  --ux-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
  --ux-shadow-lg: 0 10px 24px -4px rgba(0, 0, 0, 0.16), 0 4px 10px -3px rgba(0, 0, 0, 0.08);
  --ux-shadow-xl: 0 20px 32px -8px rgba(0, 0, 0, 0.22), 0 8px 16px -4px rgba(0, 0, 0, 0.12);
  --ux-shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* Transitions & Animation Easing */
  --ux-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ux-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ux-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ux-duration-fast: 150ms;
  --ux-duration-normal: 250ms;
  --ux-duration-slow: 400ms;

  /* Shared Semantic Status Colors */
  --ux-color-success: #10b981;
  --ux-color-warning: #f59e0b;
  --ux-color-danger:  #ef4444;
  --ux-color-info:    #3b82f6;

  /* ==========================================================================
     Project Specific Accent Profiles (Consistency + Differentiation)
     ========================================================================== */

  /* 1. mkdocs-life (Warm Editorial & Mindful Journal) */
  --ux-life-primary:       #0d9488;  /* Deep Sage / Teal */
  --ux-life-primary-hover: #0f766e;
  --ux-life-surface:       #faf8f5;  /* Warm paper / cream */
  --ux-life-surface-card:  #ffffff;
  --ux-life-accent:        #e07a5f;  /* Terracotta */
  --ux-life-text:          #292524;  /* Warm Charcoal */
  --ux-life-text-muted:    #78716c;

  /* 2. GoogleAlertManager (Signal-over-noise SaaS Intelligence) */
  --ux-alert-primary:       #4f46e5;  /* Electric Indigo */
  --ux-alert-primary-hover: #4338ca;
  --ux-alert-surface:       #f8fafc;  /* Clean cool slate */
  --ux-alert-surface-card:  #ffffff;
  --ux-alert-accent:        #06b6d4;  /* Signal Cyan */
  --ux-alert-text:          #0f172a;
  --ux-alert-text-muted:    #64748b;
  --ux-alert-badge-urgent:  #dc2626;

  /* 3. YoutubeAudio.Fetch (Studio Soundwave · Sonic Violet & Soundwave Cyan) */
  --ux-yt-primary:       #8b5cf6;    /* Sonic Violet / 幻紫聲波 */
  --ux-yt-primary-hover: #7c3aed;
  --ux-yt-surface:       #ffffff;    /* Studio White / 工作室純白 */
  --ux-yt-surface-card:  #ffffff;    /* Card Surface */
  --ux-yt-accent:        #06b6d4;    /* Soundwave Cyan / 串流青綠 */
  --ux-yt-mascot-glow:   linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  --ux-yt-text:          #0f172a;
  --ux-yt-text-muted:    #64748b;

  /* 4. mkdocs-investment (High-Precision Fintech Dark/Slate) */
  --ux-invest-primary:       #2563eb; /* Institutional Royal Blue */
  --ux-invest-primary-hover: #1d4ed8;
  --ux-invest-surface:       #0a0e17; /* Deep Navy Obsidian */
  --ux-invest-surface-card:  #131b2e; /* Slate Panel */
  --ux-invest-gain:          #ef4444; /* TW Stock Up / Gain (Toggleable) */
  --ux-invest-loss:          #22c55e; /* TW Stock Down / Loss (Toggleable) */
  --ux-invest-us-gain:       #10b981; /* US Stock Up / Gain */
  --ux-invest-us-loss:       #ef4444; /* US Stock Down / Loss */
  --ux-invest-text:          #f1f5f9;
  --ux-invest-text-muted:    #94a3b8;

  /* 5. HomeAssistant TV (10-foot Glancable Frosted HUD) */
  --ux-tv-surface-scrim: rgba(10, 10, 16, 0.82);
  --ux-tv-surface-card:  rgba(25, 30, 45, 0.92);
  --ux-tv-border-focus:  #38bdf8;   /* High-visibility Cyan Glow for D-pad */
  --ux-tv-text:          #ffffff;
  --ux-tv-text-sub:      #cbd5e1;
  --ux-tv-progress-bar:  #38bdf8;

  /* 6. My-TW-Coverage (Taiwan Equities Deep Coverage & Valuation Radar) */
  --ux-tw-primary:       #059669; /* Taiwan Pine Emerald */
  --ux-tw-primary-hover: #047857;
  --ux-tw-accent:        #d97706; /* Research Amber / Valuation Target Gold */
  --ux-tw-surface:       #ffffff; /* Clean Paper White */
  --ux-tw-surface-card:  #f8fafc; /* Crisp Slate Panel */
  --ux-tw-border:        #e2e8f0;
  --ux-tw-gain:          #dc2626; /* TW Stock Up / Red */
  --ux-tw-loss:          #16a34a; /* TW Stock Down / Green */
  --ux-tw-text:          #0f172a;
  --ux-tw-text-muted:    #475569;

  /* 7. wenchiehlee.quickconnect.to (Synology NAS Private Cloud DevOps) */
  --ux-nas-primary:       #0284c7; /* Synology Blue */
  --ux-nas-primary-hover: #0369a1;
  --ux-nas-accent:        #38bdf8; /* Glacier Cyan */
  --ux-nas-surface:       #ffffff;
  --ux-nas-surface-card:  #f0f9ff;
  --ux-nas-border:        #bae6fd;
  --ux-nas-text:          #0f172a;
  --ux-nas-text-muted:    #475569;

  /* 8. InvestorConference (Institutional IR Intelligence & Conference Digest) */
  --ux-ir-primary:        #22a553; /* Institutional IR Green */
  --ux-ir-primary-hover:  #1a9148;
  --ux-ir-accent:         #166534; /* Forest Deep */
  --ux-ir-surface:        #ffffff;
  --ux-ir-surface-card:   #f0fdf4; /* Mint Clean Surface */
  --ux-ir-border:         #bbf7d0;
  --ux-ir-text:           #0a0a0a;
  --ux-ir-text-muted:     #4b5563;

  /* 9. VIX (Global Volatility & Crash Sentinel) */
  --ux-vix-panic:         #ef4444; /* Panic Red (> 35 Extreme Fear) */
  --ux-vix-elevated:      #f97316; /* Elevated Orange (20 ~ 35 Attention) */
  --ux-vix-normal:        #10b981; /* Normal Green (15 ~ 20 Calm) */
  --ux-vix-tracker:       #38bdf8; /* Glacier Blue Tracker */
  --ux-vix-surface:       #ffffff;
  --ux-vix-surface-card:  #0f172a; /* Obsidian Dark Cockpit */
  --ux-vix-border:        #e2e8f0;
  --ux-vix-text:          #0f172a;
  --ux-vix-text-muted:    #475569;

  /* ==========================================================================
     Iconography System & Animal Mascot Tokens
     ========================================================================== */
  --ux-icon-xs: 14px;
  --ux-icon-sm: 18px;
  --ux-icon-md: 24px;
  --ux-icon-lg: 32px;
  --ux-icon-xl: 48px;
  --ux-icon-tv: 64px;

  --ux-icon-stroke-thin:   1.2px;
  --ux-icon-stroke-normal: 1.6px;
  --ux-icon-stroke-bold:   2.2px;
}

/* Universal Base Icon Class */
.ux-icon {
  display: inline-block;
  width: var(--ux-icon-md);
  height: var(--ux-icon-md);
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: var(--ux-icon-stroke-normal);
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--ux-duration-fast) var(--ux-ease-standard),
              color var(--ux-duration-fast) var(--ux-ease-standard),
              filter var(--ux-duration-fast) var(--ux-ease-standard);
}

.ux-icon-xs { width: var(--ux-icon-xs); height: var(--ux-icon-xs); }
.ux-icon-sm { width: var(--ux-icon-sm); height: var(--ux-icon-sm); }
.ux-icon-md { width: var(--ux-icon-md); height: var(--ux-icon-md); }
.ux-icon-lg { width: var(--ux-icon-lg); height: var(--ux-icon-lg); }
.ux-icon-xl { width: var(--ux-icon-xl); height: var(--ux-icon-xl); }
.ux-icon-tv { width: var(--ux-icon-tv); height: var(--ux-icon-tv); stroke-width: var(--ux-icon-stroke-bold); }

/* Animal Mascot Micro-Interactions & Moods */

/* 1. Deer (mkdocs-life): Gentle Forest Breathing */
.ux-icon-deer {
  color: var(--ux-life-primary);
}
.ux-icon-deer:hover {
  transform: translateY(-2px) scale(1.05);
  color: var(--ux-life-accent);
}

/* 2. Falcon (GoogleAlertManager): Sharp Radar Pulse */
.ux-icon-falcon {
  color: var(--ux-alert-primary);
}
.ux-icon-falcon:hover {
  transform: rotate(-6deg) scale(1.1);
  color: var(--ux-alert-accent);
  filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.45));
}

/* 3. Whale (YoutubeAudio.Fetch): Oceanic Harmonic Float */
.ux-icon-whale {
  color: var(--ux-yt-primary);
}
.ux-icon-whale:hover {
  transform: translateY(-2px) rotate(3deg);
  color: var(--ux-yt-accent);
  filter: drop-shadow(0 0 8px var(--ux-yt-primary-glow));
}

/* 4. Bull & Bear (mkdocs-investment): Momentum & Strength */
.ux-icon-bull {
  color: var(--ux-invest-gain);
}
.ux-icon-bull:hover {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
}

.ux-icon-bear {
  color: var(--ux-invest-loss);
}
.ux-icon-bear:hover {
  transform: translateY(2px) scale(1.05);
}

/* 5. Sentinel (HomeAssistant TV): 10-ft Glanceable Radar Glow */
.ux-icon-sentinel {
  color: var(--ux-tv-border-focus);
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5));
}
.tv-hud-btn:focus .ux-icon-sentinel,
.tv-hud-btn.is-focused .ux-icon-sentinel {
  transform: scale(1.15);
  filter: drop-shadow(0 0 16px var(--tv-focus-glow));
}

/* 6. Owl (My-TW-Coverage): Insight Analyst Focus */
.ux-icon-owl {
  color: var(--ux-tw-primary, #059669);
}
.ux-icon-owl:hover {
  transform: translateY(-2px) scale(1.08);
  color: var(--ux-tw-primary-hover, #047857);
  filter: drop-shadow(0 0 8px rgba(5, 150, 105, 0.45));
}

/* 7. Pangolin / Agile Cat (Synology NAS): DevOps Sentinel Focus */
.ux-icon-pangolin {
  color: var(--ux-nas-primary, #0284c7);
}
.ux-icon-pangolin:hover {
  transform: scale(1.12);
  color: var(--ux-nas-primary-hover, #0369a1);
  filter: drop-shadow(0 0 8px rgba(2, 132, 199, 0.45));
}

/* 8. Eagle (InvestorConference): Sovereign Foresight & Institutional Leadership */
.ux-icon-eagle {
  color: var(--ux-ir-primary, #22a553);
}
.ux-icon-eagle:hover {
  transform: translateY(-2px) scale(1.08);
  color: var(--ux-ir-accent, #166534);
  filter: drop-shadow(0 0 8px rgba(34, 165, 83, 0.45));
}

/* 9. Swan (VIX): Black Swan Tail Risk & Market Volatility Alert */
.ux-icon.ux-icon-swan,
.ux-icon-swan {
  color: var(--ux-vix-surface-card, #0f172a);
  fill: currentColor;
  stroke: none;
}
.ux-icon-swan:hover {
  transform: translateY(-2px) scale(1.08);
  color: var(--ux-vix-panic, #ef4444);
  fill: var(--ux-vix-panic, #ef4444);
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
}