/* Adivera Design Tokens โ€” CSS custom properties Generated from handoff/tokens.json (v1.1.0) ยท Adivera Brand Guidelines V2.0 Usage: */ :root { /* core */ --ad-ink: #14161A; --ad-ink-raised: #1B1E23; --ad-ivory: #F2EFE8; --ad-paper: #F6F3EC; --ad-stone: #8A8477; --ad-stone-deep: #6A655A; --ad-stone-light: #9A948A; --ad-earth: #4A463E; --ad-stone-mist: #B5B0A6; --ad-stone-shadow: #5C5850; --ad-border-light: #DDD8CC; --ad-border-dark: #24272D; --ad-border-dark-strong: #2C2F36; /* division accents */ --ad-rhodium: #A5A094; --ad-rhodium-light: #D6D2C8; --ad-rhodium-deep: #6E6A5F; --ad-bronze: #B0895A; --ad-bronze-deep: #7A5A33; --ad-slate: #7D93A8; --ad-slate-deep: #4A5C6E; --ad-sage: #7D9A86; /* reserved โ€” Adivera.life */ --ad-sage-deep: #4A6350; /* state */ --ad-positive: #4E6B52; --ad-attention: #A8752F; --ad-critical: #8C3A32; --ad-critical-on-ink: #C98B84; /* type */ --ad-font-display: 'Marcellus', 'Times New Roman', serif; --ad-font-text: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif; --ad-size-display-xl: 64px; --ad-size-display: 48px; --ad-size-h1: 40px; --ad-size-h2: 32px; --ad-size-h3: 24px; --ad-size-body-lg: 18px; --ad-size-body: 16px; --ad-size-small: 14px; --ad-size-label: 12px; --ad-size-micro: 11px; --ad-track-label: 0.3em; --ad-track-wordmark: 0.3em; --ad-track-division: 0.44em; --ad-track-legal: 0.14em; --ad-track-nav: 0.24em; --ad-track-cta: 0.28em; /* space */ --ad-space-1: 4px; --ad-space-2: 8px; --ad-space-3: 12px; --ad-space-4: 16px; --ad-space-5: 24px; --ad-space-6: 32px; --ad-space-7: 48px; --ad-space-8: 64px; --ad-space-9: 96px; --ad-space-10: 128px; --ad-space-11: 192px; --ad-space-12: 256px; /* layout */ --ad-container-page: 1080px; --ad-container-content: 1200px; --ad-container-wide: 1440px; --ad-container-reading: 680px; --ad-gutter: 20px; /* shape, motion */ --ad-radius: 0; --ad-hairline: 1px; --ad-shadow-floating: 0 12px 32px rgba(0,0,0,0.45); --ad-duration-instant: 120ms; --ad-duration-base: 200ms; --ad-duration-slow: 320ms; --ad-ease: cubic-bezier(0.2, 0, 0.2, 1); } @media (min-width: 768px) { :root { --ad-gutter: 32px; } } @media (min-width: 1024px) { :root { --ad-gutter: 48px; } } /* ---- themes: semantic roles ---- */ [data-theme="ink"] { --ad-surface: var(--ad-ink); --ad-surface-raised: var(--ad-ink-raised); --ad-text: var(--ad-ivory); --ad-text-secondary: var(--ad-stone-light); --ad-text-body: var(--ad-stone-mist); --ad-border: var(--ad-border-dark); --ad-border-strong: var(--ad-border-dark-strong); --ad-focus: var(--ad-rhodium-light); --ad-accent: var(--ad-accent-on-ink); } [data-theme="ivory"] { --ad-surface: var(--ad-ivory); --ad-surface-raised: var(--ad-paper); --ad-text: var(--ad-ink); --ad-text-secondary: var(--ad-stone-deep); --ad-text-body: var(--ad-earth); --ad-border: var(--ad-border-light); --ad-border-strong: var(--ad-border-light); --ad-focus: var(--ad-ink); --ad-accent: var(--ad-accent-on-light); } /* ---- division scopes ---- */ [data-division="group"] { --ad-accent-on-light: var(--ad-rhodium); --ad-accent-on-ink: var(--ad-rhodium-light); --ad-accent-text: var(--ad-rhodium-deep); } [data-division="ventures"] { --ad-accent-on-light: var(--ad-bronze); --ad-accent-on-ink: var(--ad-bronze); --ad-accent-text: var(--ad-bronze-deep); } [data-division="software"] { --ad-accent-on-light: var(--ad-slate); --ad-accent-on-ink: var(--ad-slate); --ad-accent-text: var(--ad-slate-deep); } [data-division="life"] { --ad-accent-on-light: var(--ad-sage); --ad-accent-on-ink: var(--ad-sage); --ad-accent-text: var(--ad-sage-deep); } /* ---- base ---- */ body { margin: 0; background: var(--ad-surface); color: var(--ad-text); font-family: var(--ad-font-text); font-size: var(--ad-size-body); line-height: 1.6; text-wrap: pretty; } h1, h2, h3 { font-family: var(--ad-font-display); font-weight: 400; margin: 0; } a { color: var(--ad-text); text-decoration: none; border-bottom: 1px solid var(--ad-accent); transition: border-color var(--ad-duration-base) var(--ad-ease), color var(--ad-duration-base) var(--ad-ease); } a:hover { color: var(--ad-accent); border-bottom-color: var(--ad-text); } a:focus-visible { outline: 1px solid var(--ad-focus); outline-offset: 2px; } .ad-label { font-size: var(--ad-size-label); letter-spacing: var(--ad-track-label); text-transform: uppercase; color: var(--ad-text-secondary); } /* Accents are never small text on light surfaces โ€” see tokens.json color.contrast.rule */ @media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; animation-duration: 1ms !important; } }