/**
 * SEAMOU UNIFIED DESIGN TOKENS
 * Generated automatically from design-system/tokens.json (v2.0.0)
 * Timestamp: 2026-09-25T02:35:29.300Z
 * DO NOT EDIT MANUALLY - Run: node scripts/sync-design-system.js
 */

:root {
  /* Colors - Backgrounds */
  --sm-bg-base: #060810;
  --sm-bg-surface: #0b0f19;
  --sm-bg-card: #101726;
  --sm-bg-card-hover: #162035;
  --sm-bg-input: #0d1322;
  --sm-bg-drawer: rgba(11, 15, 25, 0.96);

  /* Colors - Accents */
  --sm-accent-cyan: #00f0ff;
  --sm-accent-cyan-dim: rgba(0, 240, 255, 0.15);
  --sm-accent-cyan-glow: rgba(0, 240, 255, 0.4);
  --sm-accent-sky: #38bdf8;
  --sm-accent-sky-dim: rgba(56, 189, 248, 0.16);
  --sm-accent-blue: #0284c7;
  --sm-accent-soft-cyan: #c2e7ff;
  --sm-accent-deep-blue: #001d35;
  --sm-accent-magenta: #f43f5e;
  --sm-accent-crimson: #ff1744;
  --sm-accent-violet: #8b5cf6;
  --sm-accent-violet-glow: rgba(139, 92, 246, 0.35);
  --sm-accent-emerald: #10b981;
  --sm-accent-amber: #f59e0b;
  --sm-accent-gold: #fbbf24;

  /* Colors - Gaming Rarity Hierarchy */
  --sm-rarity-godly: #ef4444;
  --sm-rarity-mythic: #a855f7;
  --sm-rarity-legendary: #f59e0b;
  --sm-rarity-rare: #06b6d4;
  --sm-rarity-common: #64748b;

  /* Colors - Status */
  --sm-status-active: #22c55e;
  --sm-status-active-glow: rgba(34, 197, 94, 0.4);
  --sm-status-pending: #f59e0b;
  --sm-status-expired: #ef4444;
  --sm-status-info: #00f0ff;

  /* Colors - Text */
  --sm-text-pure: #ffffff;
  --sm-text-sub: #cbd5e1;
  --sm-text-muted: #94a3b8;
  --sm-text-faint: #64748b;

  /* Colors - Borders */
  --sm-border-subtle: rgba(255, 255, 255, 0.08);
  --sm-border-card: rgba(255, 255, 255, 0.07);
  --sm-border-hover: rgba(0, 240, 255, 0.4);
  --sm-border-glow: rgba(0, 240, 255, 0.35);

  /* Typography */
  --sm-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sm-font-body: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sm-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --sm-text-xs: 0.75rem;
  --sm-text-sm: 0.875rem;
  --sm-text-base: 1rem;
  --sm-text-md: 1.125rem;
  --sm-text-lg: 1.25rem;
  --sm-text-xl: 1.5rem;
  --sm-text-2xl: 1.875rem;
  --sm-text-3xl: 2.25rem;
  --sm-text-hero: 2.75rem;

  --sm-weight-normal: 400;
  --sm-weight-medium: 500;
  --sm-weight-semibold: 600;
  --sm-weight-bold: 700;
  --sm-weight-black: 900;

  /* Spacing */
  --sm-space-1: 4px;
  --sm-space-2: 8px;
  --sm-space-3: 12px;
  --sm-space-4: 16px;
  --sm-space-5: 20px;
  --sm-space-6: 24px;
  --sm-space-8: 32px;
  --sm-space-12: 48px;
  --sm-space-16: 64px;

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

  /* Shadows & Glows */
  --sm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --sm-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --sm-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7);
  --sm-shadow-glow-cyan: 0 0 20px rgba(0, 240, 255, 0.35);
  --sm-shadow-glow-violet: 0 0 25px rgba(139, 92, 246, 0.35);
  --sm-shadow-card-hover: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.15);

  /* Transitions */
  --sm-transition-fast: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --sm-transition-base: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  --sm-transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --sm-transition-spring: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout Constants */
  --sm-max-w: 1240px;
  --sm-header-height: 74px;
  --sm-container-padding: 24px;
  --sm-container-padding-mobile: 16px;

  /* Semantic Profile: Default (Enterprise / Material You) */
  --sm-active-bg: rgba(56, 189, 248, 0.16);
  --sm-active-color: #38bdf8;
  --sm-active-border: transparent;
  --sm-active-shadow: none;
  --sm-fab-bg: #c2e7ff;
  --sm-fab-color: #001d35;
  --sm-fab-radius: 16px;
  --sm-fab-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sm-card-bg-mode: var(--sm-bg-surface);
  --sm-card-border-mode: 1px solid var(--sm-border-card);
  --sm-card-radius-mode: var(--sm-radius-lg);

  /* Backward Compatibility Aliases for Existing Themes */
  --bg-main: var(--sm-bg-base);
  --bg-surface: var(--sm-bg-surface);
  --bg-card: var(--sm-bg-card);
  --bg-card-hover: var(--sm-bg-card-hover);
  --bg-input: var(--sm-bg-input);
  --accent-cyan: var(--sm-accent-cyan);
  --accent-magenta: var(--sm-accent-magenta);
  --accent-violet: var(--sm-accent-violet);
  --text-pure: var(--sm-text-pure);
  --text-sub: var(--sm-text-sub);
  --text-muted: var(--sm-text-muted);
  --text-faint: var(--sm-text-faint);
  --border-subtle: var(--sm-border-subtle);
  --border-card: var(--sm-border-card);
  --radius-sm: var(--sm-radius-sm);
  --radius-md: var(--sm-radius-md);
  --radius-lg: var(--sm-radius-lg);
  --radius-full: var(--sm-radius-full);
  --font-display: var(--sm-font-display);
  --font-body: var(--sm-font-body);
  --font-mono: var(--sm-font-mono);
}

