/* ========================================================================= GEO SOLUTIONS — DESIGN TOKENS v4.0 Generated: May 2026 Source: design-tokens-geosolutions-v4.md Architecture: Altrum-derived layout/motion + GEO color identity Mode: Dark only (light mode dropped per Phase 7 decision) ========================================================================= */ :root { /* ===================================================================== 1. FONT FAMILIES General Sans + JetBrains Mono — preserved from v3.1 (locked) Loaded via Fontshare + Google Fonts CDN in ===================================================================== */ --font-display: "General Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --font-body: "General Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", monospace; /* ===================================================================== 2. COLOR — SURFACES Deep-black base + 3 elevation layers (Altrum) ===================================================================== */ --color-bg-base: #070707; /* page background — deepest */ --color-bg-surface-1: #181818; /* card primary — most cards */ --color-bg-surface-2: #232323; /* card emphasis — pricing, hover, modals */ --color-bg-surface-3: #2a2a2d; /* nested surfaces, hero pricing link */ --color-bg-input: #444; /* form inputs default */ --color-bg-input-focus: #121212; /* form inputs focus — deepens */ /* ===================================================================== 3. COLOR — TEXT White-based 4-step hierarchy ===================================================================== */ --color-text-primary: #ffffff; /* headings, body, CTA text on dark */ --color-text-secondary: rgba(255,255,255,0.70); /* supporting text */ --color-text-tertiary: rgba(255,255,255,0.55); /* captions, metadata */ --color-text-quaternary: rgba(255,255,255,0.33); /* disabled, decorative numerals */ --color-text-on-accent: #0F1F14; /* text on green CTA — unified with logo dark color (Option B, May 2026) */ /* ===================================================================== 4. COLOR — BORDERS 4-step opacity scale (Altrum) ===================================================================== */ --color-border-strong: #333; /* card borders, dividers */ --color-border-medium: rgba(255,255,255,0.27); /* secondary borders */ --color-border-subtle: rgba(255,255,255,0.15); /* section dividers */ --color-border-faint: rgba(255,255,255,0.10); /* input borders */ --color-border-dotted: rgba(255,255,255,0.35); /* dotted dividers */ /* ===================================================================== 5. COLOR — BRAND ACCENT (LOCKED FROM v3.1) #82FF8C — used functionally only per discipline rules ===================================================================== */ --color-accent: #82FF8C; --color-accent-hover: #6FE878; --color-accent-muted: #2D4A33; --color-accent-glow: rgba(130, 255, 140, 0.15); /* ===================================================================== 6. COLOR — GLASS / BACKDROP For backdrop-filter overlays (Altrum signature) ===================================================================== */ --color-glass-light: rgba(255, 255, 255, 0.10); --color-glass-medium: rgba(255, 255, 255, 0.12); --color-glass-heavy: rgba(255, 255, 255, 0.24); --color-glass-dark: rgba(51, 51, 51, 0.55); --color-glass-nav-bg: rgba(7, 7, 7, 0.60); /* glass nav background */ /* ===================================================================== 7. COLOR — SEMANTIC (preserved from v3.1) ===================================================================== */ --color-success: #7DFFAA; --color-warning: #FFB454; --color-danger: #FF6B6B; /* ===================================================================== 8. TYPOGRAPHY — TYPE SCALE Aggressive Altrum scale: clamp() for fluid display sizes Mobile resets in @media block at bottom of file ===================================================================== */ /* Mega display — homepage hero only */ --text-mega: clamp(6rem, 14vw, 14rem); /* 96 → 224px */ /* Display — page titles, section heroes */ --text-display-xl: clamp(4rem, 9vw, 9rem); /* 64 → 144px */ --text-display-lg: clamp(3rem, 6vw, 6rem); /* 48 → 96px */ --text-display-md: clamp(2.25rem, 4vw, 4rem); /* 36 → 64px */ /* Headings — Altrum scale */ --text-h1: 3rem; /* 48px */ --text-h2: 1.9rem; /* 30.4px */ --text-h3: 1.4rem; /* 22.4px */ --text-h4: 1.2rem; /* 19.2px */ --text-h5: 0.75rem; /* 12px — eyebrow */ /* Body */ --text-body-lg: 1.125rem; /* 18px — lede */ --text-body: 1rem; /* 16px — default */ --text-body-sm: 0.9375rem; /* 15px — nav, secondary */ --text-caption: 0.875rem; /* 14px */ --text-micro: 0.8125rem; /* 13px — labels */ --text-mono-sm: 0.8125rem; /* 13px — system codes */ /* ===================================================================== 9. TYPOGRAPHY — LINE HEIGHTS ===================================================================== */ --leading-mega: 0.85; --leading-tight: 1.05; --leading-snug: 1.1; --leading-normal: 1.3; --leading-relaxed: 1.5; /* ===================================================================== 10. TYPOGRAPHY — LETTER SPACING Aggressive negative tracking on display (Altrum signature) ===================================================================== */ --tracking-mega: -0.04em; --tracking-tighter: -0.025em; --tracking-tight: -0.015em; --tracking-normal: -0.01em; --tracking-wide: 0.04em; --tracking-widest: 0.08em; /* ===================================================================== 11. TYPOGRAPHY — FONT WEIGHTS (3 only) ===================================================================== */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* ===================================================================== 12. SPACING — MICRO (4px base) ===================================================================== */ --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 */ /* ===================================================================== 13. SPACING — SECTION / LAYOUT (Altrum) ===================================================================== */ --section-pad-y: 140px; --section-pad-y-tablet: 80px; --section-pad-y-mobile: 50px; --section-pad-x: 2%; --container-max: 1400px; --container-max-narrow: 840px; /* ===================================================================== 14. SPACING — DIVIDERS ===================================================================== */ --divider-xs: 10px; --divider-sm: 20px; --divider-md: 50px; --divider-lg: 60px; --divider-xl: 70px; --divider-xxl: 100px; --divider-3xl: 120px; /* ===================================================================== 15. BORDER RADIUS ===================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-pill: 30px; --radius-pill-lg: 60px; --radius-feature: 50px; /* signature work-card image radius */ --radius-circle: 100%; /* ===================================================================== 16. SHADOWS 11-layer button shadow is Altrum signature ===================================================================== */ --shadow-button: 0 2px 5px rgba(0,0,0,0.20), -1.1px 1.2px 0.1px rgba(0,0,0,0.012), -2.2px 2.4px 0.3px rgba(0,0,0,0.020), -3.3px 3.7px 0.5px rgba(0,0,0,0.020), -4.6px 5.1px 0.7px rgba(0,0,0,0.031), -6px 6.6px 0.9px rgba(0,0,0,0.031), -7.6px 8.4px 1.3px rgba(0,0,0,0.031), -9.5px 10.5px 1.8px rgba(0,0,0,0.031), -11.8px 13px 2.4px rgba(0,0,0,0.031), -14.7px 16.2px 3.2px rgba(0,0,0,0.031), -18.3px 20.2px 4.4px rgba(0,0,0,0.039), -23px 25.4px 6px rgba(0,0,0,0.039), -29.3px 32.3px 8.2px rgba(0,0,0,0.039), -37.8px 41.8px 11.3px rgba(0,0,0,0.039), -49.9px 55.1px 15.9px rgba(0,0,0,0.039); --shadow-card-hover-glow: 0 0 32px var(--color-accent-glow); --shadow-elevation-1: 0 4px 12px rgba(0,0,0,0.40); --shadow-elevation-2: 0 8px 32px rgba(0,0,0,0.50); /* ===================================================================== 17. BACKDROP FILTERS — Altrum glass system ===================================================================== */ --blur-sm: blur(15px); --blur-md: blur(20px); --blur-lg: blur(25px); --blur-xl: blur(30px); --blur-2xl: blur(40px); /* ===================================================================== 18. MOTION — EASING ===================================================================== */ --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ===================================================================== 19. MOTION — DURATIONS ===================================================================== */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-medium: 400ms; --duration-slow: 600ms; --duration-page: 800ms; /* ===================================================================== 20. Z-INDEX SCALE ===================================================================== */ --z-base: 1; --z-elevated: 10; --z-sticky: 100; --z-nav: 999; --z-overlay: 998; --z-modal: 1000; --z-tooltip: 1100; --z-toast: 1200; } /* ========================================================================= RESPONSIVE TYPOGRAPHY OVERRIDES Altrum scale resets at major breakpoints ========================================================================= */ /* Tablet — ≤ 991px */ @media (max-width: 991px) { :root { --text-mega: clamp(5rem, 12vw, 7rem); --text-display-xl: clamp(3rem, 8vw, 5.5rem); --text-display-lg: clamp(2.5rem, 6vw, 4rem); --text-display-md: clamp(2rem, 4vw, 3rem); --text-h1: 2rem; --text-h2: 1.6rem; } } /* Mobile — ≤ 767px */ @media (max-width: 767px) { :root { --text-mega: clamp(3.5rem, 14vw, 5rem); --text-display-xl: clamp(2.25rem, 10vw, 4rem); --text-display-lg: 2.5rem; --text-display-md: 1.9rem; --text-h1: 1.75rem; --text-h2: 1.4rem; } } /* Small mobile — ≤ 479px */ @media (max-width: 479px) { :root { --text-mega: clamp(2.5rem, 14vw, 4rem); --text-display-xl: clamp(1.75rem, 10vw, 3rem); --text-display-lg: 2rem; --text-display-md: 1.6rem; } } /* ========================================================================= REDUCED MOTION — global accessibility override ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= END OF tokens.css v4.0 ========================================================================= */