/* ============================================================================ BeyondMDX Console — design tokens THE single source of truth for color, type, spacing and BREAKPOINTS. Nothing in console/ may declare its own breakpoint or re-declare a token. ============================================================================ */ /* ── BREAKPOINTS ──────────────────────────────────────────────────────────── Only TWO exist. They were chosen so that NO real device width sits near an edge — the bug we are fixing is admin.css carrying max-width:767px AND max-width:768px, a seam that lands inside the iPad Mini's 744-768pt range, letting one device get phone layout from one rule and tablet from another. phone < 600px real widths: 360 / 375 / 393 / 430 (nearest edge 170px away) tablet >= 600px real widths: 744 / 834 / 1024 / 1194 desktop >= 1240px real widths: 1280+ 1240 (not 1024) because 1024 is EXACTLY iPad Pro 12.9" portrait. Every iPad is a tablet; only Macs and PCs are desktop. ⚠️ JS MUST NEVER HARD-CODE THESE NUMBERS. maps.html already carries a comment warning that its JS copies a media query "character for character. If they drift, the JS..." — so instead the active tier is published below as --bp-name, and core/session.js reads it back out of computed style. There is exactly one copy of each number, and it is in this file. */ :root { --bp-name: "phone"; } @media (min-width: 600px) { :root { --bp-name: "tablet"; } } @media (min-width: 1240px) { :root { --bp-name: "desktop"; } } /* ── THEME ────────────────────────────────────────────────────────────────── Two themes, one set of names. Every colour in the Console is a token declared twice below and NOWHERE else — a literal colour in a page is a bug, because it will be wrong in one of the two themes. `data-theme` on is always an explicit "light" or "dark", resolved by the inline script in index.html before first paint (so there is no flash) and kept in step by core/theme.js. "Auto" is a stored PREFERENCE, never a value that reaches the DOM. */ :root { color-scheme: dark; /* ── Surfaces (dark: the front door, continuous with sign-in) */ /* ⚠️ The GROUND stays deep — that part was right. What was wrong is that everything ON it sat at 4.5% white over a near-black page, so a card, the page behind it and the card below it were all within a couple of steps of each other and the whole screen read as one dark sheet (user, 2026-08-30). Surfaces and lines are lifted; --bg-deep is untouched, so the app is exactly as dark as before and only the separation changed. Translucent, not opaque, on purpose: the page carries a gradient that is far lighter at the top, and an opaque panel would go DARKER than the page there. */ --bg-deep: #06090d; --bg-grad: radial-gradient(120% 85% at 50% -18%, #223041 0%, #131b25 42%, #0a0f16 68%, #06090d 100%); --surface: rgba(255, 255, 255, 0.075); --surface-2: rgba(255, 255, 255, 0.115); --surface-3: rgba(255, 255, 255, 0.17); --line: rgba(255, 255, 255, 0.14); --line-2: rgba(255, 255, 255, 0.24); --bar-bg: rgba(8, 12, 18, 0.72); --menu-bg: #161f2c; --shadow-lg: 0 40px 80px -28px rgba(0, 0, 0, 0.75); --shadow-md: 0 24px 60px -18px rgba(0, 0, 0, 0.8); --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07); /* ── Ink */ --ink: #eef2f6; --ink-2: #dfe6ee; --muted: #93a1af; --muted-2: rgba(147, 161, 175, 0.55); /* ── Accent */ --accent: #7aa5d2; --accent-dim: rgba(122, 165, 210, 0.16); --danger: #e2695f; /* A FILLED accent needs a deeper blue than the text accent: white on #7aa5d2 is ~2.3:1, so a white switch knob would blur into its own track. */ --accent-solid: #3f7fbf; --on-accent: #ffffff; /* ── The mountain ridge. Three layers, far to near. */ --ridge-1: #8ea3ba; --ridge-1-o: 0.07; --ridge-2: #48596e; --ridge-2-o: 0.20; --ridge-3: #070b11; --ridge-3-o: 0.92; /* The wordmark exists as white line art only; on dark it is used as-is. */ --mark-filter: none; /* Segmented control. Its OWN tokens, not --surface reused: on a light menu --surface and --surface-3 both resolve to near-white, so the selected segment vanished into its track. A selection must be unmistakable. */ --seg-track: rgba(255, 255, 255, 0.05); --seg-active: rgba(255, 255, 255, 0.20); --seg-active-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); /* ⚠️ Form fields need an OPAQUE background. A native