/* ============================================================ YGOVN 2026 Design Tokens — Part 4 of 09-design-system.md Single source of truth. Loaded BEFORE theme.css. Do NOT add raw hex to components; consume these tokens. Mirror this file identically into: Client/wwwroot/css/ | YGOVN2.Maui/wwwroot/css/ | YGOVN2.WPF/wwwroot/css/ ============================================================ */ :root { /* ---- 4.1 Surfaces (dark-first, layered) ---- */ --color-bg-base: #0A0D16; --color-surface-1: #111522; --color-surface-2: #181D2E; --color-surface-3: #20273B; --color-surface-inset: #070A12; /* Glass (use with backdrop-filter: blur(16px)) */ --color-glass-bg: rgba(20, 26, 42, 0.72); --color-glass-border: rgba(255, 255, 255, 0.08); /* Borders & dividers */ --color-border-subtle: rgba(255, 255, 255, 0.06); --color-border: rgba(255, 255, 255, 0.12); --color-border-strong: rgba(255, 255, 255, 0.20); /* Text */ --color-text-primary: #F4F6FB; --color-text-secondary: #B4BCCF; --color-text-muted: #7A8298; --color-text-inverse: #0A0D16; /* ---- Brand & accent (the "neon") ---- */ --color-accent: #7B61FF; --color-accent-hover: #8E78FF; --color-accent-active: #6A4FF0; --color-accent-subtle: rgba(123, 97, 255, 0.14); --color-accent-glow: rgba(123, 97, 255, 0.45); --color-on-accent: #FFFFFF; --color-accent-2: #22D3EE; --color-accent-2-subtle: rgba(34, 211, 238, 0.14); --color-gold: #F5B544; --color-hot: #FF6B6C; /* evolved from current #fe696a */ /* ---- Semantic ---- */ --color-success: #34D399; --color-success-subtle: rgba(52, 211, 153, 0.14); --color-warning: #FBBF24; --color-warning-subtle: rgba(251, 191, 36, 0.14); --color-danger: #F4566E; --color-danger-subtle: rgba(244, 86, 110, 0.14); --color-info: #38BDF8; --color-info-subtle: rgba(56, 189, 248, 0.14); /* ---- Yu-Gi-Oh! card-frame colors (canonical, do not neon-ify) ---- */ --ygo-monster-normal: #C9A86A; --ygo-monster-effect: #C8743A; --ygo-ritual: #5A8FC9; --ygo-fusion: #8E63B0; --ygo-synchro: #E5E5E5; --ygo-xyz: #2B2B2B; --ygo-link: #2E5A8E; --ygo-spell: #1D9E8E; --ygo-trap: #B83A7E; /* ---- 4.2 Typography ---- */ /* NOTE for this slice: Sora is NOT loaded yet (pending VN-subset proofing), so --font-display falls through to Be Vietnam Pro. Do not add a Sora link until proofed. */ --font-display: 'Sora', 'Be Vietnam Pro', system-ui, sans-serif; --font-body: 'Be Vietnam Pro', system-ui, sans-serif; --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ---- 4.3 Spacing, radius, layout ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; --container-max: 1320px; --content-max: 70ch; --header-height: 48px; --bottom-nav-height: 60px; /* ---- 4.4 Elevation (shadows + glow) ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.55); --shadow-xl: 0 24px 60px rgba(0,0,0,0.6); --glow-accent: 0 0 0 1px var(--color-accent), 0 0 24px var(--color-accent-glow); --glow-focus: 0 0 0 3px var(--color-accent-subtle), 0 0 0 1px var(--color-accent); /* ---- 4.5 Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 400ms; /* ---- 4.6 Z-index scale ---- */ --z-base: 0; --z-dropdown: 1000; --z-sticky-header: 1100; --z-bottom-nav: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400; --z-tooltip: 1500; } /* ---- Brand-tenant override hook (multi-tenant) ---- ygovietnam (default) uses the :root tokens above. metaduelist may shift accent/logo via this hook later. Base + brand differ at TOKEN level only — never a CSS fork. */ [data-brand="metaduelist"] { /* Keep identical to YGOVN for this slice (decision still open, §7.3 of design doc). Example future override: --color-accent: #4FC3F7; */ } /* ---- Respect reduced motion globally ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }