/* ========================================================================== Qminds Design System - Design Tokens Theme-independent tokens live here. Color-scheme tokens are defined with safe dark-mode defaults and are overridden by theme-dark.css / theme-light.css scoped to [data-theme="dark"] / [data-theme="light"] on . ========================================================================== */ :root { /* --------------------------------------------------------------------- Brand Palette (theme-independent hues) --------------------------------------------------------------------- */ /* Exact hues sampled from the Qminds logo mark (assets/logos/logo-icon.png) */ --brand-charcoal-900: #17171D; --brand-charcoal-700: #393944; --brand-charcoal-500: #52525F; --brand-charcoal-400: #6E6E7C; --brand-teal-900: #004657; --brand-teal-700: #00647D; --brand-teal-500: #008EB0; --brand-teal-400: #22A6C7; --brand-teal-300: #6FC6DC; --brand-amber-600: #C97F0E; --brand-amber-500: #F5A623; --brand-amber-400: #FFC266; /* Raw RGB triplets for the brand hues above, so alpha-blended tints (glows, focus rings, badge fills) can reference a token via rgba(var(--x-rgb), a) instead of repeating literal color values across the stylesheet. */ --brand-charcoal-700-rgb: 57, 57, 68; --brand-teal-500-rgb: 0, 142, 176; --brand-teal-300-rgb: 111, 198, 220; --brand-amber-500-rgb: 245, 166, 35; /* --------------------------------------------------------------------- Fixed colors (theme-independent by design) - --color-white sits on elements that don't invert with the theme (gradient buttons, the CTA banner, floating buttons, image overlays) - unlike --color-text-inverse, which deliberately flips per theme. - --color-scrim-rgb is the dark caption-scrim base for images (always dark for legibility over a photo, regardless of site theme). - --color-whatsapp is a fixed third-party brand color. --------------------------------------------------------------------- */ --color-white: #FFFFFF; --color-white-rgb: 255, 255, 255; --color-scrim-rgb: 10, 14, 26; --overlay-scrim: rgba(0, 0, 0, 0.5); --color-whatsapp: #25D366; /* --------------------------------------------------------------------- Semantic Color Tokens (default = dark theme values; see theme-*.css) --------------------------------------------------------------------- */ --color-primary: var(--brand-teal-500); --color-primary-hover: var(--brand-teal-400); --color-primary-active: var(--brand-teal-700); --color-secondary: var(--brand-teal-300); --color-secondary-hover: var(--brand-teal-400); --color-accent: var(--brand-amber-500); --color-accent-hover: var(--brand-amber-400); --color-bg: #0A0E1A; --color-surface: #12172A; --color-surface-2: #1A2036; --color-surface-3: #222A47; --color-border: #2A3150; --color-border-strong: #3A4368; --color-text-primary: #F5F7FA; --color-text-secondary: #B4BCD0; --color-text-muted: #7B8496; --color-text-inverse: #0A0E1A; --color-success: #22C55E; --color-warning: #F59E0B; --color-danger: #EF4444; --color-info: #3B82F6; --color-success-rgb: 34, 197, 94; --color-warning-rgb: 245, 158, 11; --color-danger-rgb: 239, 68, 68; --color-info-rgb: 59, 130, 246; --color-success-bg: rgba(var(--color-success-rgb), 0.12); --color-warning-bg: rgba(var(--color-warning-rgb), 0.12); --color-danger-bg: rgba(var(--color-danger-rgb), 0.12); --color-info-bg: rgba(var(--color-info-rgb), 0.12); --gradient-primary: linear-gradient(135deg, var(--brand-charcoal-700) 0%, var(--brand-teal-500) 100%); --gradient-accent: linear-gradient(135deg, var(--brand-amber-500) 0%, var(--brand-teal-500) 100%); --gradient-surface: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); /* --------------------------------------------------------------------- Typography --------------------------------------------------------------------- */ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-heading: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-md: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem); --fs-lg: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem); --fs-xl: clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem); --fs-2xl: clamp(1.875rem, 1.68rem + 0.95vw, 2.5rem); --fs-3xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem); --fs-4xl: clamp(2.75rem, 2.25rem + 2.4vw, 4.25rem); --fs-5xl: clamp(3.25rem, 2.5rem + 3.6vw, 5.5rem); --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.6; --lh-relaxed: 1.8; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.12em; /* --------------------------------------------------------------------- Spacing Scale (4px base) --------------------------------------------------------------------- */ --space-0: 0; --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; --space-32: 8rem; --space-40: 10rem; /* --------------------------------------------------------------------- Containers & Grid --------------------------------------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-full: 100%; --container-pad: clamp(1.25rem, 4vw, 3rem); --grid-columns: 12; --grid-gutter: var(--space-6); /* --------------------------------------------------------------------- Radius --------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 999px; /* --------------------------------------------------------------------- Shadows (dark-theme calibrated; overridden per-theme) --------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.45); --shadow-glow-primary: 0 0 40px rgba(var(--brand-teal-500-rgb), 0.35); --shadow-glow-secondary: 0 0 40px rgba(var(--brand-teal-300-rgb), 0.3); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* --------------------------------------------------------------------- Transitions & 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: 250ms; --duration-slow: 450ms; --transition-base: all var(--duration-base) var(--ease-out); --transition-colors: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); --transition-transform: transform var(--duration-base) var(--ease-out); /* --------------------------------------------------------------------- Z-Index Scale --------------------------------------------------------------------- */ --z-behind: -1; --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-loader: 700; /* --------------------------------------------------------------------- Glass Effect --------------------------------------------------------------------- */ --glass-bg: rgba(18, 23, 42, 0.72); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 16px; }