/* ========================================================================== CSS Custom Properties — TCG Store Design System ========================================================================== */ :root { /* -------------------------------------------------------------------------- Brand Colors -------------------------------------------------------------------------- */ --color-primary: #2866B1; /* Main brand blue */ --color-primary-dark: #1e4f8c; /* Hover / active state */ --color-primary-light: #3a7fd4; /* Lighter tint */ --color-primary-xlight: #d6e8f8; /* Very light tint for backgrounds */ --color-accent: #F1C40F; /* Gold / yellow accent */ --color-accent-dark: #c9a90c; /* Hover accent */ --color-accent-light: #f7d94d; /* Light accent tint */ --color-danger: #e74c3c; /* Error / out-of-stock red */ --color-danger-dark: #c0392b; --color-danger-light: #fdecea; --color-success: #27ae60; /* In-stock green */ --color-success-dark: #1e8449; --color-success-light: #e9f7ef; --color-warning: #f39c12; /* Warning / preorder orange */ --color-warning-dark: #d68910; --color-warning-light: #fef9e7; --color-info: #2980b9; --color-info-light: #ebf5fb; /* -------------------------------------------------------------------------- Neutral Palette -------------------------------------------------------------------------- */ --color-white: #ffffff; --color-black: #000000; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* -------------------------------------------------------------------------- Dark UI Surfaces (Header / Footer) -------------------------------------------------------------------------- */ --color-dark-bg: #1a1a2e; /* Main dark background */ --color-dark-surface: #16213e; /* Slightly lighter dark surface */ --color-dark-border: #0f3460; /* Dark border / separator */ --color-dark-text: #e2e8f0; /* Text on dark surfaces */ --color-dark-muted: #94a3b8; /* Muted text on dark surfaces */ /* -------------------------------------------------------------------------- Semantic Color Aliases -------------------------------------------------------------------------- */ --color-background: #f5f6fa; /* Page background */ --color-surface: #ffffff; /* Card / panel surface */ --color-border: #e2e8f0; /* Default border */ --color-border-strong: #cbd5e1; --color-text: #1f2937; /* Body text */ --color-text-muted: #6b7280; /* Secondary / muted text */ --color-text-inverse: #ffffff; /* Text on dark surfaces */ --color-link: #2866B1; --color-link-hover: #1e4f8c; /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ --font-family-base: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif; --font-family-mono: 'Courier New', Courier, monospace; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 1.875rem; /* 30px */ --font-size-3xl: 2.25rem; /* 36px */ --font-size-4xl: 3rem; /* 48px */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-base: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* -------------------------------------------------------------------------- Spacing Scale (4px base unit) -------------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ --container-max-width: 1280px; --container-padding: var(--space-4); --header-height: 70px; --topbar-height: 0px; --nav-height: 48px; --sidebar-width: 280px; --cart-sidebar-width: 420px; --footer-bg: #1a1a2e; /* -------------------------------------------------------------------------- Grid -------------------------------------------------------------------------- */ --grid-cols-desktop: 4; --grid-cols-tablet: 3; --grid-cols-mobile: 2; --grid-gap: var(--space-6); --grid-gap-sm: var(--space-4); /* -------------------------------------------------------------------------- Border Radius -------------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* -------------------------------------------------------------------------- Shadows -------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-card: 0 2px 8px rgba(40, 102, 177, 0.08), 0 1px 3px rgba(0,0,0,0.06); --shadow-card-hover: 0 8px 24px rgba(40, 102, 177, 0.18), 0 4px 8px rgba(0,0,0,0.08); /* -------------------------------------------------------------------------- Transitions -------------------------------------------------------------------------- */ --transition-fast: all 0.15s ease; --transition-base: all 0.25s ease; --transition-slow: all 0.4s ease; --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --transition-color: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; --transition-transform: transform 0.25s ease; --transition-opacity: opacity 0.25s ease; --transition-shadow: box-shadow 0.25s ease; --transition-slide: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* -------------------------------------------------------------------------- Z-Index Scale -------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-overlay: 400; --z-modal: 500; --z-popover: 600; --z-toast: 700; --z-tooltip: 800; /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ --btn-height-sm: 32px; --btn-height-md: 42px; --btn-height-lg: 52px; --btn-padding-x-sm: var(--space-3); --btn-padding-x-md: var(--space-5); --btn-padding-x-lg: var(--space-8); --btn-font-size-sm: var(--font-size-xs); --btn-font-size-md: var(--font-size-sm); --btn-font-size-lg: var(--font-size-base); --btn-radius: var(--radius-md); --btn-font-weight: var(--font-weight-semibold); /* -------------------------------------------------------------------------- Forms / Inputs -------------------------------------------------------------------------- */ --input-height: 44px; --input-height-sm: 36px; --input-padding-x: var(--space-4); --input-border: 1px solid var(--color-border-strong); --input-border-focus: 1px solid var(--color-primary); --input-radius: var(--radius-md); --input-bg: var(--color-white); --input-focus-shadow: 0 0 0 3px rgba(40, 102, 177, 0.15); /* -------------------------------------------------------------------------- Badges / Chips -------------------------------------------------------------------------- */ --badge-height: 22px; --badge-padding-x: var(--space-2); --badge-font-size: var(--font-size-xs); --badge-font-weight: var(--font-weight-bold); --badge-radius: var(--radius-sm); /* -------------------------------------------------------------------------- Product Card -------------------------------------------------------------------------- */ --card-radius: var(--radius-lg); --card-padding: var(--space-4); --card-image-ratio: 1 / 1; --card-bg: var(--color-white); --card-border: 1px solid var(--color-border); --card-hover-transform: translateY(-4px); /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ --nav-link-color: var(--color-dark-text); --nav-link-hover-bg: rgba(255, 255, 255, 0.08); --nav-link-active-color: var(--color-accent); --nav-font-weight: var(--font-weight-semibold); --nav-font-size: var(--font-size-sm); }