/* Shared base for the gleblug.space apps — the identical light/dark palette, reset, and common entrance/loading keyframes. The theme is driven by the data-theme attribute on (toggled by /common/theme.js); the palette below is the single source of truth for all three apps. Load AFTER /common/fonts.css and BEFORE the app's own /public/style.css (which adds app-specific layout; apps may define extra tokens in their own :root). */ :root { --bg:#fffcf2; --ink:#252422; --muted:#403d39; --line:rgba(64,61,57,.12); --card2:#ffffff; --accent:#eb5e28; --surf:rgba(64,61,57,.04); --tg:0; /* Semantic colours — same value in both themes (mid-lightness reads on both backgrounds). Apps must use these, not scattered oklch/hex red/green literals. */ --danger:oklch(.64 .21 25); --danger-hover:oklch(.56 .22 25); --success:oklch(.64 .16 150); --success-hover:oklch(.56 .17 150); } :root[data-theme="dark"] { --bg:#131218; --ink:#f6f3ec; --muted:rgba(246,243,236,.55); --line:rgba(246,243,236,.13); --card2:#1b1a22; --surf:rgba(246,243,236,.06); --tg:1; } * { box-sizing:border-box; } /* Paint the right background before even exists — the first frame of a cross-app navigation lands on the same colour the previous app left on, no flash. */ html { background:var(--bg); } body { margin:0; background:var(--bg); color:var(--ink); font-family:"Bricolage Grotesque",system-ui,sans-serif; -webkit-font-smoothing:antialiased; transition:background .55s ease,color .55s ease; } a { -webkit-tap-highlight-color:transparent; } input { font-family:inherit; } /* Visible keyboard-focus indicator for every control (mouse focus stays quiet). Apps that set outline:none on an input must not clobber this — prefer styling :focus-visible or scoping outline:none to :focus:not(:focus-visible). */ :focus-visible { outline:2px solid var(--accent); outline-offset:2px; } @keyframes fade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } @keyframes rowin { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } @keyframes spin { to{transform:rotate(360deg)} } @keyframes toastin { from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:none} } @keyframes pulsedot { 0%,100%{opacity:.35} 50%{opacity:1} } /* Respect reduced-motion: neutralise entrance animations + the theme crossfade. JS-driven motion (e.g. homepage card tilt) must guard on matchMedia separately. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }