/* ============================================================================ maxdcloudops-v2 — DESIGN TOKENS Owner: ux-designer. This file defines custom properties ONLY. The only selectors permitted here are :root, [data-theme="light"] and a :root inside a prefers-reduced-motion query. --------------------------------------------------------------------------- TWO SOURCES, AND THEY DO NOT OVERLAP. READ THIS BEFORE EDITING. FROM THE FIGMA REFERENCE -> TYPOGRAPHY, RHYTHM, GEOMETRY ONLY. the type ramp and its 70px top step, the measures that hold the h1 to two lines, line-heights (1 display / 1.55 body), the 300-weight deck, the 60/48/30 spacing rhythm, the 10px button radius, the pill, the light-above-the-button geometry, the blur radii. FROM THIS SITE -> COLOUR. the near-black blue-violet ground, electric cyan, violet, green. This is maxdcloudops' own identity and it is NOT app.ekimaks.ai's navy+gold. A previous revision copied that palette across by mistake; this file reverses it. Do not re-introduce gold. --------------------------------------------------------------------------- NO TOKEN NAME HAS EVER BEEN REMOVED FROM THIS FILE. Every name base.css / layout.css / sections.css / diagrams.css / quiz.css / motion.css / diagrams.js consumes still resolves. The *-neon names are once again literally accurate. Full drift table: docs/DESIGN.md, "READ THIS OR THE PAGE BREAKS". Naming convention for colour: --c-*-ink -> safe for TEXT (verified >= 4.5:1 on the surfaces it is used on, in BOTH themes) --c-* -> safe for GRAPHICS (verified >= 3:1 — lines, borders, icons, large display text >= 24px) Ratios are WCAG 2.1 relative luminance, computed per value. The full table with the surface each was measured against is in docs/DESIGN.md § 1 and § 5. ========================================================================== */ :root { color-scheme: dark; /* ========================================================================== 1. COLOUR — DARK (default theme) Ladder: #08090C page · #0F1117 well · #151822 raised · #050609 sunken. Near-black with a blue-violet undertone, so cyan and violet sit on it as LIGHT rather than as paint. Neutral grey would make them look printed. ========================================================================== */ /* --- Base surfaces ------------------------------------------------------- */ --c-bg: #08090C; /* page canvas L 0.002736 */ --c-surface: #0F1117; /* section wells, header fill L 0.005645 */ --c-surface-raised: #151822; /* cards, tab panels L 0.009281 */ --c-surface-sunken: #050609; /* diagram stage, footer L 0.001822 */ /* --- Borders — hueless white/ink at low alpha, NOT a palette colour. They are alpha so one value reads on every surface in the ladder; an opaque near-black border is 1.08:1 on --c-surface-raised, i.e. gone. See docs/DESIGN.md § 1 "Why the borders stayed translucent". -------- */ --c-border: rgb(255 255 255 / 0.10); /* 1.25:1 on bg — decorative */ --c-border-strong: rgb(255 255 255 / 0.18); /* 1.65:1 on bg — decorative */ --c-border-interactive: #616A85; /* 3.71:1 on bg ✓ / 3.30:1 on raised ✓ */ /* --- Text ramp ----------------------------------------------------------- */ --c-text: #F2F4F8; /* 18.08:1 on bg ✓ / 16.09:1 on raised ✓ */ --c-text-muted: #98A2B8; /* 7.77:1 on bg ✓ / 6.91:1 on raised ✓ */ --c-text-faint: #7A85A0; /* 5.40:1 on bg ✓ / 4.80:1 on raised ✓ */ --c-text-on-accent: #05161B; /* 10.22:1 on --c-accent-solid ✓ both themes */ /* --- Accent: ELECTRIC CYAN (brand, CTA, section numbers, active edges) ---- */ --c-accent: #22D3EE; /* 11.02:1 on bg ✓ / 9.80:1 on raised ✓ */ --c-accent-ink: #22D3EE; /* same — cyan on near-black clears AAA */ --c-accent-solid: #22D3EE; /* fill-only token. IDENTICAL in both themes so the CTA is one brand object, not two. Dark ink sits on it at 10.22:1 ✓. In LIGHT, --c-accent goes dark; solid does not — never swap one for the other. */ --c-accent-dim: #1B8FA3; /* 5.22:1 on bg ✓ de-energised strokes */ --c-accent-rgb: 34 211 238; /* --- Accent 2: VIOLET — the secondary. THE ONE TO WATCH. 4.70:1 on --c-bg ✓ but only 4.18:1 on --c-surface-raised ✗ for normal text. So --c-accent-2 is the GRAPHICS tier and --c-accent-2-ink is the only violet allowed on body-size text. --------------------------- */ --c-accent-2: #8B5CF6; /* 4.70:1 on bg ✓ / 4.18:1 on raised — 3:1 ✓ graphics + text >= 24px. NOT small text. */ --c-accent-2-ink: #A78BFA; /* 7.32:1 on bg ✓ / 6.51:1 on raised ✓ */ --c-accent-2-dim: #7049BE; /* 3.27:1 on --dg-stage ✓ receding strokes */ --c-accent-2-rgb: 139 92 246; /* --- Status -------------------------------------------------------------- */ --c-ok: #34D399; /* 10.36:1 on bg ✓ */ --c-ok-ink: #34D399; /* 10.36:1 on bg ✓ */ --c-ok-rgb: 52 211 153; --c-warn: #FBBF24; /* 11.93:1 on bg ✓ — amber cannot be confused with a cyan brand, so no hue-shift needed */ --c-warn-ink: #FBBF24; /* 11.93:1 on bg ✓ */ --c-warn-rgb: 251 191 36; --c-err: #F87171; /* 7.20:1 on bg ✓ */ --c-err-ink: #F87171; /* 7.20:1 on bg ✓ */ --c-err-rgb: 248 113 113; /* --- Tinted fills — cyan is very bright, so the wash sits at 0.10, not the 0.12 a duller hue would take. Cyan text on the cyan wash over bg is still 9.57:1 ✓ (the ghost button). ------------------------------- */ --c-accent-wash: rgb(34 211 238 / 0.10); --c-accent-wash-hi: rgb(34 211 238 / 0.16); --c-accent-2-wash: rgb(139 92 246 / 0.12); --c-ok-wash: rgb(52 211 153 / 0.12); --c-warn-wash: rgb(251 191 36 / 0.12); --c-err-wash: rgb(248 113 113 / 0.12); --c-hover-wash: rgb(255 255 255 / 0.045); --c-scrim: rgb(4 5 8 / 0.78); /* --- Diagram palette ----------------------------------------------------- THESE ARE THE NAMES diagrams.js RECOLOURS THE SIX SVGs WITH. Tier map (see docs/DESIGN.md § 5 "Diagram colour contract"): resting node --dg-node-stroke highlighted node --dg-node-stroke-hi (CYAN — the thing worth seeing) healthy / platform --c-ok (green) provider boundary --c-accent-2 (violet — a DIFFERENT HUE from the lines, so the tier reads without a value trick) connector, live --dg-line-active (CYAN — energy travels in cyan) packet --dg-packet ------------------------------------------------------------------------ */ --dg-stage: var(--c-surface-sunken); --dg-node-fill: #0D1017; --dg-node-stroke: #566280; /* 3.33:1 on stage ✓ */ --dg-node-stroke-hi: var(--c-accent); /* 11.21:1 on stage ✓ */ --dg-label: var(--c-text-muted); /* 7.43:1 on --dg-node-fill ✓ */ --dg-label-strong: var(--c-text); /* 17.28:1 on --dg-node-fill ✓ */ --dg-line: #525F7D; /* 3.18:1 on stage ✓ resting */ --dg-line-active: var(--c-accent); /* 11.21:1 on stage ✓ */ --dg-packet: #A5F3FC; /* 16.23:1 on stage ✓ */ --dg-group-stroke: #2A3350; /* dashed VPC boundary, decor */ --dg-group-fill: rgb(139 92 246 / 0.05); /* --- Gradients ----------------------------------------------------------- The four *-neon names are literal again: cyan -> violet. ------------------------------------------------------------------------ */ /* #read-progress — cyan through blue into violet, left to right */ --grad-neon: linear-gradient(90deg, #22D3EE 0%, #60A5FA 48%, #8B5CF6 100%); /* featured case card wash — cyan light falling from the top-left, decaying through violet */ --grad-neon-soft: linear-gradient(160deg, rgb(34 211 238 / 0.16) 0%, rgb(139 92 246 / 0.10) 58%, transparent 100%); /* FLAT 1px hairline, not a fade. KEPT from the Figma pass: the section separator is the START of a section (a top border on the inner container), not a decorative flourish under its heading. */ --grad-hairline: linear-gradient(90deg, var(--c-border) 0%, var(--c-border) 100%); /* card hover rule — cyan, fading at both ends */ --grad-rule-neon: linear-gradient(90deg, transparent 0%, rgb(34 211 238 / 0.55) 22%, rgb(34 211 238 / 0.55) 78%, transparent 100%); /* raised-surface sheen */ --grad-surface: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0) 42%); /* Highlight-word gradient, clipped to text. BOTH stops must clear 4.5:1 on --c-bg: #22D3EE 11.02:1 ✓ and #A78BFA 7.32:1 ✓. The mid violet #8B5CF6 is deliberately NOT a stop here — it is only 4.18:1 on --c-surface-raised and this gradient must stay safe wherever it lands. */ --grad-text-neon: linear-gradient(92deg, #22D3EE 0%, #A78BFA 100%); /* Hero atmosphere. GEOMETRY from the Figma (a wide shallow ellipse above and behind the headline plus a radial wash), HUE from this site's accents. Expressed as GRADIENTS — no filter, no compositing layer, cheap on a phone. The real blurred layer is opt-in via --blur-glow-lg and is desktop-only (see the blur budget in § 6). */ --mesh-hero: radial-gradient(120% 62% at 50% 0%, rgb(34 211 238 / 0.14) 0%, rgb(34 211 238 / 0.06) 38%, transparent 72%), radial-gradient(70% 44% at 50% 16%, rgb(139 92 246 / 0.14) 0%, transparent 70%), radial-gradient(90% 60% at 50% 100%, rgb(5 6 9 / 0.85) 0%, transparent 68%); /* ========================================================================== 2. TYPOGRAPHY — FROM THE FIGMA REFERENCE. This whole block is what the owner actually asked for and none of it changes with the palette. Three families, unchanged: Figtree display, DM Sans body, JetBrains Mono labels/metrics. All self-hosted in assets/fonts, wired in fonts.css. THE REFERENCE HAS FOUR SIZES. We keep all ten step NAMES (they are consumed by name) but collapse them onto a much shorter, calmer ramp: the top step drops 88 -> 70px, and --fs-base / --fs-md are IDENTICAL on purpose — the deck is separated from body copy by WEIGHT (300) and COLOUR (muted), the way the reference does it, not by size. ========================================================================== */ --font-display: "Figtree", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "DM Sans", ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* --- Fluid scale: each step interpolates 360px -> 1440px viewport -------- */ --fs-eyebrow: clamp(0.6875rem, 0.667rem + 0.093vw, 0.75rem); /* 11 -> 12 */ --fs-xs: clamp(0.75rem, 0.729rem + 0.093vw, 0.8125rem); /* 12 -> 13 */ --fs-sm: clamp(0.875rem, 0.854rem + 0.093vw, 0.9375rem); /* 14 -> 15 */ --fs-base: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem); /* 16 -> 17 */ --fs-md: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem); /* 16 -> 17 the DECK step — reference is 17px/1.5/300. Deliberately equal to --fs-base: same size, lighter weight, muted. */ --fs-lg: clamp(1.1875rem, 1.130rem + 0.255vw, 1.375rem); /* 19 -> 22 */ --fs-xl: clamp(1.375rem, 1.250rem + 0.556vw, 1.75rem); /* 22 -> 28 */ --fs-2xl: clamp(1.75rem, 1.500rem + 1.111vw, 2.5rem); /* 28 -> 40 */ --fs-3xl: clamp(2rem, 1.583rem + 1.852vw, 3.25rem); /* 32 -> 52 */ --fs-4xl: clamp(2.25rem, 1.542rem + 3.148vw, 4.375rem); /* 36 -> 70 lands exactly on the reference's 70px hero at 1440. */ /* --- Line heights — tight display, airy prose. The old set inverted this. */ --lh-display: 1; /* --fs-3xl / --fs-4xl — reference is line-height 1em */ --lh-tight: 1.08; /* --fs-xl / --fs-2xl */ --lh-snug: 1.3; /* card titles, small-caps notes */ --lh-body: 1.55; /* paragraphs (reference deck 1.5, +0.05 for prose) */ --lh-loose: 1.7; /* entity block, long-form notes */ /* --- Tracking ------------------------------------------------------------ */ --ls-display: -0.02em; /* Figtree 700 at 70px */ --ls-tight: -0.01em; --ls-normal: 0em; --ls-label: 0.06em; /* mono labels */ --ls-eyebrow: 0.14em; /* mono eyebrows + section numbers, ALL CAPS */ /* --- Weights ------------------------------------------------------------- */ --fw-light: 300; /* decks and hero deck. DM Sans 300 IS in fonts.css. Figtree ships 400-800 only: never ask --font-display for 300, you will silently get 400. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* Figtree — button label, 15/600 per reference */ --fw-bold: 700; --fw-display: 700; /* Figtree Bold, headings */ /* Available cuts, so nobody asks for a synthetic weight: Figtree 400 500 600 700 800 (no 300) DM Sans 300 400 500 JetBrains 400 500 Body/mono never go above --fw-medium; anything heavier switches to --font-display, which actually has the cut. */ /* --- Measures ------------------------------------------------------------ */ --measure: 66ch; --measure-narrow: 48ch; --measure-deck: 56ch; /* hero/section deck, keeps it to two lines */ --measure-display: 18ch; /* CAPS the hero headline at ~2 lines. THIS is the fix for the four-line headline — a max width, not a smaller font. Do not remove it. */ /* ========================================================================== 3. SPACING — 4px base, geometric after 24 ========================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* Fluid rhythm — the reference's three numbers, as three tokens */ --space-section: clamp(3.5rem, 2.2rem + 5.8vw, 7.5rem); /* 56 -> 120 */ --space-stack: clamp(2rem, 1.5rem + 2.2vw, 3rem); /* 32 -> 48 header-to-content. Reference: 48. */ --space-block: clamp(2.5rem, 1.9rem + 2.8vw, 3.75rem); /* 40 -> 60 gap between MAJOR blocks. Reference: 60. This is the token that fixed the section rhythm — it replaced a 96px dead band. Keep. */ --space-inline: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem);/* 24 -> 30 gap INSIDE a block. Reference: 28-30. */ /* ========================================================================== 4. LAYOUT — containers, gutters, control sizing ========================================================================== */ --container-wide: 1360px; --container-max: 1200px; /* 1440 viewport - 1200 = 120px each side */ --container-narrow: 720px; --container-pad: clamp(1rem, 0.5rem + 2.2vw, 2.5rem); /* 16 -> 40 */ --gutter: clamp(1rem, 0.63rem + 1.67vw, 1.5rem); /* 16 -> 24 */ --gutter-lg: clamp(1.5rem, 0.94rem + 2.5vw, 2.5rem); /* 24 -> 40 */ --header-h: 64px; --header-h-lg: 72px; --control-h: 44px; /* WCAG 2.5.5 minimum touch target */ --control-h-sm: 36px; /* desktop-only dense controls, never sole target */ --control-h-lg: 52px; /* primary CTA */ --tap-min: 44px; --rule-w: 1px; /* every hairline in the design */ --rule-w-brand: 2px; /* the nav's accent top border — now a CYAN line, */ /* which is one of the four permitted neon spots */ /* ========================================================================== 5. RADII — buttons 10, pills, cards 14 ========================================================================== */ --r-xs: 2px; --r-sm: 6px; --r-md: 10px; /* <- reference button radius. Buttons, inputs, tabs */ --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px; /* NOT the reference's literal 100px: .orbit__ring is up to 460px wide and 100px would render a squircle instead of a circle. Pixel-identical on a badge. */ --r-card: var(--r-lg); /* ========================================================================== 6. ELEVATION + LIGHT Dark theme: shadows are depth of near-black; "glow" is a LIGHT SOURCE with the geometry taken from the reference and the hue taken from this site's accents. BLUR BUDGET (enforced in docs/DESIGN.md § 3): - at most TWO blurred layers composited on screen at once - real `filter: blur()` is allowed on ONE element only, the hero ellipse, and only at >= 1024px. Below that the hero uses --mesh-hero, which is pure gradients and costs nothing. - `backdrop-filter` is allowed on exactly two elements site-wide: .site-header (--blur-panel) and the hero badge (--blur-badge). - box-shadow glows below are NOT blurred layers; they are unlimited. ========================================================================== */ --shadow-0: none; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.55); --shadow-2: 0 6px 20px -6px rgb(0 0 0 / 0.68), 0 1px 2px rgb(0 0 0 / 0.55); --shadow-3: 0 24px 56px -16px rgb(0 0 0 / 0.78), 0 2px 8px rgb(0 0 0 / 0.55); --shadow-header: 0 1px 0 var(--c-border), 0 10px 32px -18px rgb(0 0 0 / 0.92); /* Cyan light — primary CTA, active card edges, selected tab */ --glow-accent-sm: 0 0 0 1px rgb(34 211 238 / 0.28), 0 2px 14px -4px rgb(34 211 238 / 0.32); --glow-accent-md: 0 6px 24px -8px rgb(34 211 238 / 0.45); --glow-accent-lg: 0 12px 64px -16px rgb(34 211 238 / 0.40); /* Violet light — the featured card, the orbit core, anything "lit" */ --glow-accent-2: 0 8px 40px -12px rgb(139 92 246 / 0.45); --glow-ok: 0 0 14px -4px rgb(52 211 153 / 0.45); --glow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.07); /* --- Named blurs — every blur radius in the design ---------------------- */ --blur-glow-lg: 150px; /* hero ellipse — desktop only, ONE per page */ --blur-glow-md: 60px; /* reserved; not currently spent */ --blur-glow-sm: 10px; /* the white light source above the primary button */ --blur-panel: 8px; /* .site-header backdrop-filter */ --blur-badge: 7px; /* pill badge backdrop-filter */ /* --- Named light sources — GEOMETRY from the reference, HUE from here ---- */ --glow-hero-w: min(1508px, 118vw); /* reference ellipse width */ --glow-hero-h: min(508px, 46vh); /* reference ellipse height */ --glow-hero-tint: rgb(34 211 238 / 0.14); /* cyan, not the reference blue */ --glow-btn-w: 72%; /* white ellipse sitting ABOVE the primary button */ --glow-btn-h: 14px; --glow-btn-y: -6px; /* how far ABOVE the button's top edge it sits. A blur below a button is a drop shadow; a blur above it is a light source. Keep it negative. */ --glow-btn-tint: rgb(255 255 255 / 0.30); /* Focus ring — VIOLET, on a near-black inner halo. The ring must never be the same hue as the CTA it rings: cyan-on-cyan is 1.00:1. Violet on cyan is only 1.51:1 either, so the halo is what does the real work — it draws a near-black band INSIDE the 2px offset, and #A78BFA on near-black is 7.45:1 ✓ regardless of what sits underneath. */ --focus-ring-w: 2px; --focus-ring-off: 2px; --focus-ring-color: var(--c-accent-2-ink); /* 7.32:1 on bg ✓ */ --focus-ring-halo: 0 0 0 5px rgb(5 6 9 / 0.92), 0 0 0 6px rgb(167 139 250 / 0.20); /* ========================================================================== 7. MOTION — durations + named easings. Transform/opacity only. ========================================================================== */ --dur-instant: 90ms; --dur-fast: 160ms; /* hover, focus, chip, button */ --dur-base: 240ms; /* tab cross-fade, card lift, theme flip */ --dur-slow: 380ms; /* scroll reveal, panel enter */ --dur-slower: 720ms; /* hero staging, diagram cascade total */ --dur-count: 1400ms; /* hero counters 0 -> N */ --dur-packet: 2600ms; /* one diagram packet traversal */ --dur-orbit: 48s; /* full stack-orbit rotation */ --stagger-xs: 40ms; --stagger-sm: 70ms; /* card grids */ --stagger-md: 110ms; /* diagram node cascade */ --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1); /* reveals */ --ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1); /* hover lifts */ --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1); /* tab cross-fade */ --ease-standard: cubic-bezier(0.40, 0, 0.20, 1); /* generic UI */ --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);/* chips, knob */ --ease-linear: linear; /* packets, bar */ /* Reveal geometry — one source of truth for motion.js + motion.css */ --reveal-y: 14px; --reveal-blur: 0px; /* deliberately 0: no filter animation, GPU-cheap */ /* ========================================================================== 8. Z-INDEX LAYERS ========================================================================== */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; /* .site-header */ --z-progress: 110; /* #read-progress rides above the header fill */ --z-dropdown: 200; /* mobile nav panel */ --z-overlay: 300; /* scrim */ --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ============================================================================ LIGHT THEME — a separate set, not an inversion. ELECTRIC CYAN ON WHITE IS THE VALUE THAT FAILS. #22D3EE on #FFFFFF is 1.81:1 — it fails even the 3:1 graphics floor. So the light theme carries THREE cyans: --c-accent-solid #22D3EE fill only, never text (dark ink sits on it) --c-accent #0E7C8C graphics + any text (4.91:1 ✓) --c-accent-ink #0A616E the text tier, small copy (7.13:1 ✓) Violet moves the same way: #8B5CF6 is 3.19:1 on white, so light uses #7C3AED for graphics and #5B21B6 for text. Surfaces keep a faint cool cast (#F4F5F8 rather than pure white) so the page still reads as the same product, not as a bleached inversion. ========================================================================== */ [data-theme="light"] { color-scheme: light; /* --- Base surfaces — cool paper ------------------------------------------ */ --c-bg: #F4F5F8; --c-surface: #FAFBFD; --c-surface-raised: #FFFFFF; --c-surface-sunken: #E7E9F0; /* --- Borders — same hueless technique, ink instead of white -------------- */ --c-border: rgb(11 13 20 / 0.10); /* decorative */ --c-border-strong: rgb(11 13 20 / 0.18); /* decorative, heavier */ --c-border-interactive: #7C8296; /* 3.51:1 on bg ✓ / 3.83:1 on white ✓ */ /* --- Text ramp ----------------------------------------------------------- */ --c-text: #0B0D14; /* 17.81:1 on bg ✓ / 19.41:1 on white ✓ */ --c-text-muted: #4A5266; /* 7.16:1 on bg ✓ / 7.81:1 on white ✓ */ --c-text-faint: #636A80; /* 4.93:1 on bg ✓ / 5.38:1 on white ✓ */ --c-text-on-accent: #05161B; /* 10.22:1 on --c-accent-solid ✓ */ /* --- Accent: cyan, three tiers (see the header note) --------------------- */ --c-accent: #0E7C8C; /* 4.50:1 on bg ✓ / 4.91:1 on white ✓ graphics, borders, large + normal text. */ --c-accent-ink: #0A616E; /* 6.54:1 on bg ✓ / 7.13:1 on white ✓ */ --c-accent-solid: #22D3EE; /* FILL ONLY — 1.81:1 as text. NEVER text, NEVER a border. Dark ink sits on it. */ --c-accent-dim: #3F8E9B; /* 3.47:1 on bg ✓ / 3.78:1 on white ✓ */ --c-accent-rgb: 14 124 140; /* --- Accent 2: violet ---------------------------------------------------- */ --c-accent-2: #7C3AED; /* 5.23:1 on bg ✓ / 5.70:1 on white ✓ */ --c-accent-2-ink: #5B21B6; /* 8.24:1 on bg ✓ / 8.98:1 on white ✓ */ --c-accent-2-dim: #9270E0; /* 3.43:1 on bg ✓ / 3.74:1 on white ✓ */ --c-accent-2-rgb: 124 58 237; /* --- Status -------------------------------------------------------------- */ --c-ok: #0E8A5A; /* 4.01:1 on bg ✓ graphic / large */ --c-ok-ink: #076647; /* 6.42:1 on bg ✓ text */ --c-ok-rgb: 14 138 90; --c-warn: #B45309; /* 4.61:1 on bg ✓ */ --c-warn-ink: #8A3D06; /* 7.00:1 on bg ✓ text */ --c-warn-rgb: 180 83 9; --c-err: #C62828; /* 5.16:1 on bg ✓ */ --c-err-ink: #9B1414; /* 7.69:1 on bg ✓ text */ --c-err-rgb: 198 40 40; /* --- Tinted fills -------------------------------------------------------- */ --c-accent-wash: rgb(14 124 140 / 0.10); --c-accent-wash-hi: rgb(14 124 140 / 0.16); --c-accent-2-wash: rgb(124 58 237 / 0.09); --c-ok-wash: rgb(14 138 90 / 0.10); --c-warn-wash: rgb(180 83 9 / 0.10); --c-err-wash: rgb(198 40 40 / 0.09); --c-hover-wash: rgb(11 13 20 / 0.035); --c-scrim: rgb(11 13 20 / 0.42); /* --- Diagram palette ----------------------------------------------------- */ --dg-stage: #FFFFFF; --dg-node-fill: #F2F4F9; --dg-node-stroke: #808799; /* 3.59:1 on stage ✓ */ --dg-node-stroke-hi: var(--c-accent); /* 4.91:1 on stage ✓ */ --dg-label: var(--c-text-muted); /* 7.81:1 on stage ✓ */ --dg-label-strong: var(--c-text); --dg-line: #8A91A3; /* 3.15:1 on stage ✓ resting */ --dg-line-active: var(--c-accent); /* 4.91:1 on stage ✓ */ --dg-packet: var(--c-accent-ink); /* 7.13:1 on stage ✓ */ --dg-group-stroke: #C9CEDC; --dg-group-fill: rgb(124 58 237 / 0.05); /* --- Gradients ----------------------------------------------------------- */ --grad-neon: linear-gradient(90deg, #0A616E 0%, #0E7C8C 45%, #7C3AED 100%); --grad-neon-soft: linear-gradient(160deg, rgb(14 124 140 / 0.12) 0%, rgb(124 58 237 / 0.08) 58%, transparent 100%); --grad-hairline: linear-gradient(90deg, var(--c-border) 0%, var(--c-border) 100%); --grad-rule-neon: linear-gradient(90deg, transparent 0%, rgb(14 124 140 / 0.50) 22%, rgb(14 124 140 / 0.50) 78%, transparent 100%); --grad-surface: linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 42%); /* Both stops clear 4.5:1 on paper: #0A616E 6.54:1 ✓, #5B21B6 8.24:1 ✓ */ --grad-text-neon: linear-gradient(92deg, #0A616E 0%, #5B21B6 100%); --mesh-hero: radial-gradient(120% 62% at 50% 0%, rgb(34 211 238 / 0.16) 0%, rgb(34 211 238 / 0.07) 38%, transparent 72%), radial-gradient(70% 44% at 50% 16%, rgb(139 92 246 / 0.12) 0%, transparent 70%), radial-gradient(90% 60% at 50% 100%, rgb(244 245 248 / 0.9) 0%, transparent 68%); /* --- Elevation + light: real shadows return, glow retreats --------------- */ --shadow-1: 0 1px 2px rgb(11 13 20 / 0.06); --shadow-2: 0 6px 20px -6px rgb(11 13 20 / 0.10), 0 1px 2px rgb(11 13 20 / 0.06); --shadow-3: 0 24px 56px -16px rgb(11 13 20 / 0.16), 0 2px 8px rgb(11 13 20 / 0.06); --shadow-header: 0 1px 0 var(--c-border), 0 10px 28px -20px rgb(11 13 20 / 0.5); --glow-accent-sm: 0 0 0 1px rgb(14 124 140 / 0.35); --glow-accent-md: 0 4px 14px -6px rgb(14 124 140 / 0.35); --glow-accent-lg: 0 8px 36px -18px rgb(14 124 140 / 0.30); --glow-accent-2: 0 6px 24px -12px rgb(124 58 237 / 0.28); --glow-ok: 0 0 10px -4px rgb(14 138 90 / 0.30); --glow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.9); --glow-hero-tint: rgb(34 211 238 / 0.16); --glow-btn-tint: rgb(255 255 255 / 0.55); --focus-ring-color: var(--c-accent-2-ink); /* 8.24:1 on bg ✓ */ --focus-ring-halo: 0 0 0 5px rgb(255 255 255 / 0.95), 0 0 0 6px rgb(91 33 182 / 0.20); } /* ============================================================================ REDUCED MOTION — collapse the duration tokens themselves. base.css and motion.css already blanket transitions/animations with !important, but --dur-orbit and --dur-packet are consumed inside `animation` shorthands that a JS-inserted inline style can re-assert. Zeroing the source values is the belt to that pair of braces. Nothing here changes layout, colour or blur — a static glow is not motion and stays visible. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; --dur-count: 1ms; --dur-packet: 1ms; --dur-orbit: 1ms; --stagger-xs: 0ms; --stagger-sm: 0ms; --stagger-md: 0ms; --reveal-y: 0px; } }