/* ===================================================== PROVADIT — Design Tokens (Identity Guide) Enterprise IT Consulting & QA Software Testing ===================================================== */ :root { /* ========================================================= OFFICIAL BRAND COLORS (Corporate Design) These are the authoritative brand values. Do not alter. ========================================================= */ /* Marine range — from official brand gradients */ --brand-marine-dark: #001A33; /* Principal brand — authority, stability, structure */ --brand-marine-mid: #27426E; /* Darker blue-teal — secondary text on white */ --brand-marine-light: #3D69AD; /* Lighter marine — gradient endpoint, accent */ /* Crimson range — from official brand gradients */ --brand-crimson-dark: #800D29; /* Dark crimson — hover states, deep links */ --brand-crimson: #BF133C; /* Signature crimson — CTAs, interactive emphasis */ --brand-crimson-bright: #FF1A51; /* Bright crimson — gradient endpoint */ /* ========================================================= SURFACES — layered from most neutral to strongest brand */ /* Light surfaces (editorial / content areas) */ --surface-white: #FFFFFF; /* Clean white — dominant surface */ --surface-warm: rgba(232, 209, 192, 0.28); /* Warm beige tint — subtle section contrast */ --surface-subtle: #F5F6F8; /* Near-white gray — cards, hover states */ /* Dark surfaces (structural / branded) */ --surface-marine: var(--brand-marine-dark); /* Full-strength marine — nav, footer, hero */ --surface-marine-deep: #0D1B2A; /* Slightly lighter than marine — alternative dark sections */ /* ========================================================= TEXT — hierarchy from primary (most important) to muted */ /* On light surfaces */ --text-primary: var(--brand-marine-dark); /* Headings, body copy on white */ --text-secondary: var(--brand-marine-mid); /* Descriptions, captions */ --text-muted: #6B7A8D; /* Labels, secondary info on white */ --text-brand-accent: var(--brand-crimson-dark); /* Links on white (WCAG AA + decoration) */ /* On dark surfaces */ --text-on-marine: #FFFFFF; /* Primary on marine */ --text-on-marine-soft: rgba(255, 255, 255, 0.85); /* Secondary body on marine */ --text-on-marine-muted: rgba(255, 255, 255, 0.80); /* Captions, labels on marine */ /* ========================================================= ACCENTS & STATE COLORS */ /* Eyebrow / label highlight — gold from brand palette Darkened for WCAG AA compliance (ratio: ~6.5:1 on dark marine) */ --accent-highlight: #E6B800; /* Gold for eyebrow text, stat numbers */ /* Form states (brand-aligned) */ --color-error: var(--brand-crimson); /* Error border + message */ --color-success: #2B7A3A; /* Dark green — accessible on white */ --color-success-bg: rgba(43, 122, 58, 0.06); /* Success background tint */ /* ========================================================= BORDERS & DIVIDERS — subtle to strong */ --border-subtle: #E8E9EB; /* Faint dividers between sections */ --border-default: var(--surface-subtle); /* Card borders, form inputs */ --border-strong: var(--brand-marine-mid); /* Section dividers, strong rules */ /* ========================================================= OFFICIAL SECONDARY PALETTE — functional / graphic use */ /* Use moderately: diagrams, illustrations, confirmation/error states. Do not use as decorative page coloration. */ --secondary-green: #95C11E; /* Success highlights, eco indicators */ --secondary-purple: #5C4E63; /* Secondary icons, muted borders */ --secondary-teal: #004C6A; /* Surface transitions, subtle depth */ --secondary-beige: #E8D1C0; /* Warm card surfaces (diagrams only) */ --secondary-light-gray: #DADAD9; /* Dividers in diagrams */ /* ========================================================= GRADIENTS — use deliberately, not everywhere */ --gradient-marine: linear-gradient(135deg, var(--brand-marine-dark) 0%, var(--brand-marine-light) 100%); --gradient-crimson: linear-gradient(135deg, var(--brand-crimson-dark) 0%, var(--brand-crimson-bright) 100%); --gradient-marine-crimson: linear-gradient(135deg, var(--brand-marine-dark) 0%, var(--brand-crimson) 100%); --gradient-marine-soft: linear-gradient(135deg, var(--surface-marine) 0%, rgba(27, 61, 110, 0.85) 100%); /* Overlay gradient for hero / page-hero */ --gradient-overlay: linear-gradient(to bottom, rgba(0, 26, 51, 0.08), transparent); /* ========================================================= SEMANTIC TOKENS — what components should consume */ /* Primary brand surface (header, nav, footer) */ --color-surface-header: var(--surface-marine); --color-surface-footer: var(--surface-marine-deep); --color-surface-dark: var(--surface-marine); /* Light / content surfaces */ --color-surface-white: var(--surface-white); --color-surface-light: var(--surface-warm); --color-surface-subtle: var(--surface-subtle); /* Text colors */ --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-text-brand: var(--text-brand-accent); --color-text-secondary-alt: #7A8291; /* Neutral secondary text on white */ /* Text on dark surfaces */ --color-text-on-white: var(--text-primary); --color-text-safe-light: var(--text-on-marine); --color-text-safe-dark: var(--text-primary); --color-text-on-marine: var(--text-on-marine); --color-text-on-marine-mid: var(--text-on-marine-soft); --color-text-on-marine-muted: var(--text-on-marine-muted); /* Borders */ --color-border: var(--border-subtle); --color-border-strong: var(--border-strong); /* Inline-use helpers (dark surfaces) */ --divider-dark: rgba(255, 255, 255, 0.12); /* Divider line on dark backgrounds */ --text-on-marine: #FFFFFF; /* Primary white text on marine */ /* Focus ring */ --color-focus-ring: rgba(191, 19, 60, 0.45); /* Legacy aliases (preserve backwards compatibility) */ --color-brand-accent: var(--text-brand-accent); /* Brand link accent — legacy name */ --color-marine-primary: var(--brand-marine-dark); --color-crimson-accent: var(--brand-crimson); --color-crimson-dark: var(--brand-crimson-dark); --color-pure-black: var(--brand-marine-mid); --color-purple-gray: var(--secondary-purple); --color-lime-accent: var(--secondary-green); --color-warm-beige: var(--secondary-beige); --color-light-gray: var(--secondary-light-gray); --color-teal-dark: var(--secondary-teal); --color-blue-variant: var(--brand-marine-light); --color-white: var(--surface-white); /* ---- Gradient aliases (legacy compatibility) ----------- */ --color-gradient-hero: var(--gradient-marine-soft); --color-gradient-overlay: var(--gradient-overlay); /* ========================================================= SPACING SCALE (8px base) */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-s: 16px; --space-m: 24px; --space-l: 32px; --space-lg: 32px; /* Alias — used by use-case/mobile spacing */ --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px; --space-5xl: 160px; /* ========================================================= TYPOGRAPHY (Inter — Identity Guide) */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-heading: 'Inter', system-ui, -apple-system, sans-serif; --font-heading-medium: 'Inter Medium', system-ui, -apple-system, sans-serif; --text-xs: 0.75rem; /* 12px — captions, metadata */ --text-sm: 0.875rem; /* 14px — footnotes, labels */ --text-base: 1rem; /* 16px — body copy */ --text-lg: 1.125rem; /* 18px — lead paragraphs */ --text-xl: 1.25rem; /* 20px — section sub-heads */ --text-2xl: 1.5rem; /* 24px — H3 */ --text-3xl: 1.875rem; /* 30px — H2 */ --text-4xl: 2.25rem; /* 36px — H1 (hero) */ --text-5xl: 3rem; /* 48px — hero / landing headlines */ /* Font weights — brand identity */ --weight-light: 300; /* Body copy, subtle text */ --weight-semibold: 600; /* Headlines, sublines, emphasis */ --weight-bold: 700; /* Strong emphasis (legacy alias) */ --weight-black: 900; /* Major titles, striking headlines */ /* Line-heights — enterprise consulting readability */ --leading-tight: 1.20; /* Headings */ --leading-snug: 1.35; --leading-normal: 1.60; /* Body copy */ --leading-relaxed: 1.75; --tracking-wider: .12em; /* Uppercase label letter-spacing */ /* ---- Line-height helpers ---- */ --lh-h1: 1.20; --lh-h2: 1.30; --lh-h3: 1.40; --lh-body: 1.60; /* ========================================================= LAYOUT & GRID */ --max-width: 1200px; --header-height: 72px; --z-header: 1000; --z-overlay: 900; --z-toast: 1100; --breakpoint-sm: 480px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; /* ========================================================= BORDER RADIUS */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ========================================================= SHADOWS */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06); /* Card resting elevation */ --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.10); /* Card hover elevation */ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10); --shadow-xl: 0 16px 36px rgba(0, 0, 0, 0.12); /* ========================================================= FOCUS RING (accessibility) */ --focus-ring: 0 0 0 3px var(--color-focus-ring); /* ========================================================= ANIMATION TIMING */ --ease-out: cubic-bezier(.25,.1,.25,1); --ease-spring: cubic-bezier(.22,1,.36,1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; } /* ===================================================== prefers-reduced-motion tokens (set via media query) ===================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 100ms; --duration-normal: 150ms; --duration-slow: 200ms; } }