/* ========================================================================== meridian — design tokens -------------------------------------------------------------------------- The entire visual identity lives in this file. Every other stylesheet in this theme consumes these tokens and defines no raw colour of its own, so a new theme can be produced by re-authoring this file alone. Light is the base declaration; dark is an override keyed off the `data-theme="dark"` attribute the site already sets on . Ambient palette additionally shifts on `data-tod` (dawn/day/dusk/night). Namespace: every custom property is --lx-*, so this can never collide with the site-wide design system in /css/style.css. ========================================================================== */ :root { /* ── Typography ─────────────────────────────────────────────────────── */ --lx-f-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --lx-f-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; --lx-f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — 1.200 minor third, tuned so body sits at a comfortable 15px */ --lx-fs-micro: 0.6875rem; /* 11px — mono labels */ --lx-fs-xs: 0.75rem; /* 12px — captions */ --lx-fs-sm: 0.8125rem; /* 13px — secondary */ --lx-fs-base: 0.9375rem; /* 15px — body */ --lx-fs-md: 1.0625rem; /* 17px — lead */ --lx-fs-lg: 1.375rem; /* 22px — card titles */ --lx-fs-xl: 1.75rem; /* 28px — section heads */ --lx-fs-2xl: 2.5rem; /* 40px — page titles */ --lx-fs-3xl: 3.5rem; /* 56px — hero greeting */ --lx-lh-tight: 1.15; --lx-lh-snug: 1.35; --lx-lh-body: 1.6; --lx-lh-loose: 1.75; /* Optical tracking: tighten as size grows, open up for small mono labels */ --lx-ls-hero: -0.03em; --lx-ls-title: -0.02em; --lx-ls-body: -0.005em; --lx-ls-label: 0.14em; --lx-ls-wordmark: 0.38em; /* ── Space — 4px base ───────────────────────────────────────────────── */ --lx-s-1: 0.25rem; --lx-s-2: 0.5rem; --lx-s-3: 0.75rem; --lx-s-4: 1rem; --lx-s-5: 1.25rem; --lx-s-6: 1.5rem; --lx-s-8: 2rem; --lx-s-10: 2.5rem; --lx-s-12: 3rem; --lx-s-16: 4rem; --lx-s-20: 5rem; --lx-s-24: 6rem; /* ── Geometry ───────────────────────────────────────────────────────── */ --lx-r-sm: 10px; --lx-r-md: 14px; --lx-r-lg: 20px; --lx-r-xl: 28px; --lx-r-2xl: 36px; --lx-r-full: 999px; /* ── Motion ─────────────────────────────────────────────────────────── */ --lx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --lx-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); --lx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --lx-t-fast: 160ms; --lx-t-base: 240ms; --lx-t-slow: 420ms; --lx-t-drift: 72s; /* ambient backdrop loop */ /* ── Layering ───────────────────────────────────────────────────────── */ --lx-z-backdrop: 0; --lx-z-content: 1; --lx-z-sidebar: 60; --lx-z-topbar: 70; --lx-z-mobilenav: 75; --lx-z-overlay: 80; --lx-z-panel: 85; --lx-z-sheet: 90; --lx-z-toast: 100; /* ── Shell metrics ──────────────────────────────────────────────────── */ --lx-sidebar-w: 264px; --lx-topbar-h: 64px; --lx-measure: 68ch; /* reading measure for long-form article text */ /* Pointer position, written by theme.js for specular highlights */ --lx-mx: 50%; --lx-my: 50%; /* ====================================================================== LIGHT MODE (default) A warm paper ground rather than clinical white — the reference material's calm depends on the backdrop being tinted, never pure #fff. ====================================================================== */ --lx-bg: #F2EEE8; --lx-bg-sunk: #E8E2D9; --lx-bg-solid: #FBF9F6; /* backdrop-filter fallback surface */ /* Ambient mesh — three drifting blobs. Hues are bare `R G B` triples so the time-of-day blocks below can restate colour alone, while opacity stays a single tunable per mode. Turning the whole ambience up or down is therefore one number, not nine. */ --lx-mesh-1: 216 158 104; --lx-mesh-2: 156 138 180; --lx-mesh-3: 98 148 158; --lx-mesh-str: 0.55; --lx-mesh-opacity: 1; --lx-grain-opacity: 0.05; --lx-vignette: rgba(84, 68, 50, 0.20); /* Glass. Light grounds diffuse blur far more weakly than dark ones, so the light surface leans on a firmer border and a softer shadow instead of trying to invert the dark values. */ --lx-glass: rgba(255, 255, 255, 0.55); --lx-glass-strong: rgba(255, 255, 255, 0.72); --lx-glass-subtle: rgba(255, 255, 255, 0.34); --lx-glass-border: rgba(46, 38, 30, 0.10); --lx-glass-border-strong: rgba(46, 38, 30, 0.16); --lx-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85); --lx-glass-blur: blur(24px) saturate(150%); --lx-glass-blur-sm: blur(14px) saturate(140%); /* Near-opaque glass for content-bearing overlays (side panels, modals) that must never let page content bleed through and collide with their own text — the blur+saturate still reads as "glassy" at the edges, but the base is solid enough to be a true reading surface. */ --lx-panel-surface: rgba(251, 249, 246, 0.995); --lx-shadow-raised: 0 2px 8px rgba(52, 42, 32, 0.06), 0 8px 24px rgba(52, 42, 32, 0.07); --lx-shadow-floating: 0 4px 14px rgba(52, 42, 32, 0.08), 0 16px 40px rgba(52, 42, 32, 0.10); --lx-shadow-overlay: 0 8px 24px rgba(52, 42, 32, 0.12), 0 32px 80px rgba(52, 42, 32, 0.18); /* Tint used when a rule needs its own directional shadow geometry (a drawer edge, a rail) rather than one of the composites below. */ --lx-shadow-tint: rgba(52, 42, 32, 0.14); /* The complete glass shadow: lift + the inset lip that catches light along a surface's top edge. .lx-glass and every bridged area card read from these, so "what glass looks like" is stated once, here. Depth follows elevation: raised for cards, floating for popovers, overlay for modals and panels. */ --lx-glass-shadow: var(--lx-shadow-raised), var(--lx-glass-inset); --lx-glass-shadow-floating: var(--lx-shadow-floating), var(--lx-glass-inset); --lx-glass-shadow-overlay: var(--lx-shadow-overlay), var(--lx-glass-inset); /* Specular sheen that tracks the pointer across a glass surface */ --lx-sheen: rgba(255, 255, 255, 0.55); /* Text ladder */ --lx-t1: rgba(28, 24, 20, 0.94); --lx-t2: rgba(28, 24, 20, 0.70); --lx-t3: rgba(28, 24, 20, 0.50); --lx-t4: rgba(28, 24, 20, 0.34); --lx-t-inv: rgba(252, 250, 247, 0.96); /* Accents — one warm highlight, one functional interactive colour. Deliberately no loud brand colour: restraint is the identity. */ --lx-accent: #8A5E2E; --lx-accent-soft: rgba(138, 94, 46, 0.12); --lx-link: #3B5BBF; --lx-link-soft: rgba(59, 91, 191, 0.12); --lx-success: #3F7D58; --lx-success-soft: rgba(63, 125, 88, 0.14); --lx-warning: #A9741C; --lx-warning-soft: rgba(169, 116, 28, 0.14); --lx-danger: #A8443C; --lx-danger-soft: rgba(168, 68, 60, 0.14); --lx-info: #37707F; --lx-info-soft: rgba(55, 112, 127, 0.14); /* Hairlines and fills used across components */ --lx-line: rgba(46, 38, 30, 0.10); --lx-line-soft: rgba(46, 38, 30, 0.06); --lx-fill: rgba(46, 38, 30, 0.045); --lx-fill-hover: rgba(46, 38, 30, 0.075); --lx-fill-active:rgba(46, 38, 30, 0.11); --lx-focus: rgba(59, 91, 191, 0.55); color-scheme: light; } /* ========================================================================== DARK MODE The reference material is dark-first; this is the theme's true home. ========================================================================== */ [data-theme="dark"] { --lx-bg: #0B0D12; --lx-bg-sunk: #07080C; --lx-bg-solid: #12151C; --lx-mesh-1: 232 152 96; --lx-mesh-2: 132 110 186; --lx-mesh-3: 52 128 148; --lx-mesh-str: 0.42; --lx-mesh-opacity: 1; --lx-grain-opacity: 0.07; --lx-vignette: rgba(0, 0, 0, 0.62); --lx-glass: rgba(255, 255, 255, 0.06); --lx-glass-strong: rgba(255, 255, 255, 0.10); --lx-glass-subtle: rgba(255, 255, 255, 0.035); --lx-glass-border: rgba(255, 255, 255, 0.12); --lx-glass-border-strong: rgba(255, 255, 255, 0.20); --lx-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14); --lx-glass-blur: blur(24px) saturate(140%); --lx-glass-blur-sm: blur(14px) saturate(130%); --lx-panel-surface: rgba(17, 20, 27, 0.995); --lx-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.30), 0 8px 32px rgba(0, 0, 0, 0.35); --lx-shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.38), 0 20px 52px rgba(0, 0, 0, 0.46); --lx-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48), 0 40px 96px rgba(0, 0, 0, 0.60); --lx-shadow-tint: rgba(0, 0, 0, 0.45); --lx-sheen: rgba(255, 255, 255, 0.10); --lx-t1: rgba(255, 255, 255, 0.94); --lx-t2: rgba(255, 255, 255, 0.70); --lx-t3: rgba(255, 255, 255, 0.50); --lx-t4: rgba(255, 255, 255, 0.34); --lx-t-inv: rgba(16, 14, 12, 0.94); --lx-accent: #E8C9A8; --lx-accent-soft: rgba(232, 201, 168, 0.14); --lx-link: #7EA6FF; --lx-link-soft: rgba(126, 166, 255, 0.14); --lx-success: #79C79A; --lx-success-soft: rgba(121, 199, 154, 0.14); --lx-warning: #E0B366; --lx-warning-soft: rgba(224, 179, 102, 0.14); --lx-danger: #E58C82; --lx-danger-soft: rgba(229, 140, 130, 0.14); --lx-info: #79BECD; --lx-info-soft: rgba(121, 190, 205, 0.14); --lx-line: rgba(255, 255, 255, 0.10); --lx-line-soft: rgba(255, 255, 255, 0.06); --lx-fill: rgba(255, 255, 255, 0.05); --lx-fill-hover: rgba(255, 255, 255, 0.085); --lx-fill-active: rgba(255, 255, 255, 0.13); --lx-focus: rgba(126, 166, 255, 0.65); color-scheme: dark; } /* ========================================================================== AMBIENT TIME-OF-DAY Only the three mesh hues change. Everything else stays fixed, so the shift reads as light moving across a room rather than as a different theme. ========================================================================== */ [data-tod="dawn"] { --lx-mesh-1: 240 168 138; --lx-mesh-2: 196 160 190; --lx-mesh-3: 132 172 192; } [data-tod="day"] { --lx-mesh-1: 206 190 150; --lx-mesh-2: 140 174 200; --lx-mesh-3: 110 166 160; } [data-tod="dusk"] { --lx-mesh-1: 234 148 100; --lx-mesh-2: 156 122 178; --lx-mesh-3: 74 116 156; } [data-tod="night"] { --lx-mesh-1: 128 118 186; --lx-mesh-2: 70 100 168; --lx-mesh-3: 56 116 132; } [data-theme="dark"][data-tod="dawn"] { --lx-mesh-1: 244 146 104; --lx-mesh-2: 158 122 190; --lx-mesh-3: 82 146 168; } [data-theme="dark"][data-tod="day"] { --lx-mesh-1: 208 186 138; --lx-mesh-2: 94 146 194; --lx-mesh-3: 62 142 140; } [data-theme="dark"][data-tod="dusk"] { --lx-mesh-1: 238 128 76; --lx-mesh-2: 140 94 182; --lx-mesh-3: 42 106 154; } [data-theme="dark"][data-tod="night"] { --lx-mesh-1: 108 98 190; --lx-mesh-2: 46 86 164; --lx-mesh-3: 38 110 132; }