/* ========================================================================== EventGo Australia — Design Tokens -------------------------------------------------------------------------- Single source of truth for colour, type, space, motion. Nothing below this file should contain a raw hex value or a magic number. WordPress note: this file maps 1:1 onto theme.json if the site is ever converted to a block theme. Keep token names stable. ========================================================================== */ :root { color-scheme: light; /* ---- Brand ----------------------------------------------------------- * * Taken from the EventGo Australia logo: a violet-to-blue-to-teal gradient * over deep navy. Violet carries actions, teal carries highlights, and the * three-stop gradient is reserved for the logo, headline accents and rules. * There is no warm accent in this brand — resist adding one. */ --eg-violet: #5B3FE8; /* primary — buttons, links, focus */ --eg-violet-deep: #4429C4; --eg-violet-soft: #ECE8FF; --eg-blue: #2E86E0; /* gradient midpoint */ --eg-teal: #14C4A6; /* highlight — ticks, live dots, gradient end */ --eg-teal-deep: #0A8472; --eg-blue-deep: #1F5FA8; /* white text 6.44:1 — the V5 ticket stub */ --eg-teal-soft: #E0F7F2; --eg-gradient: linear-gradient(96deg, #6B33E0 0%, #3B7BE8 52%, #1FC9A8 100%); /* ---- Neutral ramp --------------------------------------------------- */ --eg-ink-900: #080C28; /* deepest — hero and CTA grounds */ --eg-ink-800: #0B1033; /* dark section ground */ --eg-ink-700: #121736; /* dark chart surface (validated) */ --eg-ink-600: #1B2150; --eg-ink-500: #2A3268; --eg-grey-400: #4E5468; /* secondary text — 7.52:1 on white */ --eg-grey-300: #666B80; /* muted text — 5.28:1 on white */ --eg-grey-200: #C4C7D4; --eg-grey-100: #E4E6EF; --eg-grey-50: #F1F2F7; --eg-paper: #FAFAFC; /* light chart surface (validated) */ --eg-white: #FFFFFF; /* ---- Semantic surfaces ---------------------------------------------- */ --surface-page: var(--eg-paper); --surface-raised: var(--eg-white); --surface-sunken: var(--eg-grey-50); --surface-inverse: var(--eg-ink-900); --surface-chart: var(--eg-paper); --border-subtle: var(--eg-grey-100); --border-strong: var(--eg-grey-200); --border-inverse: rgba(255 255 255 / 0.14); /* ---- Semantic text --------------------------------------------------- */ --text-primary: var(--eg-ink-900); --text-secondary: var(--eg-grey-400); --text-muted: var(--eg-grey-300); --text-on-dark: #FFFFFF; --text-on-dark-2: rgba(255 255 255 / 0.68); --text-on-brand: #FFFFFF; /* Accent used for text (eyebrows, links). Separate from --eg-violet, which is a fill: a colour that is legible AS A FILL is not automatically legible AS TEXT, and the dark theme needs a lighter step to clear 4.5:1. */ --accent-text: var(--eg-violet); /* 6.07:1 on the light ground */ /* Accent text sitting ON the soft accent wash (badges, avatars). The wash itself changes between themes, so the ink on it has to change too. */ --accent-on-soft: var(--eg-violet-deep); --action-on-soft: var(--eg-teal-deep); /* ---- Chart categorical palette -------------------------------------- * * Revalidated for the new brand against surface #FAFAFC. ALL CHECKS PASS. * Slots 1 and 2 are brand hues; 3-5 are chosen for maximum separation, not * for brand fidelity. The brand's own violet, blue and teal are adjacent * hues — using all three as adjacent series would fail colourblind * separation, so blue is parked at slot 5 where it never neighbours violet. * Fixed slot order. Never cycle, never reorder. */ --series-1: #5B3FE8; /* violet — gross ticket sales */ --series-2: #14A08A; /* teal — net revenue */ --series-3: #E07B00; /* amber — platform fees */ --series-4: #D6408F; /* magenta — refunds */ --series-5: #2E86E0; /* blue — attendance */ /* Sequential ramp — single hue, light to dark (magnitude encoding) */ --seq-100: #E4DEFF; --seq-200: #C7BAFF; --seq-300: #A791FF; --seq-400: #8168FA; --seq-500: #5B3FE8; --seq-600: #4429C4; --seq-700: #2E1A8C; /* Status — reserved. Never reused as a series colour. */ --status-good: #067647; --status-warning: #B25E00; --status-serious: #C4320A; --status-critical: #A11B1B; /* ---- Chart furniture ------------------------------------------------- */ --chart-grid: rgba(8 12 40 / 0.07); --chart-axis: rgba(8 12 40 / 0.22); --chart-label: var(--text-secondary); /* ---- Typography ------------------------------------------------------ */ --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* The homepage type system (assets/css/fonts.css; opt-in via .eg-c-type). Each names its metric-matched fallback second, so the swap does not reflow. */ --font-headline: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Arial Black", Arial, sans-serif; --font-ui: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* Fluid type scale — clamp(min, preferred, max), 360px → 1440px viewport. Ratio 1.25 at small screens widening to 1.333 at large. */ --text-xs: clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem); --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.06rem + 0.30vw, 1.3125rem); --text-xl: clamp(1.375rem, 1.24rem + 0.60vw, 1.75rem); --text-2xl: clamp(1.75rem, 1.52rem + 1.02vw, 2.375rem); --text-3xl: clamp(2.25rem, 1.86rem + 1.73vw, 3.25rem); --text-4xl: clamp(2.875rem, 2.20rem + 3.00vw, 4.75rem); --text-5xl: clamp(3.5rem, 2.32rem + 5.24vw, 6.75rem); --leading-tight: 1.04; --leading-snug: 1.18; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tighter: -0.04em; /* huge display type */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.06em; --tracking-widest: 0.16em; /* eyebrow / all-caps labels */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ---- Spacing — 8px grid (4px half-steps at the small end) ------------ */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 8rem; /* 128px */ /* Section rhythm — fluid so dense phones don't waste a screen of nothing */ --section-y: clamp(4rem, 2.4rem + 7vw, 9rem); /* ---- Layout ---------------------------------------------------------- */ --container: 1240px; --container-wide: 1440px; --container-prose: 68ch; --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); /* ---- Radius — deliberately tight. Sharp edges read as premium. ------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Cards and panels on the V3 homepage and account pages. Added with the homepage foundation; nothing that existed before uses it. */ --radius-xl: 20px; --radius-full: 999px; /* ---- Elevation ------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgb(8 12 40 / 0.05); --shadow-md: 0 4px 12px -2px rgb(8 12 40 / 0.08), 0 2px 4px -2px rgb(8 12 40 / 0.05); --shadow-lg: 0 16px 40px -8px rgb(8 12 40 / 0.14), 0 4px 12px -4px rgb(8 12 40 / 0.07); --shadow-xl: 0 32px 72px -16px rgb(8 12 40 / 0.22); --shadow-brand: 0 12px 32px -8px rgb(91 63 232 / 0.42); /* ---- Motion ---------------------------------------------------------- * * Durations are short on purpose. Anything over 700ms on a scroll reveal * makes a fast scroller stare at a blank block. */ --dur-instant: 90ms; --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 480ms; --dur-slower: 720ms; --dur-chart: 1100ms; /* chart draw-on — allowed to be luxurious */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* the workhorse */ --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot, for pops */ --stagger: 70ms; /* multiplied by --i on staggered children */ /* ---- Z-index scale — named, so nothing ever becomes 99999 ------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; /* ---- ROLE-CONSOLE DARK STEPS (V5) ------------------------------------- The dark role products (My EventGo Australia, Staff Mode, the access flows) are dark whatever the OS setting, so they cannot borrow the OS-dark overrides below. Same values, their own names, each measured against --eg-ink-900 (docs/ROLE-CONSOLES-MASTER-DESIGN.md §7). */ --on-dark-good: #4ADE80; /* 11.0:1 on ink-900 */ --on-dark-warning: #FBBF24; /* 11.5:1 */ --on-dark-serious: #FB923C; /* 8.5:1 */ --on-dark-critical: #F87171; /* 6.9:1 */ --on-dark-accent: #9B86FF; /* 6.6:1 */ --on-dark-accent-2: #C7BAFF; /* 10.9:1 */ --on-dark-teal: #3FD9BC; /* 10.9:1 */ } /* ========================================================================== Dark theme Declared under BOTH scopes: the media query covers the OS setting, the [data-theme] scope covers the manual toggle, and the :not() guard lets an explicit light choice beat OS-dark. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --surface-page: var(--eg-ink-900); --surface-raised: var(--eg-ink-700); --surface-sunken: var(--eg-ink-800); --surface-inverse: var(--eg-paper); --surface-chart: var(--eg-ink-700); --border-subtle: rgba(255 255 255 / 0.09); --border-strong: rgba(255 255 255 / 0.18); --border-inverse: rgba(8 12 40 / 0.14); --text-primary: #FFFFFF; --text-secondary: rgba(255 255 255 / 0.66); --text-muted: rgba(255 255 255 / 0.58); /* 6.04:1 on the dark ground */ --accent-text: #9B86FF; /* 6.38:1 — #5B3FE8 is only 3.4:1 here */ --accent-on-soft: #C7BAFF; --action-on-soft: #3FD9BC; --text-on-dark: #FFFFFF; --text-on-dark-2: rgba(255 255 255 / 0.68); /* Same five hues, re-stepped for the dark surface and re-validated. Not an automatic flip — these are selected values. */ --series-1: #8B72FF; --series-2: #17A992; --series-3: #C87D0A; --series-4: #DB5292; --series-5: #3E8CE0; --seq-100: #2E1A8C; --seq-200: #4429C4; --seq-300: #5B3FE8; --seq-400: #8168FA; --seq-500: #A791FF; --seq-600: #C7BAFF; --seq-700: #E4DEFF; --status-good: #4ADE80; --status-warning: #FBBF24; --status-serious: #FB923C; --status-critical: #F87171; --chart-grid: rgba(255 255 255 / 0.08); --chart-axis: rgba(255 255 255 / 0.24); --eg-violet-soft: rgba(123 91 255 / 0.18); --eg-teal-soft: rgba(20 196 166 / 0.15); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.5); --shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.6); --shadow-xl: 0 32px 72px -16px rgb(0 0 0 / 0.7); } } :root[data-theme="dark"] { color-scheme: dark; --surface-page: var(--eg-ink-900); --surface-raised: var(--eg-ink-700); --surface-sunken: var(--eg-ink-800); --surface-inverse: var(--eg-paper); --surface-chart: var(--eg-ink-700); --border-subtle: rgba(255 255 255 / 0.09); --border-strong: rgba(255 255 255 / 0.18); --border-inverse: rgba(8 12 40 / 0.14); --text-primary: #FFFFFF; --text-secondary: rgba(255 255 255 / 0.66); --text-muted: rgba(255 255 255 / 0.58); --accent-text: #9B86FF; --accent-on-soft: #C7BAFF; --action-on-soft: #3FD9BC; --text-on-dark: #FFFFFF; --text-on-dark-2: rgba(255 255 255 / 0.68); --series-1: #8B72FF; --series-2: #17A992; --series-3: #C87D0A; --series-4: #DB5292; --series-5: #3E8CE0; --seq-100: #2E1A8C; --seq-200: #4429C4; --seq-300: #5B3FE8; --seq-400: #8168FA; --seq-500: #A791FF; --seq-600: #C7BAFF; --seq-700: #E4DEFF; --status-good: #4ADE80; --status-warning: #FBBF24; --status-serious: #FB923C; --status-critical: #F87171; --chart-grid: rgba(255 255 255 / 0.08); --chart-axis: rgba(255 255 255 / 0.24); --eg-violet-soft: rgba(123 91 255 / 0.18); --eg-teal-soft: rgba(20 196 166 / 0.15); /* The status colours were missing here, so anything inside an .eg-dark island fell back to the LIGHT values — #B25E00 amber on near-black measured 2.6:1 and failed AA. These are the same steps [data-theme="dark"] already uses. */ --status-good: #4ADE80; --status-warning: #FBBF24; --status-serious: #FB923C; --status-critical: #F87171; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.5); --shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.6); --shadow-xl: 0 32px 72px -16px rgb(0 0 0 / 0.7); } /* -------------------------------------------------------------------------- Always-dark island. Sections that stay dark in BOTH themes (the hero, the organiser dashboard) opt in with .eg-dark, which re-points the semantic tokens locally. Charts inside inherit the dark series steps automatically. -------------------------------------------------------------------------- */ .eg-dark { color-scheme: dark; --surface-page: var(--eg-ink-900); --surface-raised: var(--eg-ink-700); --surface-sunken: var(--eg-ink-800); --surface-chart: var(--eg-ink-700); --border-subtle: rgba(255 255 255 / 0.09); --border-strong: rgba(255 255 255 / 0.18); --text-primary: #FFFFFF; --text-secondary: rgba(255 255 255 / 0.66); --text-muted: rgba(255 255 255 / 0.58); --accent-text: #9B86FF; --accent-on-soft: #C7BAFF; --action-on-soft: #3FD9BC; --series-1: #8B72FF; --series-2: #17A992; --series-3: #C87D0A; --series-4: #DB5292; --series-5: #3E8CE0; --chart-grid: rgba(255 255 255 / 0.08); --chart-axis: rgba(255 255 255 / 0.24); --eg-violet-soft: rgba(123 91 255 / 0.18); --eg-teal-soft: rgba(20 196 166 / 0.15); /* The status colours were missing here, so anything inside an .eg-dark island fell back to the LIGHT values — #B25E00 amber on near-black measured 2.6:1 and failed AA. These are the same steps [data-theme="dark"] already uses. */ --status-good: #4ADE80; --status-warning: #FBBF24; --status-serious: #FB923C; --status-critical: #F87171; background: var(--surface-page); color: var(--text-primary); } /* -------------------------------------------------------------------------- Always-light island (THE ONE-PAGE CHECKOUT, Utsav 2026-10-01). The mirror of .eg-dark: a calm work surface — the checkout form — inside a page whose is the dark island. It re-points the semantic tokens to their light-ground values (the :root defaults above, every pair measured on white/paper) AND the v3 aliases (--c-*), because those are computed where they are declared (html.eg-c) and would otherwise stay dark. -------------------------------------------------------------------------- */ .eg-light { color-scheme: light; --surface-page: var(--eg-paper); --surface-raised: var(--eg-white); --surface-sunken: var(--eg-grey-50); --border-subtle: var(--eg-grey-100); --border-strong: var(--eg-grey-200); --text-primary: var(--eg-ink-900); --text-secondary: var(--eg-grey-400); /* 7.52:1 on white */ --text-muted: var(--eg-grey-300); /* 5.28:1 on white */ --accent-text: var(--eg-violet); /* 6.07:1 on the light ground */ --accent-on-soft: var(--eg-violet-deep); --action-on-soft: var(--eg-teal-deep); --eg-violet-soft: #ECE8FF; --eg-teal-soft: #E0F7F2; --status-good: #067647; --status-warning: #B25E00; --status-serious: #C4320A; --status-critical: #A11B1B; --c-ink: var(--eg-white); --c-ink-soft: var(--eg-white); --c-surface: var(--eg-white); --c-accent: var(--accent-text); --c-text: var(--text-primary); --c-text-2: var(--text-secondary); --c-text-3: var(--text-muted); --c-line: var(--border-subtle); --c-line-strong: var(--border-strong); color: var(--text-primary); }