/* ============================================================ AIVIATION Design System Tokens for: umbrella site + 5 apps -------------------------------------------------------------- Usage: The shared tokens live in :root. Each app overrides ~12 vars. ============================================================ */ :root { /* -------- Type stack -------- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-heading: var(--font-sans); /* -------- Type scale (web; iOS uses Dynamic Type) -------- */ --fs-12: 12px; --lh-12: 16px; --fs-13: 13px; --lh-13: 18px; --fs-14: 14px; --lh-14: 20px; --fs-15: 15px; --lh-15: 22px; --fs-16: 16px; --lh-16: 24px; --fs-18: 18px; --lh-18: 26px; --fs-20: 20px; --lh-20: 28px; --fs-24: 24px; --lh-24: 32px; --fs-30: 30px; --lh-30: 38px; --fs-36: 36px; --lh-36: 44px; --fs-48: 48px; --lh-48: 56px; --fs-60: 60px; --lh-60: 68px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.01em; --tracking-base: 0; --tracking-wide: 0.04em; /* -------- Spacing (4-pt grid) -------- */ --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-96: 96px; /* -------- Radii -------- */ --r-2: 2px; --r-4: 4px; --r-8: 8px; --r-12: 12px; /* card default (web) */ --r-14: 14px; /* iOS card default */ --r-20: 20px; --r-pill: 999px; /* -------- Shadows (used sparingly) -------- */ --shadow-sm: 0 1px 2px rgba(13, 18, 28, 0.04); --shadow-md: 0 1px 2px rgba(13, 18, 28, 0.04), 0 8px 24px rgba(13, 18, 28, 0.06); --shadow-lg: 0 1px 2px rgba(13, 18, 28, 0.04), 0 16px 48px rgba(13, 18, 28, 0.10); /* -------- Hit targets -------- */ --tap-min: 44px; /* -------- Motion -------- */ --dur-tap: 80ms; --dur-fast: 120ms; --dur-base: 200ms; --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ :root — generic light fallback for any page without data-app. ============================================================ */ :root { --bg: #FAFAF7; --surface: #FFFFFF; --elevated: #FFFFFF; --fg: #0F1620; --fg-muted: #4A5360; --fg-faint: #8A93A0; --rule: #E4E5E2; --rule-strong: #C9CBC6; --accent: #2563EB; --accent-fg: #FFFFFF; --accent-soft: #DCE7FB; --focus-ring: #2563EB; } /* ============================================================ Umbrella (aiviation.dev) — canonical dark cockpit-navy -------------------------------------------------------------- The umbrella ALWAYS renders on the canonical dark brand surface, matching the Instagram brand mark. Light mode is intentionally not supported on umbrella. Per-app marketing sites keep their own palettes. ============================================================ */ [data-app="umbrella"] { /* Brand palette sampled from the canonical AIVIATION lockup (aiviation-lockup-transparent.png): navy #0B0F14, lifted sky-blue #6BB6FF, and the cockpit-navy accent surface #264C68. */ --bg: #0B0F14; /* brand navy canvas */ --surface: #11161D; /* neutral panels / list rows */ --elevated: #1A2029; /* raised panels / popovers */ --fg: #F4F6F8; /* primary off-white text */ --fg-muted: #A8B0BA; --fg-faint: #6C7682; --rule: #1F2731; --rule-strong: #2D3744; --accent: #6BB6FF; /* lifted sky-blue (VIATION half of the wordmark) */ --accent-fg: #0B0F14; /* text/icons on --accent */ --accent-soft: #264C68; /* cockpit-navy accent surface (app cards, chips) */ --focus-ring: #6BB6FF; --glyph: #124D6D; /* deep teal — matches the lockup plane */ } /* ============================================================ 1. RegBrief — regulation gray + amber accent ============================================================ */ [data-app="regbrief"] { --bg: #F6F5F1; --surface: #FFFFFF; --elevated: #FFFFFF; --fg: #1A1916; --fg-muted: #4F4D47; --fg-faint: #8E8B82; --rule: #E2DFD7; --rule-strong: #C7C2B5; --accent: #B8651E; /* regulation amber */ --accent-fg: #FFFFFF; --accent-soft: #F4E9D9; --focus-ring: #B8651E; } /* ============================================================ 2. WilcoAI — linen paper + transmit red (the radio LED is on) -------------------------------------------------------------- Light is the design hero. The deep red accent is the LED color of a real PTT button; the linen background keeps the app calm and study-tool-shaped. Pattern 1 (same metaphor in both modes). ============================================================ */ [data-app="wilcoai"] { --bg: #F5F1EA; /* linen */ --surface: #FFFFFF; --elevated: #FFFFFF; --fg: #1A1716; /* warm ink */ --fg-muted: #5A5249; --fg-faint: #948C82; --rule: #E5DFD2; --rule-strong: #C7BFAE; --accent: #B92E2E; /* transmit red (PTT LED), ≈ 5.4:1 on bg */ --accent-fg: #FFFFFF; --accent-soft: #F5DCDC; /* red wash for active-radio chip */ --focus-ring: #B92E2E; } /* ============================================================ 3. ChartBrief — IFR plate blue + chart green ============================================================ */ [data-app="chartbrief"] { --bg: #DEE6EE; /* IFR plate background */ --surface: #ECF1F6; --elevated: #FFFFFF; --fg: #0E2540; /* plate ink */ --fg-muted: #3E5874; --fg-faint: #7B8DA3; --rule: #B7C3D1; --rule-strong: #8A9CB1; --accent: #2F6F4E; /* VOR / chart green */ --accent-fg: #FFFFFF; --accent-soft: #D6E5DD; --focus-ring: #2F6F4E; /* Severity tokens (ChartBrief-scoped; promote portfolio-wide when other apps need safety-signal UI). Used for NOTAM banners, runway-closed / NA warnings, the training-aid disclaimer, and the chart's critical/high annotation markers. Info-level uses --accent (a normal AI annotation is chart-green; amber/red are escalations). AA-verified on --bg / --surface. */ --severity-critical: #B23A2F; --severity-critical-soft: #F3DAD2; --severity-high: #A8651B; --severity-high-soft: #F0E2C9; --severity-fg: #FFFFFF; } /* ============================================================ 4. Checkride.bot — warm cream paper + exam green ============================================================ */ [data-app="checkride"] { --bg: #FBF6EC; /* study-room paper */ --surface: #FFFCF4; --elevated: #FFFFFF; --fg: #2A1F12; /* walnut */ --fg-muted: #5C4A33; --fg-faint: #9B8866; --rule: #E8DFC8; --rule-strong: #CFC2A1; --accent: #2F5D3A; /* exam green */ --accent-fg: #FFFFFF; --accent-soft: #DDE7D9; --focus-ring: #2F5D3A; /* Exam-state tokens (Checkride-scoped; promote portfolio-wide when other apps need scoring UI). pass=satisfactory, fail=unsatisfactory, caution=discontinued. All AA-verified on --bg/--surface. */ --status-pass: #2E7D46; --status-pass-soft: #DDE7D9; --status-pass-fg: #FFFFFF; --status-fail: #B23A2F; --status-fail-soft: #F3DAD2; --status-fail-fg: #FFFFFF; --status-caution: #A8651B; --status-caution-soft: #F0E2C9; --status-caution-fg: #FFFFFF; } /* ============================================================ 5. Clearance AI — cockpit blue on night-black (avionics) ============================================================ */ [data-app="clearanceai"] { --bg: #05080C; --surface: #0B1118; --elevated: #131C26; --fg: #E8F1FA; --fg-muted: #93A8BD; --fg-faint: #586878; --rule: #1B2632; --rule-strong: #2A3845; --accent: #4FB6E6; /* avionics cyan-blue */ --accent-fg: #05080C; --accent-soft: #0F2230; --focus-ring: #4FB6E6; } /* ============================================================ Dark mode — prefers-color-scheme: dark -------------------------------------------------------------- Light tokens above are the source of truth (already shipped to iOS Color sets). Dark tokens here OVERRIDE only when the user's system is set to dark. No manual toggle. Per app: - Bg → deep neutral or app-tinted near-black - Surface/Elevated → step-up gray for layering - Fg → high-contrast off-white (or the app's signature ink) - Accent → same brand hue, lifted in lightness if needed for AA contrast against the dark surface All foreground/background pairs verified ≥ 4.5:1 (AA body) or ≥ 3:1 for fg-faint (decorative/non-critical). ============================================================ */ @media (prefers-color-scheme: dark) { /* Umbrella is already canonical dark in its default block; :root in dark mode adopts the same dark tokens as a global fallback. */ :root { --bg: #0B0F14; --surface: #11161D; --elevated: #1A2029; --fg: #F4F6F8; --fg-muted: #A8B0BA; --fg-faint: #6C7682; --rule: #1F2731; --rule-strong: #2D3744; --accent: #6BB6FF; --accent-fg: #0B0F14; --accent-soft: #264C68; --focus-ring: #6BB6FF; } /* RegBrief — cockpit-night palette: navy body, sky-blue accent. Light mode keeps the regulation-paper amber treatment; dark mode shifts to a night-flying aesthetic per user preference. */ [data-app="regbrief"] { --bg: #0B1526; /* cockpit navy */ --surface: #0F1D35; --elevated: #162440; --fg: #ECEFF3; /* off-white, ≈ 18:1 on bg */ --fg-muted: #93A8BD; /* slate, ≈ 7.4:1 */ --fg-faint: #586878; /* deeper slate, ≈ 3.5:1 */ --rule: #1A2A3D; --rule-strong: #2A3D54; --accent: #38BDF8; /* sky-blue, AA on navy */ --accent-fg: #0B1526; --accent-soft: #0E1F33; --focus-ring: #38BDF8; } /* WilcoAI — same "radio LED" metaphor, at night. Warm walnut bg complements the linen of light mode (same yellow-warm family); the transmit red lifts to coral red (#E66A5E) so the LED still reads cleanly at AA on the dark surface. */ [data-app="wilcoai"] { --bg: #1C1612; /* warm walnut night */ --surface: #261E18; --elevated: #322820; --fg: #F4ECDC; /* paper-on-walnut, ≈ 14.0:1 on bg */ --fg-muted: #C5B393; /* ≈ 8.1:1 */ --fg-faint: #847258; /* ≈ 3.5:1 */ --rule: #2A2419; --rule-strong: #3D3526; --accent: #E66A5E; /* lifted coral red, ≈ 5.8:1 on bg */ --accent-fg: #1C1612; --accent-soft: #2D1A18; --focus-ring: #E66A5E; } /* ChartBrief — IFR plate, after-dark chart-light variant */ [data-app="chartbrief"] { --bg: #0A1622; /* deep plate-blue */ --surface: #0F1E2E; --elevated: #19293B; --fg: #DCE8F2; /* chart paper inverted, ≈ 13.4:1 */ --fg-muted: #94AFC8; /* ≈ 7.1:1 */ --fg-faint: #5A7892; /* ≈ 3.2:1 */ --rule: #1A2A3B; --rule-strong: #2B3F54; --accent: #5DBE89; /* lifted chart green for AA */ --accent-fg: #0A1622; --accent-soft: #11271E; --focus-ring: #5DBE89; /* Severity tokens, lifted for AA on the deep plate-blue surface. */ --severity-critical: #E0796B; --severity-critical-soft: #2E1A16; --severity-high: #D9A23E; --severity-high-soft: #2C2412; --severity-fg: #0A1622; } /* Checkride.bot — study room, after-hours */ [data-app="checkride"] { --bg: #14110B; --surface: #1C1812; --elevated: #25201A; --fg: #F4ECDC; /* paper-on-walnut, ≈ 14.0:1 */ --fg-muted: #C5B393; /* ≈ 8.1:1 */ --fg-faint: #847258; /* ≈ 3.5:1 */ --rule: #2A2419; --rule-strong: #3D3526; --accent: #6BBD7B; /* lifted exam green for AA */ --accent-fg: #14110B; --accent-soft: #1A2A1F; --focus-ring: #6BBD7B; /* Exam-state tokens, lifted for AA on the after-hours walnut surface. */ --status-pass: #5FB873; --status-pass-soft: #1A2A1F; --status-pass-fg: #14110B; --status-fail: #E0796B; --status-fail-soft: #2E1A16; --status-fail-fg: #14110B; --status-caution: #D9A23E; --status-caution-soft: #2C2412; --status-caution-fg: #14110B; } /* Clearance AI — already night cockpit; reaffirmed */ [data-app="clearanceai"] { --bg: #04070A; --surface: #090F16; --elevated: #111B25; --fg: #E8F1FA; /* ≈ 16.0:1 */ --fg-muted: #93A8BD; /* ≈ 7.4:1 */ --fg-faint: #586878; /* ≈ 3.4:1 */ --rule: #16222F; --rule-strong: #243443; --accent: #4FB6E6; /* unchanged — already AA on night-black */ --accent-fg: #04070A; --accent-soft: #0F2230; --focus-ring: #4FB6E6; } } /* ============================================================ Semantic element styles (web) ============================================================ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-16); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Display + headings — color inherits so nested containers (phone screens, cards) can theme themselves */ .display-1, h1.display { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-60); line-height: var(--lh-60); letter-spacing: var(--tracking-tight); margin: 0; } .display-2 { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-48); line-height: var(--lh-48); letter-spacing: var(--tracking-tight); margin: 0; } h1, .h1 { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-36); line-height: var(--lh-36); letter-spacing: var(--tracking-tight); margin: 0; } h2, .h2 { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-24); line-height: var(--lh-24); letter-spacing: var(--tracking-tight); margin: 0; } h3, .h3 { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-20); line-height: var(--lh-20); margin: 0; } h4, .h4 { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-16); line-height: var(--lh-16); margin: 0; } /* Body */ p, .body { font-size: var(--fs-16); line-height: var(--lh-16); margin: 0; } .body-lg { font-size: var(--fs-18); line-height: var(--lh-18); } .body-sm, small { font-size: var(--fs-14); line-height: var(--lh-14); } .caption { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--fg-muted); } /* Mono (frequencies, callsigns, regs, coords) */ code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: 0.95em; font-feature-settings: "tnum", "zero"; } /* The wordmark — used identically across every surface. Renders "AIVIATION" all-caps with the "AI" pair in the page foreground (var(--fg) — off-white on dark surfaces, dark ink on light surfaces) and "VIATION" in the per-app brand accent. The split emphasizes the aviation domain in the accent hue and is the intentional brand identity (memory: feedback_aiviation_branding). Refined 2026-05-27: the canonical Instagram brand mark uses off-white AI on a dark cockpit-navy surface. Switching to semantic var(--fg) lets the wordmark render the canonical look on any dark surface natively, while still reading cleanly on light per-app palettes (where AI becomes the page-foreground ink and VIATION still pops in the per-app accent). The wordmark needs no chip; the page itself provides the contrast. */ .aiviation-wordmark { font-family: var(--font-heading); font-weight: var(--fw-bold); letter-spacing: 0.01em; color: var(--accent); /* "VIATION" rendered in the per-app accent */ font-size: 1em; white-space: nowrap; font-feature-settings: "ss01" off, "liga" off, "calt" off; } .aiviation-wordmark .ai { color: var(--fg); /* "AI" rendered in page foreground — off-white on dark, ink on light */ font-weight: 700; margin-right: 0.04em; } /* Wordmark chip — LEGACY / FALLBACK ONLY. Wraps the wordmark in a fixed dark capsule. This was the band-aid for the literal-white interpretation of the inverted color split (in use 2026-05-27 morning); kept available for surfaces that explicitly need a logo-lockup treatment, but the default wordmark (with var(--fg) on the AI half) reads naturally on any page surface without needing this chip. New code should not add the chip; existing usages should be migrated to the bare wordmark. */ .aiviation-wordmark-chip { display: inline-block; background: #0F1620; padding: var(--sp-4) var(--sp-12); border-radius: var(--r-8); line-height: 1.2; } .aiviation-wordmark-chip .ai { color: #FFFFFF; /* inside the dark chip, force pure white for max contrast */ } .aiviation-wordmark-chip { color: var(--accent); } /* Tagline color-split — used on hero taglines and any small brand subline. The pattern echoes the wordmark's color logic at smaller scale: verbs / "aviation" words in --fg, AI-adjective words in --accent. The markup wraps individual words in spans. */ .tagline-split { color: var(--fg); } .tagline-split .accent { color: var(--accent); font-weight: var(--fw-semibold); } /* Canonical lockup — wordmark + plane-contrail glyph as a single horizontal unit. Use on the umbrella hero / header where the SVG asset at /assets/glyphs/plane-contrail.svg is reachable. The glyph is pinned to the wordmark's cap height and shares its dark-surface contrast contract: it only reads correctly on a dark or accent surface (per the --glyph #1E40AF deeper-accent token). */ .aiviation-lockup { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; } .aiviation-lockup-glyph { height: 1.4em; /* slightly taller than the wordmark cap so the plane silhouette reads at glyph-icon weight */ width: auto; flex: 0 0 auto; } /* Eyebrow / label */ .eyebrow { font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--fg-muted); } /* Hairline rule */ .rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } /* Focus default */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }