/* =========================================================================== tokens.css — MESRI Data Hub marketing site --------------------------------------------------------------------------- Design tokens: brand ramps, fluid type scale, spacing, radii, elevation, motion — plus two complete themes: light — "field notebook" warm paper, ink-dark text, printed-form feel dark — "control room" deep slate, lit panels, phosphor-green accents Themes are driven by [data-theme] on . With no attribute set we follow the OS via prefers-color-scheme; an explicit attribute always wins, in both directions. The semantic block is deliberately written twice (once under the media query, once under the attribute) — CSS has no way to share a declaration list between the two, and duplication reads better than a custom-property toggle hack. =========================================================================== */ :root { color-scheme: light dark; /* --- Brand ramps ------------------------------------------------------ */ /* Verdant — primary. Seeded from the app's own default #1D9E75. */ --verdant-50: #edfaf5; --verdant-100: #cff1e4; --verdant-200: #a2e3c9; --verdant-300: #6dceab; --verdant-400: #3ab68d; --verdant-500: #1d9e75; --verdant-600: #14815f; --verdant-700: #11674c; --verdant-800: #0f503c; --verdant-900: #0a3a2c; /* Signal — secondary. The app's chart blue; used for data + links. */ --signal-50: #eef5fd; --signal-100: #d6e7fa; --signal-200: #aecff5; --signal-300: #7fb2ec; --signal-400: #559ce4; --signal-500: #378add; --signal-600: #2a6cb4; --signal-700: #22558c; --signal-800: #1c446e; --signal-900: #142f4d; /* Ember — warm accent, warnings, "needs attention" states. */ --ember-100: #fbe4dc; --ember-300: #ef9d7d; --ember-500: #d85a30; --ember-600: #b34724; --ember-700: #8c371c; /* Amber — the app's "warning" validation colour. */ --amber-100: #fbf0d8; --amber-500: #ba7517; --amber-600: #955d12; /* Crimson — the app's "error" validation colour. */ --crimson-100: #fbdedd; --crimson-500: #e24b4a; --crimson-600: #c02f2e; /* Neutrals — warm-tinted greys, so light mode reads like paper not screen. */ --ink-0: #ffffff; --ink-25: #fcfbf9; --ink-50: #f7f5f1; --ink-100: #eeebe5; --ink-200: #ddd8cf; --ink-300: #c2bcb1; --ink-400: #9b948a; --ink-500: #756f66; --ink-600: #57524b; --ink-700: #3e3a35; --ink-800: #2a2724; --ink-850: #1f1d1b; --ink-900: #171614; /* Slates — cool neutrals for the dark "control room" theme. */ --slate-950: #0b0f14; --slate-900: #0f151c; --slate-850: #141c25; --slate-800: #1a232e; --slate-750: #212c39; --slate-700: #2a3745; --slate-600: #3c4c5d; --slate-500: #5a6b7d; --slate-400: #8496a8; --slate-300: #aebccb; --slate-200: #cfd9e3; --slate-100: #e6ecf2; /* --- Typography ------------------------------------------------------- */ /* No web fonts: the site must work from a bare file:// open, offline. These stacks pick the best available display / text / mono face per OS, with Khmer fallbacks because the product ships a Khmer UI. */ --font-display: "Avenir Next", "Segoe UI Variable Display", "SF Pro Display", "Helvetica Neue", system-ui, -apple-system, "Noto Sans Khmer", "Khmer OS Battambang", sans-serif; --font-body: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Khmer", "Khmer OS Battambang", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; /* Fluid scale — each step interpolates between a 360px and a 1400px viewport, so headings grow smoothly instead of stepping at breakpoints. */ --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem); --step--1: clamp(0.81rem, 0.78rem + 0.14vw, 0.88rem); --step-0: clamp(0.94rem, 0.91rem + 0.16vw, 1.03rem); --step-1: clamp(1.09rem, 1.02rem + 0.34vw, 1.28rem); --step-2: clamp(1.27rem, 1.14rem + 0.62vw, 1.60rem); --step-3: clamp(1.48rem, 1.26rem + 1.05vw, 2.00rem); --step-4: clamp(1.73rem, 1.37rem + 1.68vw, 2.50rem); --step-5: clamp(2.01rem, 1.46rem + 2.60vw, 3.13rem); --step-6: clamp(2.34rem, 1.51rem + 3.92vw, 3.91rem); --step-7: clamp(2.73rem, 1.51rem + 5.76vw, 4.88rem); --leading-tight: 1.08; --leading-snug: 1.25; --leading-body: 1.62; --leading-loose: 1.75; --tracking-tight: -0.022em; --tracking-snug: -0.012em; --tracking-normal: 0em; --tracking-wide: 0.08em; --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-black: 800; /* --- Spacing ---------------------------------------------------------- */ --space-3xs: 6px; --space-2xs: 12px; --space-xs: 18px; --space-sm: 26px; --space-md: 40px; --space-lg: 60px; --space-xl: 88px; --space-2xl: 120px; /* Vertical rhythm for page sections — shrinks on small screens. */ --section-y: clamp(var(--space-lg), 7vw, var(--space-2xl)); --gutter: clamp(var(--space-xs), 4vw, var(--space-md)); --measure: 68ch; /* comfortable reading width */ --content: 1180px; /* standard container */ --content-wide: 1360px; /* --- Radii ------------------------------------------------------------ */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-full: 999px; /* --- Borders ---------------------------------------------------------- */ --hairline: 1px; /* --- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur-mid: 260ms; --dur-slow: 460ms; --dur-xslow: 900ms; /* --- Z-index --------------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-toast: 400; } /* =========================================================================== LIGHT THEME — "field notebook" Warm paper ground, ink text, verdant accents. The default. =========================================================================== */ :root, :root[data-theme="light"] { --bg: var(--ink-25); --bg-sunk: var(--ink-50); --surface: var(--ink-0); --surface-2: var(--ink-25); --surface-3: var(--ink-50); --surface-inset: var(--ink-100); --surface-invert: var(--ink-900); --text: var(--ink-900); --text-strong: #0d0c0b; --text-muted: var(--ink-600); --text-subtle: var(--ink-500); --text-faint: var(--ink-400); --text-invert: var(--ink-0); --text-on-brand: #ffffff; --border: var(--ink-200); --border-soft: var(--ink-100); --border-strong: var(--ink-300); --brand: var(--verdant-500); --brand-hover: var(--verdant-600); --brand-active: var(--verdant-700); --brand-text: var(--verdant-700); --brand-soft: var(--verdant-50); --brand-soft-border: var(--verdant-200); --accent: var(--signal-500); --accent-text: var(--signal-700); --accent-soft: var(--signal-50); --warm: var(--ember-500); --warm-text: var(--ember-700); --warm-soft: var(--ember-100); /* Validation states, mirroring the app's own SCOL map. */ --ok: var(--verdant-500); --ok-soft: var(--verdant-50); --ok-text: var(--verdant-700); --warn: var(--amber-500); --warn-soft: var(--amber-100); --warn-text: var(--amber-600); --bad: var(--crimson-500); --bad-soft: var(--crimson-100); --bad-text: var(--crimson-600); --focus-ring: var(--verdant-600); /* 4-step elevation. Light mode uses tight, warm-tinted shadows. */ --elev-1: 0 1px 2px rgba(23, 22, 20, 0.05), 0 1px 1px rgba(23, 22, 20, 0.04); --elev-2: 0 2px 4px rgba(23, 22, 20, 0.05), 0 4px 10px -2px rgba(23, 22, 20, 0.07); --elev-3: 0 4px 8px rgba(23, 22, 20, 0.05), 0 14px 28px -6px rgba(23, 22, 20, 0.11); --elev-4: 0 8px 16px rgba(23, 22, 20, 0.06), 0 32px 64px -12px rgba(23, 22, 20, 0.18); --glow-brand: 0 8px 28px -6px rgba(29, 158, 117, 0.42); --glow-accent: 0 8px 28px -6px rgba(55, 138, 221, 0.38); /* Decorative washes */ --wash-hero: radial-gradient(60% 55% at 12% 0%, rgba(29, 158, 117, 0.13), transparent 70%), radial-gradient(50% 50% at 92% 8%, rgba(55, 138, 221, 0.11), transparent 70%), radial-gradient(70% 60% at 50% 100%, rgba(216, 90, 48, 0.06), transparent 70%); --wash-panel: linear-gradient(180deg, var(--ink-0), var(--ink-25)); --grid-line: rgba(23, 22, 20, 0.055); --scrim: rgba(23, 22, 20, 0.42); --shine: rgba(255, 255, 255, 0.7); } /* =========================================================================== DARK THEME — "control room" Deep cool slate, lit surfaces, brighter verdant so data stays legible. =========================================================================== */ /* Followed automatically when the OS prefers dark and the visitor has not explicitly picked light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--slate-950); --bg-sunk: #070a0e; --surface: var(--slate-900); --surface-2: var(--slate-850); --surface-3: var(--slate-800); --surface-inset: var(--slate-750); --surface-invert: var(--slate-100); --text: var(--slate-100); --text-strong: #f4f8fb; --text-muted: var(--slate-300); --text-subtle: var(--slate-400); --text-faint: var(--slate-500); --text-invert: var(--slate-950); --text-on-brand: #04150f; --border: var(--slate-700); --border-soft: var(--slate-750); --border-strong: var(--slate-600); --brand: var(--verdant-400); --brand-hover: var(--verdant-300); --brand-active: var(--verdant-200); --brand-text: var(--verdant-300); --brand-soft: rgba(58, 182, 141, 0.14); --brand-soft-border: rgba(58, 182, 141, 0.34); --accent: var(--signal-300); --accent-text: var(--signal-200); --accent-soft: rgba(127, 178, 236, 0.14); --warm: var(--ember-300); --warm-text: var(--ember-300); --warm-soft: rgba(239, 157, 125, 0.14); --ok: var(--verdant-400); --ok-soft: rgba(58, 182, 141, 0.16); --ok-text: var(--verdant-300); --warn: #e3a83f; --warn-soft: rgba(227, 168, 63, 0.16); --warn-text: #eec076; --bad: #f4736f; --bad-soft: rgba(244, 115, 111, 0.16); --bad-text: #f89b98; --focus-ring: var(--verdant-300); --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03); --elev-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 6px 14px -4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); --elev-3: 0 6px 14px rgba(0, 0, 0, 0.45), 0 18px 36px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); --elev-4: 0 12px 24px rgba(0, 0, 0, 0.5), 0 40px 80px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); --glow-brand: 0 10px 34px -8px rgba(58, 182, 141, 0.5); --glow-accent: 0 10px 34px -8px rgba(127, 178, 236, 0.45); --wash-hero: radial-gradient(60% 55% at 12% 0%, rgba(29, 158, 117, 0.22), transparent 70%), radial-gradient(50% 50% at 92% 8%, rgba(55, 138, 221, 0.18), transparent 70%), radial-gradient(70% 60% at 50% 100%, rgba(216, 90, 48, 0.10), transparent 70%); --wash-panel: linear-gradient(180deg, var(--slate-850), var(--slate-900)); --grid-line: rgba(174, 188, 203, 0.07); --scrim: rgba(3, 6, 10, 0.66); --shine: rgba(255, 255, 255, 0.08); } } /* Explicit choice — must win over the media query above, hence the repetition. */ :root[data-theme="dark"] { --bg: var(--slate-950); --bg-sunk: #070a0e; --surface: var(--slate-900); --surface-2: var(--slate-850); --surface-3: var(--slate-800); --surface-inset: var(--slate-750); --surface-invert: var(--slate-100); --text: var(--slate-100); --text-strong: #f4f8fb; --text-muted: var(--slate-300); --text-subtle: var(--slate-400); --text-faint: var(--slate-500); --text-invert: var(--slate-950); --text-on-brand: #04150f; --border: var(--slate-700); --border-soft: var(--slate-750); --border-strong: var(--slate-600); --brand: var(--verdant-400); --brand-hover: var(--verdant-300); --brand-active: var(--verdant-200); --brand-text: var(--verdant-300); --brand-soft: rgba(58, 182, 141, 0.14); --brand-soft-border: rgba(58, 182, 141, 0.34); --accent: var(--signal-300); --accent-text: var(--signal-200); --accent-soft: rgba(127, 178, 236, 0.14); --warm: var(--ember-300); --warm-text: var(--ember-300); --warm-soft: rgba(239, 157, 125, 0.14); --ok: var(--verdant-400); --ok-soft: rgba(58, 182, 141, 0.16); --ok-text: var(--verdant-300); --warn: #e3a83f; --warn-soft: rgba(227, 168, 63, 0.16); --warn-text: #eec076; --bad: #f4736f; --bad-soft: rgba(244, 115, 111, 0.16); --bad-text: #f89b98; --focus-ring: var(--verdant-300); --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03); --elev-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 6px 14px -4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); --elev-3: 0 6px 14px rgba(0, 0, 0, 0.45), 0 18px 36px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); --elev-4: 0 12px 24px rgba(0, 0, 0, 0.5), 0 40px 80px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); --glow-brand: 0 10px 34px -8px rgba(58, 182, 141, 0.5); --glow-accent: 0 10px 34px -8px rgba(127, 178, 236, 0.45); --wash-hero: radial-gradient(60% 55% at 12% 0%, rgba(29, 158, 117, 0.22), transparent 70%), radial-gradient(50% 50% at 92% 8%, rgba(55, 138, 221, 0.18), transparent 70%), radial-gradient(70% 60% at 50% 100%, rgba(216, 90, 48, 0.10), transparent 70%); --wash-panel: linear-gradient(180deg, var(--slate-850), var(--slate-900)); --grid-line: rgba(174, 188, 203, 0.07); --scrim: rgba(3, 6, 10, 0.66); --shine: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; }