/* HAWKES Studio shared design system (L11 easy/advanced UI). * * The single source of truth for the studio's design tokens, state mixins and * a11y utilities. Every *_page.html already defines its own :root vars with the * SAME names (--bg/--panel/--line/--ink/--mut/--acc/--ok/--bad/--warn); this * file documents the canonical palette and adds the cross-page utilities the * pages referenced but never had a home for: empty/loading/success states, * .advanced-only / .easy-only mode markers, and the sr-only / focus-visible a11y * helpers. Served at /design-system.css; pages may it, but the mode * contract itself is also injected with the global nav so it works everywhere * without a per-page edit. * * See docs/DESIGN_SYSTEM.md for the token reference and docs/EASY_ADVANCED_UI.md * for the mode contract. */ :root { /* ── color tokens ─────────────────────────────────────────────── */ --bg: #0d1017; /* app background */ --panel: #151a24; /* card / header panel */ --line: #232b3a; /* hairline border */ --ink: #dce3ee; /* primary text */ --mut: #7d8aa3; /* muted / secondary */ --acc: #2a64d8; /* accent / primary CTA*/ --ok: #5fe08a; /* success */ --bad: #e06b6b; /* error / danger */ --warn: #d8b24a; /* warning */ --link: #5fb6e0; /* hyperlink */ /* ── spacing scale (4px base) ─────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; /* ── type ramp ────────────────────────────────────────────────── */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-lg: 18px; --fs-xl: 24px; --font-ui: system-ui, "Segoe UI", Roboto, sans-serif; /* ── radii ────────────────────────────────────────────────────── */ --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-pill: 20px; } /* ── easy / advanced mode contract ────────────────────────────────── * When , every .advanced-only element is hidden — * the one rule that collapses the full app into the simple surface. The * reverse marker (.easy-only) shows only in easy mode. This same pair is * injected with the global nav so it is live on every page. */ html[data-mode="easy"] .advanced-only { display: none !important; } html[data-mode="advanced"] .easy-only { display: none !important; } /* ── empty state ─────────────────────────────────────────────────── */ .empty-state { padding: var(--sp-6); text-align: center; color: var(--mut); border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--panel); } .empty-state h4 { margin: 0 0 var(--sp-2); color: var(--ink); font-size: var(--fs-base); } /* ── loading / skeleton state ────────────────────────────────────── */ @keyframes ui-skel { 0% { opacity: .4 } 50% { opacity: .9 } 100% { opacity: .4 } } .skeleton { background: var(--panel); border-radius: var(--r-sm); min-height: 14px; animation: ui-skel 1.1s ease-in-out infinite; } .skeleton-row { height: 14px; margin: var(--sp-2) 0; } /* ── success / toast state ───────────────────────────────────────── */ .toast { position: fixed; bottom: var(--sp-4); left: var(--sp-4); z-index: 60; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: #15351f; color: var(--ok); font: var(--fs-base) var(--font-ui); box-shadow: 0 6px 24px rgba(0, 0, 0, .4); } .banner.ok { background: #15351f; color: var(--ok); } .banner.bad { background: #3a1515; color: var(--bad); } .banner.warn { background: #2a2410; color: var(--warn); } /* ── a11y utilities ──────────────────────────────────────────────── */ /* visually hidden but available to screen readers */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* a visible, consistent keyboard focus ring on every interactive element */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } /* ── responsive: stack to a single column on narrow viewports ────── */ @media (max-width: 760px) { .grid { grid-template-columns: 1fr !important; } .row { flex-wrap: wrap; } main { padding: var(--sp-3) !important; } }