/* ========================================================= GoldPriceBD CSS Framework variables.css Version: 1.0 Purpose: - Global design system - Colors - Typography - Spacing - Layout - Borders - Radius - Shadows - Transitions - Gold / Silver theme - Dark mode foundation IMPORTANT: - Components should use these variables. - Avoid hard-coded design values in component CSS. - This file should remain stable as the website grows. ========================================================= */ /* ========================================================= ROOT DESIGN SYSTEM ========================================================= */ :root { /* ----------------------------------------------------- BRAND ----------------------------------------------------- */ --brand-gold: #b8860b; --brand-gold-light: #d4af37; --brand-gold-dark: #8c6508; --brand-silver: #8a94a6; --brand-silver-light: #c7ccd5; --brand-silver-dark: #5f6878; /* ----------------------------------------------------- PRIMARY COLORS ----------------------------------------------------- */ --color-primary: var(--brand-gold); --color-primary-hover: var(--brand-gold-dark); --color-primary-light: #f7efd2; --color-secondary: var(--brand-silver); --color-secondary-hover: var(--brand-silver-dark); --color-secondary-light: #eef1f5; /* ----------------------------------------------------- BACKGROUND ----------------------------------------------------- */ --color-bg: #f7f8fa; --color-bg-soft: #f1f3f6; --color-bg-card: #ffffff; --color-bg-elevated: #ffffff; --color-bg-input: #ffffff; /* ----------------------------------------------------- TEXT ----------------------------------------------------- */ --color-text: #1f2937; --color-text-secondary: #4b5563; --color-text-muted: #6b7280; --color-text-light: #9ca3af; --color-text-inverse: #ffffff; /* ----------------------------------------------------- BORDER ----------------------------------------------------- */ --color-border: #e5e7eb; --color-border-light: #eef0f3; --color-border-dark: #d1d5db; /* ----------------------------------------------------- STATUS ----------------------------------------------------- */ --color-success: #15803d; --color-success-bg: #dcfce7; --color-warning: #b45309; --color-warning-bg: #fef3c7; --color-danger: #b91c1c; --color-danger-bg: #fee2e2; --color-info: #0369a1; --color-info-bg: #e0f2fe; /* ----------------------------------------------------- GOLD STATUS ----------------------------------------------------- */ --gold-bg: #fffaf0; --gold-border: #ead9a3; --gold-text: #8c6508; /* ----------------------------------------------------- SILVER STATUS ----------------------------------------------------- */ --silver-bg: #f5f7fa; --silver-border: #d8dde5; --silver-text: #5f6878; /* ----------------------------------------------------- TYPOGRAPHY ----------------------------------------------------- */ --font-family-base: Inter, Arial, Helvetica, sans-serif; --font-family-heading: Inter, Arial, Helvetica, sans-serif; --font-family-mono: Consolas, Monaco, "Courier New", monospace; /* ----------------------------------------------------- FONT SIZE ----------------------------------------------------- */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; /* ----------------------------------------------------- FONT WEIGHT ----------------------------------------------------- */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ----------------------------------------------------- LINE HEIGHT ----------------------------------------------------- */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* ----------------------------------------------------- SPACING ----------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ----------------------------------------------------- LAYOUT ----------------------------------------------------- */ --container-width: 1200px; --container-width-wide: 1400px; --container-padding: 1rem; /* ----------------------------------------------------- BORDER RADIUS ----------------------------------------------------- */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* ----------------------------------------------------- BORDER WIDTH ----------------------------------------------------- */ --border-width: 1px; --border-width-thick: 2px; /* ----------------------------------------------------- SHADOW ----------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.10); --shadow-xl: 0 20px 45px rgba(0, 0, 0, 0.12); /* ----------------------------------------------------- TRANSITIONS ----------------------------------------------------- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* ----------------------------------------------------- Z-INDEX ----------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* ----------------------------------------------------- HEADER ----------------------------------------------------- */ --header-height: 72px; /* ----------------------------------------------------- CONTENT ----------------------------------------------------- */ --content-max-width: 1200px; --content-reading-width: 760px; /* ----------------------------------------------------- CARD ----------------------------------------------------- */ --card-padding: 1.25rem; --card-radius: var(--radius-lg); --card-border: var(--color-border); --card-background: var(--color-bg-card); --card-shadow: var(--shadow-sm); /* ----------------------------------------------------- BUTTON ----------------------------------------------------- */ --button-height-sm: 36px; --button-height-md: 42px; --button-height-lg: 48px; --button-padding-x: 1rem; --button-radius: var(--radius-md); /* ----------------------------------------------------- FORM ----------------------------------------------------- */ --input-height: 44px; --input-radius: var(--radius-md); --input-border: var(--color-border); --input-background: var(--color-bg-input); /* ----------------------------------------------------- TABLE ----------------------------------------------------- */ --table-header-bg: #f9fafb; --table-row-hover: #fafafa; --table-border: var(--color-border); /* ----------------------------------------------------- ANIMATION ----------------------------------------------------- */ --animation-duration: 250ms; /* ----------------------------------------------------- BREAKPOINTS ----------------------------------------------------- */ --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; } /* ========================================================= DARK MODE ========================================================= */ [data-theme="dark"] { /* ----------------------------------------------------- BACKGROUND ----------------------------------------------------- */ --color-bg: #0f1115; --color-bg-soft: #171a21; --color-bg-card: #1b1f27; --color-bg-elevated: #222733; --color-bg-input: #171a21; /* ----------------------------------------------------- TEXT ----------------------------------------------------- */ --color-text: #f3f4f6; --color-text-secondary: #d1d5db; --color-text-muted: #9ca3af; --color-text-light: #6b7280; --color-text-inverse: #111827; /* ----------------------------------------------------- BORDER ----------------------------------------------------- */ --color-border: #303642; --color-border-light: #252a33; --color-border-dark: #3d4450; /* ----------------------------------------------------- PRIMARY ----------------------------------------------------- */ --color-primary: #d4af37; --color-primary-hover: #e4c65a; --color-primary-light: #332b16; /* ----------------------------------------------------- SECONDARY ----------------------------------------------------- */ --color-secondary: #aeb7c6; --color-secondary-hover: #c7ced9; --color-secondary-light: #252a33; /* ----------------------------------------------------- STATUS ----------------------------------------------------- */ --color-success: #4ade80; --color-success-bg: #12351f; --color-warning: #fbbf24; --color-warning-bg: #3b2c0a; --color-danger: #f87171; --color-danger-bg: #3b1515; --color-info: #38bdf8; --color-info-bg: #082f49; /* ----------------------------------------------------- GOLD ----------------------------------------------------- */ --gold-bg: #332b16; --gold-border: #66551f; --gold-text: #e4c65a; /* ----------------------------------------------------- SILVER ----------------------------------------------------- */ --silver-bg: #252a33; --silver-border: #454d5b; --silver-text: #c7ced9; /* ----------------------------------------------------- TABLE ----------------------------------------------------- */ --table-header-bg: #222733; --table-row-hover: #20242c; --table-border: #303642; /* ----------------------------------------------------- SHADOW ----------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.30); --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.35); --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.40); } /* ========================================================= SYSTEM DARK MODE Only applies when JavaScript has not explicitly selected a theme. ========================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0f1115; --color-bg-soft: #171a21; --color-bg-card: #1b1f27; --color-bg-elevated: #222733; --color-bg-input: #171a21; --color-text: #f3f4f6; --color-text-secondary: #d1d5db; --color-text-muted: #9ca3af; --color-text-light: #6b7280; --color-text-inverse: #111827; --color-border: #303642; --color-border-light: #252a33; --color-border-dark: #3d4450; --table-header-bg: #222733; --table-row-hover: #20242c; --table-border: #303642; } } /* ========================================================= GOLD ACCENT UTILITY ========================================================= */ .theme-gold { --color-primary: var(--brand-gold); } /* ========================================================= SILVER ACCENT UTILITY ========================================================= */ .theme-silver { --color-primary: var(--brand-silver); } /* ========================================================= COMPATIBILITY ALIASES --------------------------------------------------------- These aliases keep the modular files consistent while preserving the original variable names used by the site. ========================================================= */ :root { --gold-50: #fffbea; --gold-100: #fef3c7; --gold-200: #fde68a; --gold-300: #fcd34d; --gold-400: #fbbf24; --gold-500: #d4a017; --gold-600: #b8860b; --gold-700: #946f00; --gold-800: #765800; --gold-900: #5c4500; --silver-50: #f8fafc; --silver-100: #f1f5f9; --silver-200: #e2e8f0; --silver-300: #cbd5e1; --silver-400: #94a3b8; --silver-500: #64748b; --silver-600: #475569; --silver-700: #334155; --silver-800: #1e293b; --silver-900: #0f172a; --bg-body: var(--color-bg); --bg-surface: var(--color-bg-card); --bg-surface-soft: var(--color-bg-soft); --bg-muted: var(--color-bg-soft); --bg-header: var(--color-bg-elevated); --bg-footer: var(--color-bg-elevated); --color-surface: var(--color-bg-card); --color-background: var(--color-bg); --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --text-light: var(--color-text-light); --text-inverse: var(--color-text-inverse); --border-color: var(--color-border); --border-color-light: var(--color-border-light); --border-color-dark: var(--color-border-dark); --color-primary-soft: var(--color-primary-light); --color-success-soft: var(--color-success-bg); --color-warning-soft: var(--color-warning-bg); --color-danger-soft: var(--color-danger-bg); --color-info-soft: var(--color-info-bg); --font-family: var(--font-family-base); --content-width: var(--content-reading-width); --space-7: 2rem; --space-9: 3rem; --radius-pill: var(--radius-full); --z-modal: 1000; --z-toast: 1100; }