/** * ADCAM DIGITAL — DESIGN TOKEN SYSTEM * css/variables.css * * Single source of truth for the Premium Light Corporate Design System. */ :root { /* ============================================================ * COLOR SYSTEM — PREMIUM LIGHT CORPORATE * * Clean, high-contrast, editorial enterprise palette: * Backgrounds → Crisp white, soft cool slate, light pearl * Text → Deep slate, navy-charcoal (high readability) * Accents → Royal electric blue (trust & technology) * Refined amber/coral (growth & results) * Borders → Crisp subtle borders (#E2E8F0) * Surfaces → White with layered shadows * ============================================================ */ /* --- Backgrounds --- */ --color-bg-primary: #ffffff; /* Pure white primary canvas */ --color-bg-secondary: #f8fafc; /* Soft slate-gray for alternating sections */ --color-bg-tertiary: #f1f5f9; /* Subtle container fills */ --color-bg-elevated: #ffffff; /* Cards and modal surfaces */ --color-bg-card: #ffffff; /* Card surface */ --color-bg-card-hover: #ffffff; /* Card surface hover */ --color-bg-overlay: rgba(15, 23, 42, 0.65); /* Modal overlay */ --color-bg-dark-section: #0a0f1d; /* Selective dark section (NextLab / CTA / Footer) */ --color-bg-dark-card: #111827; /* Card inside dark section */ /* --- Text Hierarchy --- */ --color-text-primary: #0f172a; /* Deepest slate — body text */ --color-text-heading: #090d16; /* Rich near-black for headings */ --color-text-secondary: #475569; /* Muted supporting copy */ --color-text-muted: #64748b; /* Captions, labels, timestamps */ --color-text-inverse: #ffffff; /* Text on dark surfaces or primary buttons */ --color-text-inverse-muted: #94a3b8; /* Muted text inside dark sections */ /* --- Accent — Primary: Royal Electric Blue --- */ --color-accent-primary: #1d4ed8; /* Primary brand blue */ --color-accent-primary-light: #3b82f6; /* Lighter blue for hover/highlights */ --color-accent-primary-dark: #1e40af; /* Darker blue for active states */ --color-accent-primary-muted: #eff6ff; /* 5% tint for pill tags & backgrounds */ --color-accent-primary-border: #bfdbfe; /* Blue border tint */ /* --- Accent — Secondary: Warm Amber / Growth --- */ --color-accent-secondary: #d97706; /* Performance amber */ --color-accent-secondary-light: #f59e0b; /* Lighter amber for badges */ --color-accent-secondary-dark: #b45309; /* Darker amber */ --color-accent-secondary-muted: #fffbeb; /* Amber soft tint */ --color-accent-secondary-border: #fde68a; /* Amber border tint */ /* --- Accent — Teal / Cyan (Distribution) --- */ --color-accent-teal: #0d9488; --color-accent-teal-muted: #f0fdfa; --color-accent-teal-border: #99f6e4; /* --- Borders --- */ --color-border: #e2e8f0; /* Slate 200 — standard clean border */ --color-border-subtle: #f1f5f9; /* Slate 100 — very light border */ --color-border-strong: #cbd5e1; /* Slate 300 — inputs and prominent borders */ --color-border-hover: #94a3b8; /* Slate 400 — hover state */ --color-border-dark: rgba(255, 255, 255, 0.12); /* Inside dark sections */ /* --- Semantic --- */ --color-success: #059669; --color-success-muted: #ecfdf5; --color-warning: #d97706; --color-warning-muted: #fffbeb; --color-error: #dc2626; --color-error-muted: #fef2f2; /* --- Gradients --- */ --gradient-hero: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% ); --gradient-blue: linear-gradient( 135deg, #1d4ed8 0%, #2563eb 50%, #0284c7 100% ); --gradient-card: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% ); --gradient-subtle-glow: radial-gradient( ellipse at top, rgba(37, 99, 235, 0.08) 0%, transparent 70% ); --gradient-grid-light: repeating-linear-gradient( 0deg, transparent, transparent 39px, rgba(226, 232, 240, 0.6) 39px, rgba(226, 232, 240, 0.6) 40px ), repeating-linear-gradient( 90deg, transparent, transparent 39px, rgba(226, 232, 240, 0.6) 39px, rgba(226, 232, 240, 0.6) 40px ); /* ============================================================ * SPACING SCALE — Base-4 system * ============================================================ */ --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 */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --section-padding-y: clamp(var(--space-16), 7vw, var(--space-28)); --section-padding-y-sm: clamp(var(--space-10), 4vw, var(--space-16)); --section-gap: var(--space-12); /* ============================================================ * BORDER RADIUS * ============================================================ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 9999px; /* ============================================================ * SHADOWS — Refined light shadows * ============================================================ */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.09), 0 4px 10px rgba(15, 23, 42, 0.04); --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.05); --shadow-card: var(--shadow-sm); --shadow-elevated: var(--shadow-md); --shadow-hover: var(--shadow-lg); --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.25); /* ============================================================ * CONTAINERS * ============================================================ */ --container-max: 1240px; --container-wide: 1400px; --container-narrow: 680px; --container-reading: 740px; --container-padding-x: clamp(var(--space-5), 4vw, var(--space-12)); /* ============================================================ * TRANSITIONS * ============================================================ */ --duration-fast: 180ms; --duration-normal: 260ms; --duration-slow: 400ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --transition-fast: var(--duration-fast) var(--ease-standard); --transition-normal: var(--duration-normal) var(--ease-standard); --transition-slow: var(--duration-slow) var(--ease-decelerate); /* ============================================================ * TYPOGRAPHY SYSTEM * ============================================================ */ --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Type scale */ --text-display: clamp(2.5rem, 4.5vw + 0.5rem, 4.25rem); --text-h1: clamp(2rem, 3.2vw + 0.25rem, 3.25rem); --text-h2: clamp(1.625rem, 2.2vw + 0.25rem, 2.375rem); --text-h3: clamp(1.25rem, 1.4vw + 0.2rem, 1.75rem); --text-h4: clamp(1.0625rem, 0.8vw + 0.2rem, 1.25rem); --text-body-lg: 1.125rem; /* 18px */ --text-body: 1rem; /* 16px */ --text-body-sm: 0.9375rem; /* 15px */ --text-caption: 0.8125rem; /* 13px */ --text-label: 0.75rem; /* 12px */ --text-nav: 0.9375rem; /* 15px */ --text-button: 0.9375rem; /* 15px */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.30; --leading-normal: 1.60; --leading-relaxed: 1.75; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; /* ============================================================ * NAVIGATION * ============================================================ */ --nav-height: 76px; --nav-height-mobile: 68px; --nav-bg: rgba(255, 255, 255, 0.92); --nav-border: #e2e8f0; --nav-blur: blur(16px); --z-nav: 300; --z-dropdown: 100; --z-modal: 500; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } }