/* ────────────────────────────────────────────────────────────────────── AimwellBio Tier Tokens · single source for cross-tier consistency 2026-05-24 · pattern derived from Observer rebuild Sourced from TIER-DESIGN-SYSTEM.md §2 and BRAND-SYSTEM.md §3 ────────────────────────────────────────────────────────────────────── */ :root { /* Brand-locked palette — never edit (BRAND-SYSTEM.md §3) */ --aimwell-teal: #00B3C6; --deep-ocean: #007589; --night: #0A0F17; --steel: #AEB6BF; --pure: #FFFFFF; /* Cross-tier structural tokens (identical across all tier dashboards) */ --tier-bg: #060912; --tier-card: rgba(14, 20, 32, 0.85); --tier-card-lift: rgba(20, 28, 42, 0.92); --tier-card-press: rgba(8, 12, 20, 0.95); --tier-border: rgba(255, 255, 255, 0.06); --tier-border-soft: rgba(255, 255, 255, 0.04); --tier-text-primary: rgba(255, 255, 255, 0.96); --tier-text-secondary: rgba(255, 255, 255, 0.62); --tier-text-muted: rgba(255, 255, 255, 0.40); --tier-text-dim: rgba(255, 255, 255, 0.28); --tier-card-radius: 12px; --tier-card-radius-soft: 8px; --tier-pill-radius: 999px; --tier-shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 24px rgba(0,0,0,0.35); --tier-shadow-float: 0 12px 40px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset; --tier-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tier-dur-base: 320ms; --tier-dur-fast: 180ms; /* Font stack (current implementation — Söhne migration is a separate task) */ --tier-font-serif: var(--aw-sans); --tier-font-sans: var(--aw-sans); --tier-font-mono: var(--aw-mono); /* Default tier accent — overridden per body[data-tier] block below */ --tier-accent: #00B3C6; --tier-accent-bright: #00D2EB; --tier-accent-deep: #007589; --tier-accent-glow: rgba(0, 179, 198, 0.42); --tier-accent-haze: rgba(0, 179, 198, 0.10); --tier-border-brand: rgba(0, 179, 198, 0.18); } /* ─── Per-tier color anchor (sourced from TIER-DESIGN-SYSTEM.md §2.1) ── Each tier dashboard sets (etc.) and these accent variables flow through every component that references them. */ body[data-tier="trial"] { --tier-accent: #E0843C; /* orange — temporary access, onboarding */ --tier-accent-bright: #F5A560; --tier-accent-deep: #B5651E; --tier-accent-glow: rgba(224, 132, 60, 0.42); --tier-accent-haze: rgba(224, 132, 60, 0.10); --tier-border-brand: rgba(224, 132, 60, 0.18); --tier-name: 'TRIAL'; } body[data-tier="signal"] { --tier-accent: #00B3C6; /* AIMWELL TEAL — default brand state */ --tier-accent-bright: #00D2EB; --tier-accent-deep: #007589; --tier-accent-glow: rgba(0, 179, 198, 0.42); --tier-accent-haze: rgba(0, 179, 198, 0.10); --tier-border-brand: rgba(0, 179, 198, 0.18); --tier-name: 'SIGNAL'; } body[data-tier="shield"] { --tier-accent: #52D98D; /* emerald — vigilance, protection */ --tier-accent-bright: #8FE9B4; --tier-accent-deep: #2EA465; --tier-accent-glow: rgba(82, 217, 141, 0.42); --tier-accent-haze: rgba(82, 217, 141, 0.10); --tier-border-brand: rgba(82, 217, 141, 0.18); --tier-name: 'SHIELD'; } body[data-tier="command"] { --tier-accent: #D4AF37; /* gold — calm executive authority */ --tier-accent-bright: #E8C75A; --tier-accent-deep: #A88828; --tier-accent-glow: rgba(212, 175, 55, 0.42); --tier-accent-haze: rgba(212, 175, 55, 0.10); --tier-border-brand: rgba(212, 175, 55, 0.20); --tier-name: 'COMMAND'; } body[data-tier="growth"] { --tier-accent: #7D50FF; /* violet — network expansion, leverage */ --tier-accent-bright: #9F7CFF; --tier-accent-deep: #5E36CC; --tier-accent-glow: rgba(125, 80, 255, 0.42); --tier-accent-haze: rgba(125, 80, 255, 0.10); --tier-border-brand: rgba(125, 80, 255, 0.20); --tier-name: 'GROWTH'; } body[data-tier="enterprise"] { --tier-accent: #C7CBD1; /* platinum / graphite — anti-design */ --tier-accent-bright: #E5E8EC; --tier-accent-deep: #898E96; --tier-accent-glow: rgba(199, 203, 209, 0.32); --tier-accent-haze: rgba(199, 203, 209, 0.08); --tier-border-brand: rgba(199, 203, 209, 0.18); --tier-name: 'ENTERPRISE'; } body[data-tier="observer"] { --tier-accent: #00B3C6; /* AIMWELL TEAL (FHIN entry tier) */ --tier-accent-bright: #00D2EB; --tier-accent-deep: #007589; --tier-accent-glow: rgba(0, 179, 198, 0.42); --tier-accent-haze: rgba(0, 179, 198, 0.10); --tier-border-brand: rgba(0, 179, 198, 0.18); --tier-name: 'OBSERVER'; } body[data-tier="contributor"] { --tier-accent: #5DAFFF; /* sky-blue lift from teal — verified */ --tier-accent-bright: #8AC8FF; --tier-accent-deep: #3A82C6; --tier-accent-glow: rgba(93, 175, 255, 0.42); --tier-accent-haze: rgba(93, 175, 255, 0.10); --tier-border-brand: rgba(93, 175, 255, 0.20); --tier-name: 'CONTRIBUTOR'; } body[data-tier="researcher"] { --tier-accent: #A78BFA; /* lavender — evidence laboratory */ --tier-accent-bright: #C0A8FF; --tier-accent-deep: #7E5DD8; --tier-accent-glow: rgba(167, 139, 250, 0.42); --tier-accent-haze: rgba(167, 139, 250, 0.10); --tier-border-brand: rgba(167, 139, 250, 0.20); --tier-name: 'RESEARCHER'; } body[data-tier="institutional"] { --tier-accent: #3B2F8F; /* indigo — sovereign command */ --tier-accent-bright: #5C4FB0; --tier-accent-deep: #2A2168; --tier-accent-glow: rgba(59, 47, 143, 0.42); --tier-accent-haze: rgba(59, 47, 143, 0.10); --tier-border-brand: rgba(59, 47, 143, 0.24); --tier-name: 'INSTITUTIONAL'; } body[data-tier="founding"] { --tier-accent: #FFD065; /* warm gold — founding cohort */ --tier-accent-bright: #FFE499; --tier-accent-deep: #C99E36; --tier-accent-glow: rgba(255, 208, 101, 0.42); --tier-accent-haze: rgba(255, 208, 101, 0.10); --tier-border-brand: rgba(255, 208, 101, 0.22); --tier-name: 'FOUNDING'; } /* ─── Shared tier-component primitives ────────────────────────────────── Components that should look identical across all tier dashboards. Tier-specific surfaces use these as a base then layer atmosphere on top. ────────────────────────────────────────────────────────────────────── */ .tier-logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .tier-logo-img { height: 32px; width: auto; display: block; } .tier-logo-label { font-family: var(--tier-font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em; color: var(--tier-accent-bright); text-transform: uppercase; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.14); line-height: 1; } .tier-badge-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--tier-pill-radius); background: var(--tier-accent-haze); border: 1px solid var(--tier-border-brand); color: var(--tier-accent-bright); font-family: var(--tier-font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; } .tier-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tier-accent); box-shadow: 0 0 12px var(--tier-accent-glow); animation: tier-pulse 2.4s infinite; } @keyframes tier-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .tier-cta-primary { background: var(--tier-accent); color: #001114; padding: 12px 24px; font-size: 13px; font-weight: 600; border: none; border-radius: var(--tier-card-radius-soft); cursor: pointer; letter-spacing: 0.02em; box-shadow: 0 8px 24px var(--tier-accent-glow); transition: transform var(--tier-dur-fast) var(--tier-ease-out), box-shadow var(--tier-dur-fast) var(--tier-ease-out); text-decoration: none; display: inline-block; } .tier-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px var(--tier-accent-glow); }