/* ============================================================================ MIND OASIS · CREATIVE PERFORMANCE OS Design tokens — the single source of truth for the whole OS. This is an extension of the existing mpx system, not a replacement. The surface, ink and green scales below are the ones already in use; what is new is the categorical series palette, the four-step status scale, and the geometry and elevation tokens. Rule: components read tokens. No component declares a raw hex value. If a colour is needed that is not here, it is a missing token, not a local exception. ============================================================================ */ :root{ /* --- Surfaces ----------------------------------------------------------- Four steps, lightest to darkest. --bg is the page ground; --surface is a card; --surface2 is a recessed area inside a card (hover, filter strip); --surface3 is the track behind a filled bar. */ --bg: #f5f2ed; --surface: #faf8f5; --surface2: #f0ede7; --surface3: #e9e5dd; /* --- Lines -------------------------------------------------------------- --border draws the edge of a thing. --hairline separates things inside the same thing. Never use --border for a table row divider. */ --border: #ddd9d2; --hairline: #e2ded6; /* --- Ink ---------------------------------------------------------------- Three weights only. --ink for values and headings, --ink2 for supporting copy, --ink3 for labels and anything the eye should skip. Text never takes a series colour — a coloured swatch beside it carries identity. */ --ink: #2c2825; --ink2: #6b6460; --ink3: #a09890; /* --- Brand green -------------------------------------------------------- --green is the primary action and the accent. --green2 is its hover. --green3 is a light variant for gradients and focus rings. --green-wash is the selected-row background. --green-deep is the logo ground. */ --green: #2d5a3d; --green2: #3d7a55; --green3: #6d9c7f; --green-wash: #eaf0eb; --green-deep: #1f3f2b; /* --- Status ------------------------------------------------------------- Four steps, reserved. These say something about state and are never reused as a chart series colour. Each ships with a label or icon, never colour alone. --*-wash is the badge background for the same step. */ --ok: #2e7d55; --ok-wash: #e8f1ea; --warn: #b07d18; --warn-wash: #f8f0dd; --serious: #c4661f; --serious-wash: #fbeee1; --crit: #a83a2c; --crit-wash: #f9e8e5; /* --- Categorical series ------------------------------------------------- Meta · Google Ads · Apple Search Ads · Organic · Owned · Other. Validated as a SET against surface #faf8f5 on: lightness band, chroma floor, colour-vision separation (protan/deutan/tritan ΔE ≥ 8) and normal-vision separation. Assign in fixed order, never cycled. Colour follows the entity, never its rank — a filter that removes a series must not repaint the survivors. Do not change one of these in isolation. A seventh series is not a new hue: fold it into --c6 "Other", or facet the chart. --c2 and --c4 fall below 3:1 contrast with the surface. Any chart using them therefore ships a legend AND direct labels. That is an accessibility requirement, not a stylistic preference. */ --c1: #2e7d55; /* Meta */ --c2: #c98a12; /* Google Ads */ --c3: #3a6ea5; /* Apple Search Ads */ --c4: #8aae3c; /* Organic */ --c5: #c4502c; /* Owned / referral */ --c6: #7f4e86; /* Other */ /* --- Geometry ----------------------------------------------------------- Three radii. --r for cards, --r-sm for inline chips and rows, --r-lg for the large containers (KPI band, brief). Pills use 999px directly. */ --r: 10px; --r-sm: 6px; --r-lg: 14px; /* --- Elevation ---------------------------------------------------------- Two levels. --shadow for resting cards, --shadow-lift for anything that has left the page: menus, drawers, hovering cards, tooltips. */ --shadow: 0 1px 2px rgba(44,40,37,.04), 0 8px 24px -12px rgba(44,40,37,.10); --shadow-lift: 0 2px 6px rgba(44,40,37,.06), 0 20px 44px -20px rgba(44,40,37,.18); /* --- Layout ------------------------------------------------------------- One max width for the whole OS so pages line up when you switch tabs. */ --max: 1560px; } /* ============================================================================ TYPOGRAPHY Two faces, both from Google Fonts. DM Sans carries the interface; Cormorant Garamond carries section titles from 17px up and nothing below that — at small sizes it loses its character and just reads as a serif. Numbers always get tabular figures. A column of digits that does not line up is the fastest way to make a dashboard look amateur. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap'); body{ font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:13px; line-height:1.5; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; } .serif{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:500 } /* Micro-caps label. Used for every eyebrow, table header and field label. 9px is deliberate — it should read as a label, not as content. */ .caps{ font-size:9px; letter-spacing:.13em; text-transform:uppercase; font-weight:600 } /* Any element containing digits that sit in a column. */ .num, .tbl td, .row-v, .kpi .val{ font-variant-numeric:tabular-nums } /* Type scale actually in use — stay on it. 9px micro-caps labels 10.5px chart axes, sub-values 11.5px supporting copy, table cells 12.5px body, row labels 13.5px card titles 17px drawer titles, question cards (serif) 21-23px section headings (serif) 25px KPI values 30px page title (serif) */ /* ============================================================================ MOTION Transitions are 150ms for state, 320ms for anything that slides in from an edge. Nothing animates on load. Respect the OS setting. ============================================================================ */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } } /* ============================================================================ FOCUS Every interactive element needs a visible keyboard state. This is the only place it is defined. ============================================================================ */ :focus-visible{ outline:2px solid var(--green2); outline-offset:2px; border-radius:4px } /* ============================================================================ THEME The OS is light, in cream. That is a deliberate single-theme commitment — the cream IS the Mind Oasis identity and an automatic inversion breaks it. There is therefore no prefers-color-scheme block, and body sets its background explicitly rather than inheriting one. If a dark variant is ever wanted: the six series colours must be re-stepped and re-validated against the dark surface. It is not a matter of flipping values, and a naive inversion will fail the colour-vision checks. ============================================================================ */ /* ============================================================================ LEGACY ALIASES — bridge for the existing mpx pages (index.html e.a.). The old system used --text/--text2/--text3 and its own surface3/err/warn. These aliases point the old names at the canonical tokens above, so the existing 32k-line page reads tokens without a 900-site rename. New code uses the canonical names; these aliases are removal-listed for the moment the last legacy page is rebuilt on the new layer (UI_SPEC §9 step 5). ============================================================================ */ :root{ --text: var(--ink); --text2: var(--ink2); --text3: var(--ink3); --err: var(--crit); --err-bg: var(--crit-wash); --warn-bg: var(--warn-wash); --green-bg: var(--green-wash); --green-border: #c8d8cc; }