/* ── DESIGN TOKENS — GadgetZ base + DEPLUS brand overrides ─────────────── */ /* Fonts are loaded via in each page's ; no @import needed here (an @import would block rendering behind this stylesheet). */ :root { /* ── DEPLUS BRAND COLORS (override GadgetZ red + dark) ── */ --color-primary: #D62D2F; --color-primary-dark: #b02426; --color-primary-light: #fdf0f0; --color-primary-shadow: rgba(214, 45, 47, 0.25); /* ── BRAND BLUE ── Derived from the logo's blue, lightened enough to read clearly as blue on white rather than as near-black. Used to shift the palette blue-heavy without replacing the red: red stays on the hero, primary CTAs and any text sitting on a dark or blue background. */ --color-blue: #1A3A8F; --color-blue-dark: #142E70; --color-blue-light: #eef2fb; --color-blue-shadow: rgba(26, 58, 143, 0.25); --color-dark: #021635; --color-bg-dark: #021635; --color-text-primary: #021635; --color-white: #ffffff; /* ── TEXT COLORS ── */ --color-text-secondary: #4a5568; --color-text-muted: #9ca3af; /* ── BACKGROUND COLORS ── */ --color-bg-white: #ffffff; --color-bg-light: #f4f7fb; /* ── BORDER COLORS ── */ --color-border: #e0e8f0; --color-border-light: #edf2f7; /* ── ACCENT ── */ --color-star: #f59e0b; --color-error: #ef4444; --color-success: #10b981; /* ── TYPOGRAPHY ── */ --font-heading: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; --font-primary: 'Barlow', sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; /* ── FONT SIZES ── */ --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 24px; --font-size-2xl: 32px; --font-size-3xl: 48px; --font-size-4xl: 56px; --font-size-5xl: 64px; /* ── SPACING ── */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --spacing-xl: 64px; --spacing-2xl: 100px; --spacing-section: 100px; /* ── BORDER RADIUS ── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 180px; --radius-pill: 999px; --radius-circle: 50%; /* ── TRANSITIONS ── */ --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.4s ease; --transition-cubic: cubic-bezier(0.4, 0, 0.2, 1); /* ── SHADOWS ── */ --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.06); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.10); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12); --shadow-primary: 0 8px 24px rgba(214, 45, 47, 0.35); --shadow-primary-lg: 0 20px 60px rgba(214, 45, 47, 0.25); --shadow-navbar: 0 2px 20px rgba(0, 0, 0, 0.08); --shadow-floating: 0 8px 32px rgba(0, 0, 0, 0.12); /* ── Z-INDEX ── */ --z-base: 1; --z-card: 2; --z-navbar: 1000; --z-dropdown: 1001; --z-mobile-menu: 1002; --z-modal: 2000; --z-lightbox: 3000; --z-toast: 4000; /* ── LAYOUT ── */ --container-max: 1200px; --container-padding: 40px; --navbar-height: 80px; }