/* ============================================================ 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 */ /* AA-guard aliases for accent/gold rendered AS TEXT on a light-capable surface. In :root they alias the originals so DARK mode is unchanged; [data-theme="light"] overrides them with darker AA-safe variants. Consume these (not --color-accent / --color-gold) wherever accent/gold is used as text on a light surface. */ --color-accent-text: var(--color-accent); --color-gold-text: var(--color-gold); /* ---- Brand provider colors ---- Raw brand hex is allowed ONLY for official logos/affordances (the one controlled exception to the consume-tokens rule). Discord "Blurple" — official. */ --brand-discord: #5865F2; --brand-discord-hover: #6E7BFF; /* +~8% lightness for hover; still on-brand */ --brand-discord-active: #4752C4; /* pressed */ /* Google "Sign in with Google" — official neutral button surface (the colored mark lives in the inline SVG). Surface/border/text per Google brand guidelines. */ --brand-google-surface: #FFFFFF; --brand-google-surface-hover: #F8F9FA; /* Google's hover grey */ --brand-google-border: #DADCE0; /* Google's neutral border */ --brand-google-text: #3C4043; /* Google's dark text */ /* ---- 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; } /* ============================================================ Light theme — [data-theme="light"] override block Applied by the anti-FOUC head script + toggleTheme() JS by setting data-theme="light" on . Dark is the attribute-absent baseline (:root). Only tokens that MUST change are listed; everything else inherits from :root (spacing, radius, motion, type, semantic accents, --ygo- frames, brand-provider colors). Radzen rides the --color-* cascade (theme.css re-points --rz-* at --color-*), so NO [data-theme="light"] --rz-* block is needed. ============================================================ */ [data-theme="light"] { /* ---- Surfaces — soft light grey (low-glare), layered ---- */ --color-bg-base: #DDE0E7; /* app bg — muted light grey, cool tint (no white glare) */ --color-surface-1: #E8EAEF; /* cards/panels — lighter grey, pops above the base */ --color-surface-2: #D6D9E1; /* raised cards, popovers, HEADER surface, zebra rows */ --color-surface-3: #CFD2DB; /* modals, menus, highest elevation, dropdown panels */ --color-surface-inset: #D2D5DD; /* wells, inputs, sunken areas (darker than base) */ /* ---- Text — dark-on-grey (AA verified) ---- */ --color-text-primary: #10131C; /* headings/key text — very high contrast on the grey */ --color-text-secondary: #333B4D; /* body */ --color-text-muted: #555D70; /* captions/meta/placeholder — AA on the grey base */ --color-text-inverse: #FFFFFF; /* text on accent/dark fills */ /* ---- Borders & glass — alpha-black, nudged up for the mid-grey base ---- */ --color-border-subtle: rgba(0, 0, 0, 0.07); --color-border: rgba(0, 0, 0, 0.14); --color-border-strong: rgba(0, 0, 0, 0.24); --color-glass-bg: rgba(228, 230, 236, 0.80); /* light-grey frosted (was white) */ --color-glass-border: rgba(0, 0, 0, 0.10); /* Accent tints ride on grey — keep the wash visible */ --color-accent-subtle: rgba(123, 97, 255, 0.13); /* header/dropdown hover wash */ --color-accent-2-subtle: rgba(34, 211, 238, 0.16); /* ---- AA guards: accent/gold AS TEXT on the grey base ---- */ --color-accent-text: var(--color-accent-active); /* #6A4FF0 */ --color-gold-text: #A96806; /* darker gold for AA on grey */ } /* .ygo-panel: KEEP the dark textured background image in light mode (from the base rule in CSS_Class.razor, blended soft-light) over a surface-3 panel color. */ [data-theme="light"] .ygo-panel { background-color: var(--color-surface-3); border-color: var(--color-border); } /* Theme-toggle icon visibility — driven by data-theme on . Pure CSS so the correct sun/moon renders pre-hydration and flips instantly when toggleTheme() sets the attribute. Rule: show the icon for the theme you'll switch TO. Dark (default, attribute-absent) -> sun (light_mode); light -> moon (dark_mode). */ .theme-toggle .theme-icon-to-dark { display: none; } [data-theme="light"] .theme-toggle .theme-icon-to-light { display: none; } [data-theme="light"] .theme-toggle .theme-icon-to-dark { display: inline-flex; } /* Legacy Bootstrap-template rules in theme.css hardcode #ffffff text and a #0b3156 input background — correct for the DARK default, but white-on-grey in light mode. Re-point them to tokens ONLY under [data-theme="light"] so dark stays untouched. Specificity (0,1,1)+!important beats the base element/!important rules. */ [data-theme="light"] p, [data-theme="light"] .form-label { color: var(--color-text-primary); } [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { color: var(--color-text-primary) !important; } [data-theme="light"] .form-control { background-color: var(--color-surface-inset); } [data-theme="light"] ::placeholder { color: var(--color-text-muted) !important; } [data-theme="light"] .form-control::placeholder { color: var(--color-text-muted) !important; } [data-theme="light"] ::-webkit-input-placeholder { color: var(--color-text-muted) !important; } [data-theme="light"] .page-link { color: var(--color-text-primary); } [data-theme="light"] .tooltip-special .tooltiptext-special-card { background-color: var(--color-surface-3); color: var(--color-text-primary); } [data-theme="light"] .navbar-light .navbar-nav .nav-link { color: var(--color-text-secondary); } [data-theme="light"] .nav-link-style { color: var(--color-text-secondary); } [data-theme="light"] .breadcrumb-light .breadcrumb-item > a { color: var(--color-text-secondary); } [data-theme="light"] .breadcrumb-light .breadcrumb-item::before, [data-theme="light"] .breadcrumb-light .breadcrumb-item.active { color: var(--color-text-muted); } [data-theme="light"] .rz-multiselect .rz-placeholder, [data-theme="light"] .rz-dropdown .rz-placeholder { color: var(--color-text-muted) !important; } [data-theme="light"] .rz-dropdown-item { color: var(--color-text-primary) !important; } /* ---- 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; } }