/* ========================================================================== SACRVM APPKIT — global stylesheet Tokens, element baseline, CSS patterns and page layouts in one file. THEMING MODEL — seeds in, everything else derived: A theme is (a) a handful of SEED colors and (b) a light-or-dark flag. Every other color in the kit is DERIVED from the seeds via color-mix(), so swapping seeds (or flipping the flag) re-themes every component and pattern at once. Components never use raw colors — seeds and derived tokens only. - Dark is the default (:root). Its seed values are the kit's proven production palette. - Light mode: — swaps the neutral seeds and the few direction-dependent derivations. Nothing else changes. - Custom theme: override seeds after this file loads. Example: :root { --accent: #10b981; } (per-app accent) :root[data-theme="light"] { --bg: #fdf6ec; } (custom light ground) This file is REQUIRED by every kit component. Components reference the tokens without fallback values on purpose: a missing ui.css should fail loudly (unstyled), not silently drift (var() fallbacks rot). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts — self-hosted (OFL 1.1), latin + latin-ext subsets. Inter 400/500/600 (body/UI), Outfit 600/700/800 (display/headlines). Anything outside the unicode-ranges falls back to the system sans stack. -------------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('../fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('../fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 2. SEEDS — the whole theme is these values + the light/dark flag. -------------------------------------------------------------------------- */ :root { /* Native chrome (select popups, date pickers, autofill, scrollbars) follows the app's scheme. Flipped by [data-theme="light"]. */ color-scheme: dark; /* Neutral seeds — shared-hue slate family (bg/panel/glass sharing one hue makes a raised surface read as raised, not foreign). */ --bg: #0b0f1a; /* page ground */ --fg: #f8fafc; /* foreground: text, borders, hover washes */ --surface: #1e293b; /* the glassmorphic material (tiles, windows) */ /* Semantic seeds. --accent is THE per-app override point (one variable re-themes a whole app). The other four encode state, separate from brand identity. */ --accent: #3b82f6; /* app identity / primary actions */ --accent-edit: #a855f7; /* edit modes */ --accent-warm: #f97316; /* shared/unsaved/attention state */ --danger: #ef4444; /* destructive / overdue */ --ok: #22c55e; /* success */ --on-accent: #ffffff; /* ink on accent/edit/danger FILLS; warm + ok take the dark inks --on-warm/--on-ok instead (see the AA layer in the derived block) */ /* Direction poles for derivation: surfaces "lift" toward --lift when raised; shadows and sunken fields mix toward --sink. */ --lift: #ffffff; --sink: #000000; /* Viewport ground (canvas areas) — black in every theme by convention; override per app if a light viewport is wanted. */ --viewport-bg: #000000; /* Data palette — 10 named slots for user-colored things (chips, labels, series). Persisted data stores the slot NAME, not a hex, so a re-theme never rewrites stored records. Not derived: it IS data. */ --palette-blue: #3b82f6; --palette-orange: #f97316; --palette-red: #ef4444; --palette-green: #10b981; --palette-purple: #8b5cf6; --palette-pink: #ec4899; --palette-yellow: #eab308; --palette-teal: #14b8a6; --palette-gray: #64748b; --palette-indigo: #6366f1; /* Motion rails — use these instead of ad-hoc cubic-beziers so all views stay in one motion language. */ --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-swift: cubic-bezier(0.77, 0, 0.175, 1); /* panel slides */ /* Shape scale — one radius per element class; identical in every theme (never redeclared in a [data-theme] block). Override the three vars to resharpen or soften the whole kit at once. */ --radius-s: 2px; /* mini elements: strips, tracks, tiny thumbs, inner wells */ --radius-m: 4px; /* controls: buttons, inputs, chips, menu items, tabs */ --radius-l: 6px; /* surfaces: panels, cards, tiles, windows, dialogs, popovers, toasts */ } /* -------------------------------------------------------------------------- 3. DERIVED TOKENS — never set these in a theme; override a seed instead. (The cascade still lets a brand pin an individual derived token if it truly must — that is the escape hatch, not the mechanism.) Also derived ON the per-app hosts, not only on :root. An app that carries its own --accent would otherwise get half a retheme: direct var(--accent) users follow it, while everything derived still resolves against the root's accent — custom properties are substituted where they are DECLARED, so a derivation living only on :root has the root's seed baked in. .sac-app is set by sac.app.Element on every app element, so an app is an accent scope wherever it runs — on a desktop's stage, in a window, or alone in its own page. .sac-app-view and sac-window cover apps that implement the contract by hand. -------------------------------------------------------------------------- */ :root, .sac-app, .sac-app-view, sac-window { /* Surfaces */ --panel: color-mix(in srgb, var(--bg) 95%, var(--lift)); /* sidebars, cards */ --panel-2: color-mix(in srgb, var(--bg) 90%, var(--lift)); /* elevated panel */ --glass-hue: color-mix(in srgb, var(--surface) 45%, var(--bg)); /* internal carrier */ --glass: color-mix(in srgb, var(--glass-hue) 70%, transparent); /* windows, overlays */ --glass-strong:color-mix(in srgb, var(--glass-hue) 88%, transparent); /* menus, nav ribbon */ --tile: color-mix(in srgb, var(--surface) 70%, transparent); /* launcher tiles */ --tile-hover: color-mix(in srgb, var(--surface) 90%, transparent); --field: color-mix(in srgb, var(--sink) 30%, transparent); /* input/select bg */ /* Text — two-step secondary: --text-muted carries real secondary information (AA on every plane); --text-dim is strictly tertiary, never the only carrier of information, and holds 3:1 on --surface — the worst-case (lightest) plane — in both themes at this ratio. */ --text: var(--fg); --text-muted: color-mix(in srgb, var(--fg) 62%, var(--bg)); --text-dim: color-mix(in srgb, var(--fg) 43%, var(--bg)); /* Lines + washes */ --border: color-mix(in srgb, var(--fg) 8%, transparent); --border-strong: color-mix(in srgb, var(--fg) 16%, transparent); --hover: color-mix(in srgb, var(--fg) 8%, transparent); /* hover wash */ --hover-strong: color-mix(in srgb, var(--fg) 14%, transparent); /* active/press wash */ /* Accent derivations — follow --accent automatically, so the per-app accent override re-themes these too. */ --accent-strong: color-mix(in oklab, var(--accent) 82%, var(--sink)); /* hover of primary */ --accent-tint: color-mix(in srgb, var(--accent) 16%, transparent); /* active-item bg */ --accent-glow: color-mix(in srgb, var(--accent) 30%, transparent); /* glows, shadows */ /* AA layer — a state color has two jobs at two contrast bars, and one lightness cannot serve both: identity (rings, borders, icons — 3:1) stays the seed itself; a plane that CARRIES TEXT needs 4.5:1 with its ink. Every ratio below is solved against the default seeds and the worst-case plane; a brand pouring in very different seeds re-checks (or pins) these. Warm + ok keep the seed as fill — white can never reach 4.5:1 on those hues (a property of the hue, not a calibration issue) — and take a dark ink instead. */ --accent-fill: color-mix(in oklab, var(--accent) 91%, var(--sink)); --accent-edit-fill: color-mix(in oklab, var(--accent-edit) 93%, var(--sink)); --danger-fill: color-mix(in oklab, var(--danger) 91%, var(--sink)); --accent-warm-fill: var(--accent-warm); --ok-fill: var(--ok); --on-edit: var(--on-accent); --on-danger: var(--on-accent); --on-warm: color-mix(in srgb, var(--sink) 68%, var(--accent-warm)); --on-ok: color-mix(in srgb, var(--sink) 63%, var(--ok)); /* The same state colors, readable as TEXT on this theme's ground — solved against --surface, the lightest plane in dark. The light block re-solves these toward --sink. */ --accent-text: color-mix(in oklab, var(--accent) 90%, var(--lift)); --accent-edit-text: color-mix(in oklab, var(--accent-edit) 86%, var(--lift)); --accent-warm-text: var(--accent-warm); /* passes on dark as-is */ --danger-text: color-mix(in oklab, var(--danger) 89%, var(--lift)); --ok-text: var(--ok); /* passes on dark as-is */ /* Elevation */ --shadow-1: 0 2px 8px color-mix(in srgb, var(--sink) 35%, transparent); --shadow-2: 0 8px 24px color-mix(in srgb, var(--sink) 45%, transparent); /* Scrollbar parts (also duplicated inside scrollable Shadow DOM — the global rules below do not pierce shadow roots). */ --scrollbar-thumb: color-mix(in srgb, var(--fg) 18%, transparent); --scrollbar-thumb-hover: color-mix(in srgb, var(--fg) 32%, transparent); } /* -------------------------------------------------------------------------- 4. LIGHT FLAG — swaps neutral seeds + the few direction-dependent derivations. Semantic seeds and the palette stay (they read fine on light ground); override them per brand if needed. -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #eef2f7; --fg: #0f172a; --surface: #ffffff; /* Raised surfaces still lift toward white on light ground (material convention); shadows still sink toward black — poles stay. */ /* Direction-dependent re-derivations (same seeds, different ratios): */ --field: color-mix(in srgb, var(--sink) 5%, transparent); --shadow-1: 0 2px 8px color-mix(in srgb, var(--sink) 12%, transparent); --shadow-2: 0 8px 24px color-mix(in srgb, var(--sink) 18%, transparent); --glass: color-mix(in srgb, var(--glass-hue) 78%, transparent); --glass-strong: color-mix(in srgb, var(--glass-hue) 92%, transparent); /* Elevation must step PERCEPTIBLY toward white here — the dark ratios (95/90% of an already almost-white bg) leave no visible lift (measured: dL 0.002 per step, far below perceptibility). */ --panel: color-mix(in srgb, var(--bg) 62%, var(--lift)); --panel-2: color-mix(in srgb, var(--bg) 30%, var(--lift)); /* State-as-text re-solved for a white worst-case plane. */ --accent-text: color-mix(in oklab, var(--accent) 91%, var(--sink)); --accent-edit-text: color-mix(in oklab, var(--accent-edit) 93%, var(--sink)); --accent-warm-text: color-mix(in oklab, var(--accent-warm) 81%, var(--sink)); --danger-text: color-mix(in oklab, var(--danger) 91%, var(--sink)); --ok-text: color-mix(in oklab, var(--ok) 75%, var(--sink)); } /* `data-theme="auto"` follows the OS instead of an explicit choice — same declarations as the light block above, gated behind prefers-color-scheme. Keep this block in sync with the light block above. */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { color-scheme: light; --bg: #eef2f7; --fg: #0f172a; --surface: #ffffff; --field: color-mix(in srgb, var(--sink) 5%, transparent); --shadow-1: 0 2px 8px color-mix(in srgb, var(--sink) 12%, transparent); --shadow-2: 0 8px 24px color-mix(in srgb, var(--sink) 18%, transparent); --glass: color-mix(in srgb, var(--glass-hue) 78%, transparent); --glass-strong: color-mix(in srgb, var(--glass-hue) 92%, transparent); --panel: color-mix(in srgb, var(--bg) 62%, var(--lift)); --panel-2: color-mix(in srgb, var(--bg) 30%, var(--lift)); --accent-text: color-mix(in oklab, var(--accent) 91%, var(--sink)); --accent-edit-text: color-mix(in oklab, var(--accent-edit) 93%, var(--sink)); --accent-warm-text: color-mix(in oklab, var(--accent-warm) 81%, var(--sink)); --danger-text: color-mix(in oklab, var(--danger) 91%, var(--sink)); --ok-text: color-mix(in oklab, var(--ok) 75%, var(--sink)); } } /* -------------------------------------------------------------------------- 5. Scrollbars — global. NOTE: `*` does NOT pierce Shadow DOM; components with scrollable shadow content must duplicate these rules inside. -------------------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); background-clip: content-box; border: 2px solid transparent; border-radius: var(--radius-s); } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; } *::-webkit-scrollbar-corner { background: transparent; } /* -------------------------------------------------------------------------- 6. Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; font-weight: 700; letter-spacing: -0.02em; margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Block-level link cards are buttons in spirit — hover-underlining their whole text body reads as a rendering glitch. (0,2,0) outweighs (0,1,1). */ .tile:hover { text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* -------------------------------------------------------------------------- 7. Form baseline -------------------------------------------------------------------------- */ label { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; font-weight: 700; letter-spacing: 0.05em; } input, textarea { font-family: inherit; color: var(--text); background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 0.6rem; width: 100%; transition: border-color 0.2s ease, background 0.2s ease; } input:hover:not(:disabled) { border-color: var(--border-strong); } input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent); } /* Hide native number spinners */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Selection is re-enabled where text entry happens (workspace pages set user-select:none on body). */ input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; } /*