/* =========================================================================== Northwest Falls: design tokens --------------------------------------------------------------------------- The single source of truth for colour, space, type and motion. EVERY other stylesheet in this org consumes these variables and must never hard-code a hex value. That rule is what keeps light mode honest: adding a raw colour anywhere else means it stops flipping with the theme. Theme resolution: a tiny inline script in every stamps data-theme="dark|light" on BEFORE first paint. It reads a cookie scoped to .northwestfalls.com, not localStorage, because the app is spread over six subdomains and localStorage does not cross an origin. THE PALETTE IS MONOCHROME ON PURPOSE. Black and white, one hairline, and grey for everything that is not the subject. Artwork and waveforms are the only saturated things on a page, so they read as the content rather than competing with the chrome. Colour here carries meaning: green means it worked, red means it failed. Nothing is coloured to look nice. =========================================================================== */ :root { /* --- Brand ------------------------------------------------------------- Kept for status and the rare accent. Never the primary action colour. */ --pine-50: #eaf6ef; --pine-100: #cbe9d8; --pine-200: #a3d7bb; --pine-300: #74c199; --pine-400: #4faa7d; --pine-500: #3d9970; --pine-600: #2f7d5b; --pine-700: #256448; --pine-800: #1c4b36; --pine-900: #133224; --north-300: #8fb4f2; --north-400: #6c97e6; --north-500: #5b8def; --north-600: #3f6dcc; --north-700: #2f52a0; --rain-400: #9aa7b8; /* --- Semantic status --------------------------------------------------- */ --success: #3d9970; --warning: #d99a3d; --danger: #e05a5a; --info: #5b8def; /* --- Radius ------------------------------------------------------------- Tighter than before. Large radii read as consumer app; the reference language here is closer to an instrument panel. */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* --- Space (4px base) --------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- Type --------------------------------------------------------------- The ramp climbs steeply at the top. A headline is meant to be the only thing you see; a paragraph is meant to be small and quiet. Text that sits between those two sizes is the thing that makes a page look like filler, so the scale deliberately has no comfortable middle to hide in. */ --font-sans: 'Onest', system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.375rem; --text-4xl: 3.25rem; --text-5xl: 4.25rem; --text-6xl: 5.5rem; --leading-tight: 1.05; --leading-snug: 1.3; --leading-body: 1.6; /* Display headings: large, light, tightly tracked. */ --track-display: -0.035em; --track-tight: -0.02em; --weight-display: 500; /* --- Motion ------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 320ms; --dur-lazy: 520ms; /* --- Layout ------------------------------------------------------------- */ --topbar-h: 62px; --sidebar-w: 244px; --page-max: 1120px; --page-wide: 1320px; --page-narrow: 720px; --z-base: 1; --z-sticky: 100; --z-dropdown: 400; --z-modal: 800; --z-toast: 900; --z-loader: 1000; } /* =========================================================================== DARK (default) Near black rather than pure black. #000 against a bright OLED headline is harsh at night, and pure black hides the 1px borders the whole layout is built from. =========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #060607; --bg-deep: #000000; --bg-raised: #0c0c0e; --surface-1: rgba(255, 255, 255, 0.022); --surface-2: rgba(255, 255, 255, 0.045); --surface-3: rgba(255, 255, 255, 0.075); --surface-solid: #0e0e11; --surface-panel: #0a0a0c; --surface-overlay: rgba(8, 8, 10, 0.96); --scrim: rgba(0, 0, 0, 0.74); --border-subtle: rgba(255, 255, 255, 0.055); --border: rgba(255, 255, 255, 0.095); --border-strong: rgba(255, 255, 255, 0.18); --text-primary: #ffffff; --text-secondary: #9b9da3; --text-tertiary: #74767c; --text-quaternary:#54565c; --text-inverse: #060607; /* The primary action is the inverse of the page. It is the only element on a screen allowed to be pure white, which is what makes it unmissable without needing a colour. */ --invert-bg: #ffffff; --invert-fg: #060607; --invert-hover: #d9dade; --accent: var(--pine-400); --accent-hover: var(--pine-300); --accent-pressed: var(--pine-500); --accent-fg: #05140d; --accent-soft: rgba(79, 170, 125, 0.13); --accent-tint: rgba(79, 170, 125, 0.07); --accent-border: rgba(79, 170, 125, 0.34); --accent-glow: rgba(79, 170, 125, 0.22); --accent-2: var(--north-400); --accent-2-soft: rgba(108, 151, 230, 0.13); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 26px 64px -22px rgba(0, 0, 0, 0.85); --shadow-xl: 0 44px 96px -28px rgba(0, 0, 0, 0.9); --skeleton-base: rgba(255, 255, 255, 0.05); --skeleton-shine: rgba(255, 255, 255, 0.09); --ambient-1: rgba(255, 255, 255, 0.055); --ambient-2: rgba(108, 151, 230, 0.05); } /* =========================================================================== LIGHT Paper white, not grey. Surfaces barely separate from the page; the hairline does the work of dividing things, exactly as it does in dark. =========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-deep: #f4f4f5; --bg-raised: #ffffff; --surface-1: rgba(0, 0, 0, 0.014); --surface-2: rgba(0, 0, 0, 0.032); --surface-3: rgba(0, 0, 0, 0.055); --surface-solid: #fafafa; --surface-panel: #ffffff; --surface-overlay: rgba(255, 255, 255, 0.97); --scrim: rgba(10, 10, 11, 0.4); --border-subtle: rgba(0, 0, 0, 0.06); --border: rgba(0, 0, 0, 0.105); --border-strong: rgba(0, 0, 0, 0.2); --text-primary: #0a0a0b; --text-secondary: #5f6166; --text-tertiary: #83868c; --text-quaternary:#a2a4aa; --text-inverse: #ffffff; --invert-bg: #0a0a0b; --invert-fg: #ffffff; --invert-hover: #2b2b2e; --accent: var(--pine-600); --accent-hover: var(--pine-700); --accent-pressed: var(--pine-800); --accent-fg: #ffffff; --accent-soft: rgba(47, 125, 91, 0.1); --accent-tint: rgba(47, 125, 91, 0.05); --accent-border: rgba(47, 125, 91, 0.3); --accent-glow: rgba(47, 125, 91, 0.16); --accent-2: var(--north-600); --accent-2-soft: rgba(63, 109, 204, 0.09); --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.05); --shadow-md: 0 8px 24px rgba(10, 10, 11, 0.07); --shadow-lg: 0 24px 56px -22px rgba(10, 10, 11, 0.15); --shadow-xl: 0 40px 88px -30px rgba(10, 10, 11, 0.2); --skeleton-base: rgba(0, 0, 0, 0.05); --skeleton-shine: rgba(0, 0, 0, 0.022); --ambient-1: rgba(0, 0, 0, 0.04); --ambient-2: rgba(63, 109, 204, 0.05); --success: var(--pine-600); --warning: #b87a1e; --danger: #c44343; --info: var(--north-600); } /* Logo swap. Both files ship; CSS picks one so there is no flash of the wrong mark and no JS involved. */ .logo-mark--light { display: none; } :root[data-theme="light"] .logo-mark--dark { display: none; } :root[data-theme="light"] .logo-mark--light { display: inline-block; } /* Respect the OS. Anything animated must degrade to an instant state change rather than a shorter animation. Half-speed motion still triggers people. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-med: 0.01ms; --dur-slow: 0.01ms; --dur-lazy: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }