/* ========================================================================= Daedalus Design Tokens -------------------------------------------------------------------------- Cockpit-night-mode aviation training platform. Dark-primary; light variant included for marketing surfaces. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ---------- Lato (brand-licensed, locally hosted) ---------- Weight map: 100 Thin 300 Light 400 Regular 700 Bold 900 Black Italics provided at every weight. */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Lato-Thin.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Lato-ThinItalic.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Lato-Light.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Lato-LightItalic.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Lato-Regular.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Lato-Italic.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Lato-Bold.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Lato-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Lato-Black.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Lato-BlackItalic.ttf') format('truetype'); } :root { /* ---------- Brand core (EDITORIAL WHITE) ---------- */ --brand-cyan: #D4651C; /* sun-on-metal amber — single primary action */ --brand-cyan-2: #E8782F; /* hover */ --brand-cyan-3: #B5530F; /* press */ --brand-cyan-glow: rgba(212, 101, 28, 0.22); --brand-amber: #D4651C; /* identical — kept as the single accent */ --brand-amber-2: #E8782F; --brand-amber-3: #B5530F; --brand-navy: #0F1116; /* ink */ --brand-navy-deep: #050608; /* the deepest ink */ /* ---------- Sectional-chart semantic colors ---------- */ /* These mirror VFR sectional & METAR conventions. */ --vfr: #3FBF6E; /* VFR green */ --mvfr: #4D9CFF; /* MVFR blue */ --ifr: #FF5A5A; /* IFR red */ --lifr: #C97AFF; /* LIFR magenta */ /* ---------- Surfaces (EDITORIAL WHITE — canonical) ---------- */ --surface-0: #FFFFFF; /* page bg */ --surface-1: #FAFAF7; /* card / chrome */ --surface-2: #F3F3EE; /* raised card / popover */ --surface-3: #EDEDE6; /* modal / hover top */ --surface-inset: #F5F5F0; /* code / input wells */ /* ---------- Foreground (EDITORIAL WHITE) ---------- */ --fg-1: #0F1116; /* primary text */ --fg-2: #525560; /* secondary text */ --fg-3: #6A6E7A; /* tertiary / metadata */ --fg-4: #8B8F9A; /* disabled / placeholder */ --fg-on-cyan: #FFFFFF; --fg-on-amber: #FFFFFF; /* ---------- Borders (EDITORIAL WHITE) ---------- */ --border-subtle: rgba(15, 17, 22, 0.06); --border-default: rgba(15, 17, 22, 0.10); --border-strong: rgba(15, 17, 22, 0.18); --border-cyan: rgba(212, 101, 28, 0.30); /* ---------- Status (DARK) ---------- */ --success: #3FBF6E; --success-bg: rgba(63, 191, 110, 0.12); --warning: #FFB547; --warning-bg: rgba(255, 181, 71, 0.12); --danger: #FF5A5A; --danger-bg: rgba(255, 90, 90, 0.12); --info: #4D9CFF; --info-bg: rgba(77, 156, 255, 0.12); /* ---------- Spacing (4px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-20: 80px; --space-30: 120px; /* ---------- Radii ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---------- Elevation (DARK) Three-step system. Each level adds ambient depth + an inner-top highlight that mimics glare on a glass instrument panel. ---------- */ --e1: 0 1px 2px rgba(15,17,22,0.06), 0 2px 6px rgba(15,17,22,0.04); --e2: 0 4px 12px rgba(15,17,22,0.08), 0 8px 24px rgba(15,17,22,0.06); --e3: 0 12px 40px rgba(15,17,22,0.12), 0 24px 64px rgba(15,17,22,0.10); --glow-cyan: 0 0 0 1px rgba(212,101,28,0.35), 0 0 24px rgba(212,101,28,0.20); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0.0, 1.0, 1); --ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1); --dur-micro: 120ms; --dur-state: 200ms; --dur-page: 320ms; --dur-needle: 600ms; /* ---------- Type families ---------- */ --font-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- Type scale (rem-based, 16px root) ---------- */ --fs-display-1: 64px; --fs-display-2: 48px; --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-readout: 13px; /* mono readouts */ --fs-eyebrow: 11px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.12em; } /* ========================================================================= LIGHT VARIANT — used on marketing surfaces and printable docs. ========================================================================= */ :root[data-theme="light"], .theme-light { --surface-0: #F7F9FC; --surface-1: #FFFFFF; --surface-2: #F1F4F9; --surface-3: #E7ECF3; --surface-inset: #EEF2F7; --fg-1: #0A1628; --fg-2: #354A66; --fg-3: #6B7C92; --fg-4: #A4B0C0; --border-subtle: rgba(10, 22, 40, 0.06); --border-default: rgba(10, 22, 40, 0.10); --border-strong: rgba(10, 22, 40, 0.18); --e1: 0 1px 2px rgba(10,22,40,0.06), 0 2px 6px rgba(10,22,40,0.04); --e2: 0 4px 12px rgba(10,22,40,0.08), 0 8px 24px rgba(10,22,40,0.06); --e3: 0 12px 40px rgba(10,22,40,0.12), 0 24px 64px rgba(10,22,40,0.10); } /* ========================================================================= SEMANTIC ELEMENT STYLES Apply these classes (or use the elements directly inside .daedalus-prose). ========================================================================= */ html, body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); background: var(--surface-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display-1 { font-family: var(--font-sans); font-size: var(--fs-display-1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .display-2 { font-family: var(--font-sans); font-size: var(--fs-display-2); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } h1, .h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; } h2, .h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; } h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); margin: 0; } h4, .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); margin: 0; } p, .p { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; } .small, small { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-3); } .caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); } .eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-3); } .readout, code, kbd, .mono { font-family: var(--font-mono); font-size: var(--fs-readout); font-feature-settings: 'tnum' 1, 'zero' 1; letter-spacing: 0; } code { background: var(--surface-inset); padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); } /* Link */ a { color: var(--brand-cyan); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); } a:hover { color: var(--brand-cyan-2); } /* Selection */ ::selection { background: var(--brand-cyan-glow); color: var(--fg-1); }