/* ============================================================ ONE AXION — DESIGN TOKENS ------------------------------------------------------------ Single source of truth for the visual system. To rebrand the whole product, you only need to edit this file. Aligned to the official One Axion brand guidelines: Primary Blue #1E5BAA trust, innovation Deep Navy #0F3A6B stability Sky #6FB3FF clean, digital Light Blue #D8EFFF tinted fills Light Grey #F2F4F7 app canvas Ink #111827 body text White #FFFFFF cards / surfaces The names below mirror the Tailwind @theme tokens used in the other One Axion apps (brand / brand-600 / navy / sky / ink / line / canvas / surface), so the two design systems stay recognisably the same family. ============================================================ */ :root { /* ---------- Brand palette (LIGHT) ---------- */ --oa-paper: #F2F4F7; /* app canvas (--color-canvas) */ --oa-surface: #FFFFFF; /* cards (--color-surface) */ --oa-surface-2: #EEF2F7; /* subtle inset */ --oa-surface-3: #E3E9F1; /* deeper inset / track */ --oa-border: #E5E9F0; /* hairline (--color-line) */ --oa-border-strong: #D2DAE6; /* emphasised divider */ --oa-text: #111827; /* body copy (--color-ink) */ --oa-text-secondary: #374151; /* supporting (--color-ink-600) */ --oa-text-muted: #676E7C; /* hints — brand #6B7280 nudged 2 points darker so it clears AA (4.7:1) on the canvas too */ --oa-text-inverse: #FFFFFF; --oa-primary: #1E5BAA; /* PRIMARY BLUE */ --oa-primary-hover: #184C8E; /* brand-600 */ --oa-primary-active: #0F3A6B; /* brand-700 / deep navy */ --oa-primary-soft: #D8EFFF; /* brand-100 / light blue */ --oa-primary-softer: #EEF5FC; /* brand-50 */ --oa-primary-line: #B4D8FC; /* tinted border */ --oa-navy: #0F3A6B; --oa-sky: #6FB3FF; --oa-sky-light: #D8EFFF; --oa-stone: #6B7280; /* neutral secondary */ --oa-stone-soft: #EEF2F7; --oa-success: #16A864; /* positive / growth — FILLS */ --oa-success-soft: #E4F6ED; --oa-success-text: #0F7A48; /* darker, for TEXT on -soft */ --oa-warn: #D97706; /* caution / attention — FILLS */ --oa-warn-soft: #FDF1E3; --oa-warn-text: #96530B; /* darker, for TEXT on -soft */ --oa-danger: #B42318; /* negative — FILLS */ --oa-danger-soft: #FBEAE8; --oa-danger-text: #9A1E14; /* darker, for TEXT on -soft */ /* WHY THE SPLIT: #16A864 on #E4F6ED is only 2.7:1 — fine as a chart fill, unreadable as a label. The -text variants are the same hues darkened until they clear WCAG AA (4.5:1) on their own tinted background. Use -text for any type, - for fills. */ /* ---------- Data visualisation ---------- Each body metric gets its own chart, so these read as identity colours rather than as a scale that must be told apart at a glance. Blue-forward, with the three semantic colours carrying the metrics where direction has an obvious good and bad. */ --oa-viz-1: #1E5BAA; /* weight — brand blue */ --oa-viz-2: #6FB3FF; /* BMI — sky */ --oa-viz-3: #D97706; /* body fat — caution */ --oa-viz-4: #16A864; /* muscle — positive */ --oa-viz-5: #0F3A6B; /* visceral fat — deep navy */ --oa-viz-6: #0E7C86; /* waist = teal, never red */ --oa-viz-grid: #E5E9F0; --oa-viz-axis: #9CA6B4; --oa-viz-trend: #9CA6B4; /* Heatmap ramp — 0 to 100% completion. One hue, light to dark, so the calendar reads as a scale. */ --oa-heat-0: #E9EDF3; --oa-heat-1: #D8EFFF; --oa-heat-2: #A8D4FB; --oa-heat-3: #6FB3FF; --oa-heat-4: #3272C4; /* darkened: white day numbers need 4.5:1 */ --oa-heat-5: #1E5BAA; /* ---------- Elevation ---------- Tinted with the navy rather than pure black, so shadows sit in the same colour family as everything else. */ --oa-shadow-xs: 0 1px 2px rgba(15, 58, 107, .05); --oa-shadow-sm: 0 1px 3px rgba(15, 58, 107, .07), 0 1px 2px rgba(15, 58, 107, .04); --oa-shadow-md: 0 4px 12px rgba(15, 58, 107, .08), 0 1px 3px rgba(15, 58, 107, .05); --oa-shadow-lg: 0 12px 32px rgba(15, 58, 107, .12), 0 2px 8px rgba(15, 58, 107, .06); --oa-ring: 0 0 0 3px rgba(30, 91, 170, .22); /* ---------- Radius ---------- */ --oa-r-xs: 4px; --oa-r-sm: 6px; --oa-r-md: 10px; --oa-r-lg: 14px; --oa-r-xl: 20px; --oa-r-pill: 999px; /* ---------- Spacing scale (4px base) ---------- */ --oa-s-1: 4px; --oa-s-2: 8px; --oa-s-3: 12px; --oa-s-4: 16px; --oa-s-5: 20px; --oa-s-6: 24px; --oa-s-8: 32px; --oa-s-10: 40px; --oa-s-12: 48px; --oa-s-16: 64px; --oa-s-20: 80px; /* ---------- Typography ---------- Both families are bundled in /assets/fonts and declared in css/fonts.css, so they work offline and under a strict CSP. Questrial ships in ONE weight (400). Anything bolder must use the display face or the browser will fake it — the rule in app.css section 02 routes every 500+ element to Space Grotesk automatically. */ --oa-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --oa-font-sans: 'Questrial', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --oa-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* Questrial runs small for its point size, so the base is nudged up a little compared with a system stack. */ --oa-fs-xs: 12px; --oa-fs-sm: 13.5px; --oa-fs-base: 15px; --oa-fs-md: 16.5px; --oa-fs-lg: 19px; --oa-fs-xl: 24px; --oa-fs-2xl: 31px; --oa-fs-3xl: 40px; --oa-fs-4xl: 52px; --oa-lh-tight: 1.15; --oa-lh-snug: 1.35; --oa-lh-base: 1.6; --oa-tracking-tight: -0.02em; --oa-tracking-label: 0.08em; /* ---------- Motion ---------- */ --oa-ease: cubic-bezier(.4, 0, .2, 1); --oa-ease-out: cubic-bezier(.16, 1, .3, 1); --oa-dur-fast: 120ms; --oa-dur: 200ms; --oa-dur-slow: 380ms; /* ---------- Layout ---------- */ --oa-maxw: 1180px; --oa-maxw-narrow: 760px; --oa-header-h: 60px; } /* ============================================================ DARK THEME Applied via , or automatically when the theme setting is "auto" and the OS prefers dark. The brand palette is defined for light. For dark we keep the same hues but lift the blues so they stay legible on a dark ground — #1E5BAA on near-black fails contrast, so the primary moves to the sky end of the family. ============================================================ */ :root[data-oa-theme="dark"] { --oa-paper: #0B1220; --oa-surface: #111A2B; --oa-surface-2: #172236; --oa-surface-3: #1F2C43; --oa-border: #22304A; --oa-border-strong: #33445F; --oa-text: #E8EDF5; --oa-text-secondary: #B3BECE; --oa-text-muted: #8592A6; --oa-text-inverse: #0B1220; --oa-primary: #6FB3FF; /* sky reads on dark */ --oa-primary-hover: #8FC6FF; --oa-primary-active: #A9D4FF; --oa-primary-soft: #16294A; --oa-primary-softer: #101B2E; --oa-primary-line: #2C4A75; --oa-navy: #0F3A6B; --oa-sky: #6FB3FF; --oa-sky-light: #D8EFFF; --oa-stone: #8592A6; --oa-stone-soft: #172236; --oa-success: #3ECB8B; --oa-success-soft: #10291F; --oa-success-text: #3ECB8B; /* already clears AA on dark */ --oa-warn: #F0A93C; --oa-warn-soft: #2C2113; --oa-warn-text: #F0A93C; --oa-danger: #F0705F; --oa-danger-soft: #2E1613; --oa-danger-text: #F0705F; --oa-viz-1: #6FB3FF; --oa-viz-2: #A9D4FF; --oa-viz-3: #F0A93C; --oa-viz-4: #3ECB8B; --oa-viz-5: #4E7FBF; --oa-viz-6: #4FC3C9; --oa-viz-grid: #22304A; --oa-viz-axis: #5A6B85; --oa-viz-trend: #5A6B85; --oa-heat-0: #162034; --oa-heat-1: #1B2F4D; --oa-heat-2: #22436F; --oa-heat-3: #2E5B95; --oa-heat-4: #4084CE; --oa-heat-5: #6FB3FF; --oa-shadow-xs: 0 1px 2px rgba(0, 0, 0, .34); --oa-shadow-sm: 0 1px 3px rgba(0, 0, 0, .42), 0 1px 2px rgba(0, 0, 0, .26); --oa-shadow-md: 0 4px 12px rgba(0, 0, 0, .46), 0 1px 3px rgba(0, 0, 0, .30); --oa-shadow-lg: 0 12px 32px rgba(0, 0, 0, .54), 0 2px 8px rgba(0, 0, 0, .32); --oa-ring: 0 0 0 3px rgba(111, 179, 255, .30); } /* Follow the OS when the user has chosen "auto" (the default). */ @media (prefers-color-scheme: dark) { :root[data-oa-theme="auto"] { --oa-paper: #0B1220; --oa-surface: #111A2B; --oa-surface-2: #172236; --oa-surface-3: #1F2C43; --oa-border: #22304A; --oa-border-strong: #33445F; --oa-text: #E8EDF5; --oa-text-secondary: #B3BECE; --oa-text-muted: #8592A6; --oa-text-inverse: #0B1220; --oa-primary: #6FB3FF; --oa-primary-hover: #8FC6FF; --oa-primary-active: #A9D4FF; --oa-primary-soft: #16294A; --oa-primary-softer: #101B2E; --oa-primary-line: #2C4A75; --oa-navy: #0F3A6B; --oa-sky: #6FB3FF; --oa-sky-light: #D8EFFF; --oa-stone: #8592A6; --oa-stone-soft: #172236; --oa-success: #3ECB8B; --oa-success-soft: #10291F; --oa-success-text: #3ECB8B; --oa-warn: #F0A93C; --oa-warn-soft: #2C2113; --oa-warn-text: #F0A93C; --oa-danger: #F0705F; --oa-danger-soft: #2E1613; --oa-danger-text: #F0705F; --oa-viz-1: #6FB3FF; --oa-viz-2: #A9D4FF; --oa-viz-3: #F0A93C; --oa-viz-4: #3ECB8B; --oa-viz-5: #4E7FBF; --oa-viz-6: #4FC3C9; --oa-viz-grid: #22304A; --oa-viz-axis: #5A6B85; --oa-viz-trend: #5A6B85; --oa-heat-0: #162034; --oa-heat-1: #1B2F4D; --oa-heat-2: #22436F; --oa-heat-3: #2E5B95; --oa-heat-4: #4084CE; --oa-heat-5: #6FB3FF; --oa-shadow-xs: 0 1px 2px rgba(0, 0, 0, .34); --oa-shadow-sm: 0 1px 3px rgba(0, 0, 0, .42), 0 1px 2px rgba(0, 0, 0, .26); --oa-shadow-md: 0 4px 12px rgba(0, 0, 0, .46), 0 1px 3px rgba(0, 0, 0, .30); --oa-shadow-lg: 0 12px 32px rgba(0, 0, 0, .54), 0 2px 8px rgba(0, 0, 0, .32); --oa-ring: 0 0 0 3px rgba(111, 179, 255, .30); } }