/* ============================================================================= AeroVoucher · Design Tokens ----------------------------------------------------------------------------- The ENTIRE look-and-feel of the platform lives in this file. Screens consume these variables only — they never hard-code a hex. A rebrand = editing tokens, not screens. USAGE (server-rendered Django) ------------------------------ On , stamp two attributes per request: - data-theme : selects the operator override block ("" / absent = neutral house) - data-mode : "light" (default) or "dark" A tenant supplies only: logo + --brand + --accent (+ optional --chrome). Everything else (tints, inks, dark shades, channel colours, type, spacing, radius, elevation) is FIXED across tenants. See README "Theming". Channel colours and semantic green/amber/red are intentionally NOT re-themeable — they carry safety meaning and must stay constant for staff who move between operators. ============================================================================ */ /* ---------- NEUTRAL DEFAULT · LIGHT (AeroVoucher house theme) ---------- */ :root { --font-head: 'Poppins', system-ui, sans-serif; /* display / headings */ --font-body: 'Inter', system-ui, sans-serif; /* UI / body */ /* surfaces & ink */ --bg: #EEF1F5; --surface: #FFFFFF; --surface-2: #F6F8FB; --surface-3: #EDF1F6; --line: #E3E8EF; --line-strong: #CDD6E0; --text: #15212E; --text-muted: #5A6B7B; --text-faint: #8A99A8; /* brand (house = calm aviation teal) — OPERATOR-SET */ --brand: #0C8B83; --brand-strong: #076A63; --brand-ink: #064B45; --brand-tint: #E1F0EE; --on-brand: #FFFFFF; /* accent (warm gold highlight) — OPERATOR-SET */ --accent: #E0992E; --accent-tint: #FAEFD7; --accent-ink: #8A5C12; /* chrome (top-bar / sidebar / departure board) — OPERATOR-SET (optional) */ --chrome: #16232F; --chrome-2: #1E2D3B; --chrome-fg: #EAF1F8; --chrome-muted: #9DB0C2; --chrome-line: rgba(255,255,255,.10); /* semantic — FIXED (never rebrand; status legibility) */ --success: #1E9D57; --success-tint: #E3F3EA; --success-ink: #0F6A3B; --warning: #D2891F; --warning-tint: #FAEED5; --warning-ink: #8A5712; --danger: #D6453D; --danger-tint: #FAE3E1; --danger-ink: #97271F; --info: #2E6DA4; --info-tint: #E3ECF5; --info-ink: #1B4670; /* booking-channel colours — FIXED (always pair with icon + text) */ --ch-trial: #2E8BC0; --ch-trial-tint: #E3EEF7; --ch-trial-ink: #1A5B83; /* Trial flight */ --ch-lesson: #7B61C9; --ch-lesson-tint: #ECE7F8; --ch-lesson-ink: #4E3B8C; /* PPL lesson */ --ch-hire: #2E9E6B; --ch-hire-tint: #E2F2EA; --ch-hire-ink: #1A6645; /* Self-fly hire */ --ch-maint: #64748B; --ch-maint-tint: #E9EDF2; --ch-maint-ink: #3E4B5B; /* Maintenance */ /* radius */ --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px; /* elevation */ --shadow-sm: 0 1px 2px rgba(15,32,46,.07), 0 1px 1px rgba(15,32,46,.04); --shadow-md: 0 6px 16px rgba(15,32,46,.09), 0 2px 5px rgba(15,32,46,.05); --shadow-lg: 0 20px 44px rgba(15,32,46,.16), 0 7px 16px rgba(15,32,46,.08); --shadow-pop: 0 32px 70px rgba(8,18,32,.30), 0 10px 24px rgba(8,18,32,.18); --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent); /* spacing scale (4px base) — use directly or as reference */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; } /* ---------- NEUTRAL · DARK ---------- */ [data-mode="dark"] { --bg: #0B121B; --surface: #131E29; --surface-2: #0F1924; --surface-3: #1B2734; --line: #25313E; --line-strong: #34434F; --text: #E9F1F8; --text-muted: #9CB0C2; --text-faint: #67798B; --brand: #26C3BB; --brand-strong: #15A89F; --brand-ink: #9DEDE7; --brand-tint: #0C302E; --on-brand: #03201E; --accent: #EFB456; --accent-tint: #352A16; --accent-ink: #F3C97E; --chrome: #0C1722; --chrome-2: #13212E; --chrome-fg: #E9F1F8; --chrome-muted: #92A6B8; --chrome-line: rgba(255,255,255,.08); --success: #38B673; --success-tint: #11321F; --success-ink: #6FD79F; --warning: #E0A23D; --warning-tint: #322512; --warning-ink: #F0C580; --danger: #E96258; --danger-tint: #361B19; --danger-ink: #F39A92; --info: #4E92D6; --info-tint: #122334; --info-ink: #93BCE5; --ch-trial: #4FA3D2; --ch-trial-tint: #11242F; --ch-trial-ink: #9FCDE8; --ch-lesson: #9A82E0; --ch-lesson-tint: #1E1733; --ch-lesson-ink: #C3B4F0; --ch-hire: #45B783; --ch-hire-tint: #102818; --ch-hire-ink: #93D9B6; --ch-maint: #8294A8; --ch-maint-tint: #1A222C; --ch-maint-ink: #B6C3D1; --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-md: 0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35); --shadow-lg: 0 22px 48px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.40); --shadow-pop: 0 34px 74px rgba(0,0,0,.66); } /* ---------- OPERATOR OVERRIDE EXAMPLE · Fly Aero Now ---------- This is the ENTIRE per-tenant payload. Generate one block like this from the operator record (slug + brand + accent + optional chrome). Nothing else moves. */ [data-theme="flyaeronow"] { --brand: #2E6DA4; --brand-strong: #23578A; --brand-ink: #1B2A4A; --brand-tint: #E5EDF5; --on-brand: #FFFFFF; --accent: #E8833A; --accent-tint: #FBE7D7; --accent-ink: #9E4F12; --chrome: #1B2A4A; --chrome-2: #233860; --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 34%, transparent); } [data-theme="flyaeronow"][data-mode="dark"] { --brand: #4E92D6; --brand-strong: #3B7BC0; --brand-ink: #BCD6F0; --brand-tint: #132338; --on-brand: #06192C; --accent: #F19A52; --accent-tint: #34230F; --accent-ink: #F7BC8A; --chrome: #121F33; --chrome-2: #1B2C49; } /* ---------- Base resets used by the prototype ---------- */ body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } *, *::before, *::after { box-sizing: border-box; }