/* ============================================================ 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); } /* ============================================================ Umbrella (aiviation.dev) — neutral slate, no per-app tint ============================================================ */ :root, [data-app="umbrella"] { --bg: #FAFAF7; --surface: #FFFFFF; --elevated: #FFFFFF; --fg: #0F1620; --fg-muted: #4A5360; --fg-faint: #8A93A0; --rule: #E4E5E2; --rule-strong: #C9CBC6; --accent: #0F1620; /* monochrome on the umbrella */ --accent-fg: #FFFFFF; --accent-soft: #EDEEEA; --focus-ring: #0F1620; } /* ============================================================ 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 — amber phosphor on black (ATC scope) ============================================================ */ [data-app="wilcoai"] { --bg: #07090A; --surface: #0E1214; --elevated: #161B1E; --fg: #F2A83B; /* phosphor amber */ --fg-muted: #B0823F; --fg-faint: #6E5527; --rule: #1F2528; --rule-strong: #2E3539; --accent: #F2A83B; --accent-fg: #07090A; --accent-soft: #1A1409; --focus-ring: #F2A83B; } /* ============================================================ 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; } /* ============================================================ 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; } /* ============================================================ 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 — slate dark */ :root, [data-app="umbrella"] { --bg: #0B0F14; --surface: #11161D; --elevated: #1A2029; --fg: #ECEFF3; /* on #11161D ≈ 14.6:1 */ --fg-muted: #A8B0BA; /* ≈ 7.6:1 */ --fg-faint: #6C7682; /* ≈ 3.6:1 */ --rule: #1F2731; --rule-strong: #2D3744; --accent: #ECEFF3; /* monochrome stays monochrome */ --accent-fg: #0B0F14; --accent-soft: #1A2029; --focus-ring: #ECEFF3; } /* 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 — already dark; reaffirmed (intensified blacks) */ [data-app="wilcoai"] { --bg: #050708; --surface: #0C0F11; --elevated: #14181B; --fg: #F2A83B; /* phosphor amber, ≈ 9.3:1 on bg */ --fg-muted: #C99A52; /* ≈ 6.4:1 */ --fg-faint: #84662F; /* ≈ 3.3:1 */ --rule: #1B2125; --rule-strong: #2B3338; --accent: #F2A83B; --accent-fg: #050708; --accent-soft: #1A1409; --focus-ring: #F2A83B; } /* 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; } /* 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; } /* 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. Disambiguates the capital-I from lowercase-L by tinting the "AI" pair in the brand accent so the two letterforms read as different colors even when the underlying glyph for "I" and "l" is identical in the sans heading face. */ .aiviation-wordmark { font-family: var(--font-heading); font-weight: var(--fw-bold); letter-spacing: 0.01em; color: currentColor; /* "viation" inherits page foreground */ font-size: 1em; white-space: nowrap; font-feature-settings: "ss01" off, "liga" off, "calt" off; } .aiviation-wordmark .ai { color: var(--accent); /* brand accent for the "AI" pair */ font-weight: 700; margin-right: 0.04em; } /* 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; }