/* ==========================================================================
   PROFILE: ENTERPRISE & PRODUCTIVITY (Webmail, Keycloak SSO, Admin, PVE)
   Tối giản 100%, Material You Pill phẳng, Zero Double-Border
   ========================================================================== */
[data-seamou-mode="enterprise"] {
  --sm-active-bg: rgba(56, 189, 248, 0.16);
  --sm-active-color: #38bdf8;
  --sm-active-border: transparent;
  --sm-active-shadow: none;
  --sm-fab-bg: #c2e7ff;
  --sm-fab-color: #001d35;
  --sm-fab-radius: 16px;
  --sm-fab-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sm-card-bg-mode: #080c18;
  --sm-card-border-mode: 1px solid rgba(255, 255, 255, 0.07);
  --sm-card-radius-mode: 14px;
}

/* ==========================================================================
   PROFILE: GAMING & WIKI HUBS (Roblox Wikis, Anime Games, Hubs, Tier Lists)
   Playful, Bento Grid 20px, Spring Bounce, Rarity Hierarchy
   ========================================================================== */
[data-seamou-mode="gaming"] {
  --sm-bg-surface: #0a0e1e;
  --sm-bg-card: #0b1022;
  --sm-bg-card-hover: #121832;
  --sm-active-bg: linear-gradient(135deg, rgba(0, 240, 255, 0.25) 0%, rgba(2, 132, 199, 0.15) 100%);
  --sm-active-color: #00f0ff;
  --sm-active-border: 1px solid rgba(0, 240, 255, 0.4);
  --sm-active-shadow: 0 4px 16px rgba(0, 240, 255, 0.2);
  --sm-fab-bg: linear-gradient(135deg, #00f0ff 0%, #0084ff 100%);
  --sm-fab-color: #ffffff;
  --sm-fab-radius: 20px;
  --sm-fab-shadow: 0 4px 20px rgba(0, 240, 255, 0.4);
  --sm-card-bg-mode: #0b1022;
  --sm-card-border-mode: 1px solid rgba(255, 255, 255, 0.1);
  --sm-card-radius-mode: 20px;
}