/* ========================================================================== ARIA — Apple Design Tokens All design decisions expressed as CSS custom properties. Based on DESIGN-apple.md — Apple's web presence design system. EVERY other CSS file MUST reference these tokens via var(--apple-*) or var(--tier-*). Never inline hex values elsewhere. ========================================================================== */ :root { /* ── Colors: Brand & Accent (Morandi-JHU) ── */ --apple-primary: #002D72; /* JHU Heritage Blue — single interactive color */ --apple-primary-focus: #1a3d8f; /* Slightly lighter Heritage Blue for hover/focus ring */ --apple-primary-on-dark: #68ACE5; /* JHU Spirit Blue — links/buttons on dark tiles */ --apple-ink: #1d1d1f; /* Near-black for all text on light surfaces */ --apple-body: #1d1d1f; /* Same as ink — one near-black for text */ --apple-body-on-dark: #ffffff; /* White text on dark tiles */ --apple-body-muted: #cccccc; /* Secondary copy on dark tiles */ --apple-ink-muted-80: #333333; /* Body on pearl/surface-pearl */ --apple-ink-muted-48: #7a7a7a; /* Disabled + fine-print */ --apple-canvas: #ffffff; /* Pure white — primary canvas */ --apple-parchment: #f5f5f7; /* Off-white alternating canvas */ --apple-surface-pearl: #fafafc; /* Ghost button fill */ --apple-surface-tile-1: #272729; /* Primary dark tile */ --apple-surface-tile-2: #2a2a2c; /* Dark tile micro-step lighter */ --apple-surface-tile-3: #252527; /* Dark tile micro-step darker */ --apple-surface-black: #000000; /* True black — nav bar only */ --apple-surface-chip: #d2d2d7; /* Translucent chip gray (64% alpha in use) */ --apple-divider-soft: #f0f0f0; /* Soft border on secondary buttons */ --apple-hairline: #e0e0e0; /* 1px hairline border */ --apple-on-primary: #ffffff; /* White on Action Blue */ --apple-on-dark: #ffffff; /* White on dark surfaces */ /* ── Tier Colors (Morandi-JHU) ── */ --tier-1: #002D72; /* Tier 1 Direct = Heritage Blue */ --tier-1-bg: rgba(0, 45, 114, 0.06); --tier-1-border: #002D72; --tier-2: #A99400; /* Tier 2 Analogical = Sable Gold */ --tier-2-bg: rgba(169, 148, 0, 0.08); --tier-2-border: #A99400; --tier-3: #6c7a92; /* Tier 3 Fallback = Morandi slate-blue */ --tier-3-bg: rgba(108, 122, 146, 0.06); --tier-3-border: #6c7a92; /* ── Semantic Accents (Morandi-JHU) ── */ --aria-success: #2a8a6e; /* Morandi muted green (replaces mint-aligned #34c759) */ --aria-success-bg: rgba(42, 138, 110, 0.08); --aria-warning: #A99400; /* Sable Gold — same as tier 2 for harmony */ --aria-warning-bg: rgba(169, 148, 0, 0.10); --aria-danger: #b8504a; /* Morandi muted red */ --aria-danger-bg: rgba(184, 80, 74, 0.08); /* ── Typography: Font Families ── */ --font-display: "SF Pro Display", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "SF Pro Text", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* ── Typography: Size Scale ── */ --text-hero: 64px; --text-display-lg: 48px; --text-display-md: 40px; --text-lead: 32px; --text-lead-airy: 27px; --text-tagline: 24px; --text-body: 20px; --text-body-strong: 20px; --text-dense-link: 20px; --text-caption: 17px; --text-caption-strong: 17px; --text-button-large: 20px; --text-button-utility: 16px; --text-fine-print: 14px; --text-micro-legal: 12px; --text-nav-link: 14px; /* ── Typography: Weight ── */ --weight-light: 300; --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; /* ── Typography: Line Height ── */ --leading-hero: 1.06; --leading-display-lg: 1.10; --leading-display-md: 1.20; --leading-lead: 1.18; --leading-lead-airy: 1.45; --leading-tagline: 1.25; --leading-body: 1.55; --leading-body-strong: 1.30; --leading-dense-link: 2.41; --leading-caption: 1.45; --leading-caption-strong: 1.30; --leading-fine-print: 1.0; --leading-nav-link: 1.0; /* ── Typography: Letter Spacing ── Loosened relative to strict SF Pro metrics: Inter (our actual rendered fallback, since "SF Pro Text/Display" never resolve as named web fonts) has a denser default spacing, so body/caption/ fine-print tracking is opened up for comfortable reading. */ --tracking-hero: -0.30px; --tracking-display-lg: -0.10px; --tracking-display-md: -0.25px; --tracking-lead: 0.10px; --tracking-lead-airy: 0.05px; --tracking-tagline: 0.12px; --tracking-body: 0.01px; --tracking-caption: 0.00px; --tracking-fine-print: 0.02px; --tracking-nav-link: 0.02px; /* ── Spacing ── */ --sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 17px; --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px; --sp-section: 80px; /* ── Border Radius ── */ --radius-none: 0px; --radius-xs: 5px; --radius-sm: 8px; --radius-md: 11px; --radius-lg: 18px; --radius-pill: 9999px; --radius-full: 9999px; /* ── Elevation ── */ /* Apple uses exactly ONE shadow — for product imagery only */ --shadow-product: 0 3px 30px rgba(0, 0, 0, 0.22); /* NO other shadows. Elevation = surface color change. */ /* ── Layout ── */ --content-width: 980px; --content-width-wide: 1440px; --nav-height: 44px; --subnav-height: 52px; --header-offset: 96px; /* nav-height + subnav-height */ } /* ========================================================================== Morandi-JHU Personal Accent + Glassmorphic Tokens The Spirit-Blue accent replaces the prior mint system to harmonize with the Heritage / Spirit / Sable palette of Johns Hopkins. Spirit Blue (JHU secondary, #68ACE5) carries the personal accent role: focus rings, glass glows, hover tints. Existing --apple-* and --tier-* tokens are the source of truth and now resolve to JHU Heritage Blue / Sable Gold. ========================================================================== */ :root { /* ── Spirit-Blue accent (personal — replaces prior mint) ── */ --mint: #68ACE5; /* JHU Spirit Blue — focus rings, glass halos */ --mint-bright: #8fc1ea; /* Lighter Spirit for hover */ --mint-soft: rgba(104, 172, 229, 0.10); /* Soft Spirit wash */ --mint-glow: rgba(104, 172, 229, 0.20); /* Spotlight glow (Heritage-tinted blue) */ --mint-shadow: rgba(104, 172, 229, 0.22); /* CTA shadow on hover */ --spirit-blue: #68ACE5; /* Alias for Spirit Blue in glass recipes */ /* ── Ink / graphite (personal) ── */ --ink-deep: #141e2d; /* Deep ink for hero text on light bg */ --graphite: #4a5568; /* Graphite for muted nav/header */ /* ── Pearl & glass (personal) ── */ --pearl: #fafafc; /* Pearl — page-level backdrop under mesh */ --pearl-glass: rgba(255, 255, 255, 0.55); --pearl-glass-strong: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.6); --glass-border-strong: rgba(20, 30, 45, 0.08); /* ── Motion (personal) ── */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* bouncy spring */ --ease-out-expo: cubic-bezier(.16, 1, .3, 1); /* hero entrance */ /* ── Glass elevation (personal) ── */ --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.06); --shadow-glass-hover: 0 20px 48px rgba(0, 0, 0, 0.10); --shadow-header-pill: 0 8px 32px rgba(20, 30, 45, 0.08); }