]
*
* ⚠️ Intentional visual deltas from 0.8.4 (aurora-nocturne):
* --frm-bg #070913 → #0C1220 (lighter workbench floor)
* --frm-text-3 #9AA8BC → #93A2B8 (AA contrast)
* --frm-surface-inverse #050711 → #F4F7FB (paper-on-dark)
* ⚠️ aurora-day accent shifts from indigo #6366F1 to sky-day #0284C7
* to align light theme with the sky-first ecosystem accent.
* Primary ramps (--frm-primary-50…900) are untouched.
*/
/* ============================================================================
UI 2.0 · A1 — Onest display font (self-host, scoped). Vendored woff2 subsets
(cyrillic[-ext] + latin[-ext]) for 700/800, used via --frm-font-display on
site/template surfaces only. SIL OFL 1.1. Preload the above-the-fold weights
on the public site. woff2-only (all target browsers support it).
============================================================================ */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./fonts/onest-cyrillic-700-normal.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./fonts/onest-cyrillic-ext-700-normal.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./fonts/onest-latin-700-normal.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: 'Onest';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./fonts/onest-latin-ext-700-normal.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: 'Onest';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('./fonts/onest-cyrillic-800-normal.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('./fonts/onest-cyrillic-ext-800-normal.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('./fonts/onest-latin-800-normal.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: 'Onest';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('./fonts/onest-latin-ext-800-normal.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;
}
/* ============================================================================
Shared tokens (:root)
── spacing scale (NEW in 0.8.5-beta), radii, typography, motion, z,
density knob, fallback accent before theme applies.
============================================================================ */
:root {
/* ── Typography ──────────────────────────────────────────────────── */
--frm-font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--frm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Aurora 1.0 spec — size table matches this scale exactly (audited
2026-07-07). Do not drift without owner sign-off; MetricStrip,
StatCard, Callout and page-level typography all rely on the
numeric progression 12/13/15/18/22/28/36/48. */
--frm-text-xs: 12px;
--frm-text-sm: 13px;
--frm-text-base: 15px;
--frm-text-lg: 18px;
--frm-text-xl: 22px;
--frm-text-2xl: 28px;
--frm-text-3xl: 36px;
--frm-display: 48px;
/* Aurora 1.0 · Phase 1.1.0 — per-size line-height tokens, matching
the spec table (xs 1.5 · sm 1.55 · base 1.62 · lg 1.5 · xl 1.35 ·
2xl 1.2 · 3xl 1.1 · display 1.02). Consumers can pair size + LH
directly: `font-size: var(--frm-text-xl); line-height:
var(--frm-leading-xl);`. Legacy semantic aliases `tight` /
`normal` / `relaxed` below are preserved for back-compat. */
--frm-leading-xs: 1.5;
--frm-leading-sm: 1.55;
--frm-leading-base: 1.62;
--frm-leading-lg: 1.5;
--frm-leading-xl: 1.35;
--frm-leading-2xl: 1.2;
--frm-leading-3xl: 1.1;
--frm-leading-display: 1.02;
--frm-leading-tight: 1.15;
--frm-leading-normal: 1.5;
--frm-leading-relaxed: 1.62;
/* ── Spacing scale (NEW in 0.8.5-beta) ───────────────────────────── */
--frm-space-1: 4px;
--frm-space-2: 8px;
--frm-space-3: 12px;
--frm-space-4: 16px;
--frm-space-5: 20px;
--frm-space-6: 24px;
--frm-space-8: 32px;
--frm-space-10: 40px;
--frm-space-12: 48px;
--frm-space-16: 64px;
/* ── Radii ───────────────────────────────────────────────────────── */
--frm-radius-sm: 6px;
--frm-radius-md: 8px;
--frm-radius-lg: 10px;
--frm-radius-xl: 12px;
--frm-radius-2xl: 16px;
--frm-radius-pill: 999px;
/* ── Density knob (compact → 0.8) ────────────────────────────────── */
/* Aurora 1.0 · Phase 1.1.0 — `AppShell density="compact"` writes
`data-frm-density="compact"` on the shell root, which flips this
multiplier to 0.8. Consumer CSS can multiply any spacing token via
`calc(var(--frm-space-4) * var(--frm-density))` to scale down
alongside the built-in components. */
--frm-density: 1;
/* ── Motion ──────────────────────────────────────────────────────── */
--frm-motion-fast: 120ms;
--frm-motion-base: 200ms;
--frm-motion-slow: 320ms;
/* Aurora 1.0 · Phase 1.1.0 — infinite spinner rotation period
(Button loading, RefreshButton). Reduced-motion block below
collapses it to 0ms and neutralises the animation. */
--frm-motion-spin: 800ms;
--frm-easing-standard: cubic-bezier(0.2, 0, 0, 1);
/* ── z-index ─────────────────────────────────────────────────────── */
--frm-z-topbar: 100;
--frm-z-sidepanel: 50;
--frm-z-modal: 200;
--frm-z-toast: 300;
--frm-z-tooltip: 350;
/* ── Fallback accent + ring before theme applies (sky-day) ───────── */
--frm-accent: #0284C7;
--frm-accent-2: #4F46E5;
--frm-ring: rgba(2, 132, 199, 0.50);
--frm-focus-ring: var(--frm-ring);
/* TableFilterBar responsive-grid defaults. Consumers can override these
tokens globally; per-bar `layout` props take precedence. */
--frm-table-filter-field-min: 156px;
--frm-table-filter-search-min: 220px;
/* Aurora 1.3 fallback tokens; concrete theme values are below. */
--frm-workbench-bg-flat: var(--frm-bg);
--frm-workbench-bg-aurora: var(--frm-bg);
--frm-workbench-bg-grid: var(--frm-bg);
--frm-surface-panel-rim: var(--frm-line);
--frm-surface-panel-highlight: inset 0 0 0 rgba(255, 255, 255, 0);
--frm-surface-panel-glow: 0 0 0 rgba(0, 0, 0, 0);
--frm-workbench-panel-accent-rim: var(--frm-accent);
}
/* ============================================================================
THEME · aurora-day (light, canonical)
:root also folds the day palette so unthemed consumers keep working.
── aurora-day accent is sky-day #0284C7 (INTENTIONAL delta from 0.8.4 indigo).
── Primary ramps stay indigo/violet (untouched); consumed by .frm-prose a
and internal component states, decoupled from the theme accent by design.
── Legacy `aurora-light` selector removed in 1.0.0 — consumers must use the
canonical `aurora-day` name (see docs/migration-1.0.md).
============================================================================ */
:root,
[data-frm-theme="aurora-day"] {
color-scheme: light;
/* ── Brand / primary ramp (unchanged) ────────────────────────────── */
--frm-primary-50: #EEF0FF;
--frm-primary-100: #E0E3FF;
--frm-primary-200: #C4CAFF;
--frm-primary-300: #A5ADFF;
--frm-primary-400: #818CF8;
--frm-primary-500: #6366F1; /* base brand indigo */
--frm-primary-600: #4F46E5;
--frm-primary-700: #4338CA;
--frm-primary-800: #3730A3;
--frm-primary-900: #312E81;
--frm-accent-violet: #8B5CF6;
--frm-accent-aurora-from: #0284C7; /* was #6366F1 — day accent flows into gradient */
--frm-accent-aurora-to: #4F46E5;
/* ── Semantic theme contract (aurora-day palette) ────────────────── */
--frm-bg: #F4F7FB;
--frm-surface: #FFFFFF;
--frm-surface-2: #EEF2F8;
--frm-surface-muted: #E7ECF3;
--frm-surface-raised: #FFFFFF;
--frm-surface-inverse: #0C1220;
/*
* Aurora 1.0 · widget/background separation.
* Surface/Panel and workbench widgets use these composite fills so
* cards keep a visible edge on top of the grid/radial page backdrop.
* HC overrides them to flat fills below.
*/
--frm-surface-panel:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 242, 248, 0.98)),
var(--frm-surface);
--frm-surface-panel-subtle:
linear-gradient(180deg, rgba(248, 250, 252, 0.90), rgba(238, 242, 248, 0.98)),
var(--frm-surface-2);
--frm-surface-panel-raised:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.98)),
var(--frm-surface-raised);
--frm-surface-panel-shadow:
0 14px 36px rgba(15, 23, 42, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
--frm-surface-panel-rim: rgba(15, 23, 42, 0.12);
--frm-surface-panel-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.70);
--frm-surface-panel-glow: 0 0 0 rgba(2, 132, 199, 0);
--frm-workbench-bg: var(--frm-bg);
/*
* Aurora 1.3 — default workbench backdrop removes the 46px grid
* from the default floor. The old grid remains available as the
* explicit `AppShell backdrop="grid"` preset through
* `--frm-workbench-bg-grid`.
*/
--frm-workbench-bg-flat: var(--frm-bg);
--frm-workbench-bg-aurora:
radial-gradient(1200px 640px at 80% -8%, rgba(2, 132, 199, 0.08), transparent 58%),
radial-gradient(1000px 560px at 8% 2%, rgba(79, 70, 229, 0.05), transparent 60%),
var(--frm-bg);
--frm-workbench-bg-grid:
radial-gradient(circle at 18% -8%, rgba(2, 132, 199, 0.10), transparent 28%),
radial-gradient(circle at 82% 4%, rgba(99, 102, 241, 0.08), transparent 30%),
linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px) 0 0 / 46px 46px,
linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px) 0 0 / 46px 46px,
var(--frm-bg);
--frm-workbench-bg-radial: var(--frm-workbench-bg-aurora);
--frm-workbench-panel: var(--frm-surface-panel);
--frm-workbench-panel-2: var(--frm-surface-panel-subtle);
--frm-workbench-panel-raised: var(--frm-surface-panel-raised);
--frm-workbench-well: #F8FAFC;
--frm-workbench-well-2: #F1F5F9;
--frm-workbench-panel-accent:
linear-gradient(135deg, rgba(2, 132, 199, 0.14), rgba(99, 102, 241, 0.10)),
var(--frm-surface-panel);
--frm-workbench-panel-danger:
linear-gradient(135deg, rgba(225, 29, 72, 0.08), rgba(217, 119, 6, 0.06)),
var(--frm-surface-panel);
--frm-workbench-panel-accent-rim:
linear-gradient(135deg, var(--frm-accent), var(--frm-accent-2) 40%, transparent 72%);
--frm-workbench-line: var(--frm-line);
--frm-workbench-line-accent: var(--frm-accent-line);
--frm-line: rgba(15, 23, 42, 0.10);
--frm-line-subtle: rgba(15, 23, 42, 0.06);
--frm-line-strong: rgba(15, 23, 42, 0.18);
--frm-text: #0C1220;
--frm-text-2: #3B455C;
--frm-text-3: #64748B;
--frm-text-muted-2: #8A8EA0;
--frm-text-inverse: #FFFFFF;
--frm-text-on-accent: #FFFFFF;
/* ── Accent (INTENTIONAL delta — sky-day, aligns with sky-first ecosystem) */
--frm-accent: #0284C7;
--frm-accent-2: #4F46E5;
--frm-accent-soft: rgba(2, 132, 199, 0.10);
--frm-accent-line: rgba(2, 132, 199, 0.28);
--frm-ring: rgba(2, 132, 199, 0.50);
--frm-focus-ring: var(--frm-ring);
--frm-success: #059669;
--frm-warning: #D97706;
--frm-danger: #E11D48;
--frm-info: #0284C7;
--frm-unknown: #64748B;
--frm-success-soft: rgba(5, 150, 105, 0.10);
--frm-warning-soft: rgba(217, 119, 6, 0.12);
--frm-danger-soft: rgba(225, 29, 72, 0.10);
--frm-info-soft: rgba(2, 132, 199, 0.10);
--frm-unknown-soft: rgba(100, 116, 139, 0.12);
/* ── UI 2.0 site-layer (A1): CTA + evidence + display font ────────────
Site/marketing surfaces only — NOT a new theme. Rule accent != cta: one
bright CTA per screen; links/icons/badges use the muted --frm-site-accent.
Evidence reuses status tokens (no new colours). Onest is the display face,
self-hosted via the woff2 @font-face at the top of this file (scoped to
site/template surfaces); Manrope stays the fallback. */
--frm-cta: #0369A1;
--frm-cta-2: #4F46E5;
--frm-on-cta: #FFFFFF;
--frm-site-accent: #475569;
--frm-evidence-active: var(--frm-success);
--frm-evidence-weak: var(--frm-warning);
--frm-evidence-none: var(--frm-unknown);
--frm-font-display: 'Onest', 'Manrope', system-ui, -apple-system, sans-serif;
/* ── Surface aliases (0.8.4 compat) ──────────────────────────────── */
--frm-bg-page: var(--frm-bg);
--frm-bg-surface: var(--frm-surface);
--frm-bg-subtle: var(--frm-surface-2);
--frm-bg-muted: var(--frm-surface-muted);
--frm-bg-inverse: var(--frm-surface-inverse);
--frm-topbar-bg:
linear-gradient(180deg, rgba(29, 38, 61, 0.92), rgba(12, 18, 32, 0.98)),
var(--frm-bg);
/* ── Text aliases (0.8.4 compat) ─────────────────────────────────── */
--frm-text-primary: var(--frm-text);
--frm-text-secondary: var(--frm-text-2);
--frm-text-tertiary: var(--frm-text-3);
--frm-text-muted: var(--frm-text-muted-2);
--frm-text-on-dark: var(--frm-text-inverse);
--frm-text-on-brand: var(--frm-text-on-accent);
/* ── Border aliases (0.8.4 compat) ───────────────────────────────── */
--frm-border-subtle: var(--frm-line-subtle);
--frm-border-default: var(--frm-line);
--frm-border-strong: var(--frm-line-strong);
/* ── State semantics ─────────────────────────────────────────────── */
--frm-state-synced: var(--frm-success);
--frm-state-changed: var(--frm-warning);
--frm-state-added: var(--frm-info);
--frm-state-removed: var(--frm-danger);
--frm-state-no-data: var(--frm-unknown);
/* ── Elevation ───────────────────────────────────────────────────── */
--frm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
--frm-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
--frm-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
--frm-shadow-brand: 0 6px 20px rgba(2, 132, 199, 0.25);
--frm-workbench-shadow-panel: 0 12px 32px rgba(14, 15, 26, 0.08);
--frm-workbench-shadow-drawer: 0 28px 72px rgba(14, 15, 26, 0.22);
}
/* ============================================================================
THEME · aurora-nocturne (dark, canonical)
── Intentional deltas (require owner sign-off):
--frm-bg #070913 → #0C1220
--frm-text-3 #9AA8BC → #93A2B8 (AA)
--frm-surface-inverse #050711 → #F4F7FB (paper-on-dark)
── Primary ramp stays sky (unchanged); .frm-prose a etc. decoupled from accent.
── Workbench derivatives keep the sky/indigo radial pattern (retinted only where
it directly referenced the old bg), so panels remain cohesive with the accent.
── Legacy `aurora-dark-workbench` selector removed in 1.0.0 — consumers must
use the canonical `aurora-nocturne` name (see docs/migration-1.0.md).
============================================================================ */
[data-frm-theme="aurora-nocturne"] {
color-scheme: dark;
/* ── Brand / primary ramp (unchanged) ────────────────────────────── */
--frm-primary-50: #E0F7FF;
--frm-primary-100: #BAECFF;
--frm-primary-200: #7DDBFF;
--frm-primary-300: #38BDF8;
--frm-primary-400: #22AEEB;
--frm-primary-500: #0EA5E9; /* base brand sky */
--frm-primary-600: #0284C7;
--frm-primary-700: #0369A1;
--frm-primary-800: #075985;
--frm-primary-900: #0C4A6E;
--frm-accent-violet: #6366F1;
--frm-accent-aurora-from: #38BDF8;
--frm-accent-aurora-to: #6366F1;
/* ── Semantic theme contract (aurora-nocturne palette) ───────────── */
--frm-bg: #0C1220; /* Δ was #070913 */
--frm-surface: #101423;
--frm-surface-2: #151A2C;
--frm-surface-muted: #1A2136;
--frm-surface-raised: #1D263D;
--frm-surface-inverse: #F4F7FB; /* Δ was #050711 */
/*
* Aurora 1.0 · widget/background separation.
* Mirrors the AtriumCRM standalone reference: dark widgets get a
* top-to-bottom panel gradient plus an elevation glow so they do
* not merge into the workbench backdrop.
*/
--frm-surface-panel:
linear-gradient(180deg, rgba(29, 38, 61, 0.72), rgba(16, 20, 35, 0.96)),
var(--frm-surface);
--frm-surface-panel-subtle:
linear-gradient(180deg, rgba(29, 38, 61, 0.58), rgba(21, 26, 44, 0.96)),
var(--frm-surface-2);
--frm-surface-panel-raised:
linear-gradient(180deg, rgba(36, 48, 75, 0.82), rgba(29, 38, 61, 0.96)),
var(--frm-surface-raised);
--frm-surface-panel-shadow:
0 18px 55px rgba(0, 0, 0, 0.38),
0 14px 36px rgba(56, 189, 248, 0.16),
inset 0 1px 0 rgba(125, 211, 252, 0.10);
--frm-surface-panel-rim: rgba(125, 211, 252, 0.14);
--frm-surface-panel-highlight: inset 0 1px 0 rgba(125, 211, 252, 0.12);
--frm-surface-panel-glow:
0 0 0 1px rgba(56, 189, 248, 0.08),
0 18px 48px rgba(56, 189, 248, 0.10);
--frm-workbench-bg: var(--frm-bg);
/*
* Aurora 1.3 — default workbench backdrop removes the 46px grid
* from the default floor. The old grid remains available as the
* explicit `AppShell backdrop="grid"` preset through
* `--frm-workbench-bg-grid`.
*/
--frm-workbench-bg-flat: var(--frm-bg);
--frm-workbench-bg-aurora:
radial-gradient(1200px 640px at 80% -8%, rgba(56, 189, 248, 0.16), transparent 58%),
radial-gradient(1000px 560px at 8% 2%, rgba(99, 102, 241, 0.10), transparent 60%),
var(--frm-bg);
--frm-workbench-bg-grid:
radial-gradient(circle at 18% -8%, rgba(56, 189, 248, 0.12), transparent 28%),
radial-gradient(circle at 82% 4%, rgba(99, 102, 241, 0.16), transparent 30%),
linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px) 0 0 / 46px 46px,
linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px) 0 0 / 46px 46px,
var(--frm-bg);
--frm-workbench-bg-radial: var(--frm-workbench-bg-aurora);
--frm-workbench-panel: var(--frm-surface-panel);
--frm-workbench-panel-2: var(--frm-surface-panel-subtle);
--frm-workbench-panel-raised: var(--frm-surface-panel-raised);
--frm-workbench-well: #0B1020;
--frm-workbench-well-2: #080C16;
--frm-workbench-panel-accent:
linear-gradient(135deg, rgba(56, 189, 248, 0.13), rgba(99, 102, 241, 0.12)),
var(--frm-surface-panel);
--frm-workbench-panel-danger:
linear-gradient(135deg, rgba(58, 17, 33, 0.78), rgba(27, 18, 30, 0.90)),
var(--frm-surface-panel);
--frm-workbench-panel-accent-rim:
linear-gradient(135deg, var(--frm-accent), var(--frm-accent-2) 40%, transparent 72%);
--frm-workbench-line: rgba(148, 163, 184, 0.16);
--frm-workbench-line-accent: rgba(56, 189, 248, 0.34);
--frm-line: rgba(148, 163, 184, 0.16);
--frm-line-subtle: rgba(148, 163, 184, 0.09);
--frm-line-strong: rgba(148, 163, 184, 0.30);
--frm-text: #F4F7FB; /* Δ was #F8FAFC (aligned to surface-inverse pair) */
--frm-text-2: #C7D2E2; /* Δ was #D8E1F0 (AA tune) */
--frm-text-3: #93A2B8; /* Δ was #9AA8BC — AA contrast target */
--frm-text-muted-2: #64748B;
--frm-text-inverse: #0C1220; /* Δ was #FFFFFF — inverts to day-bg */
--frm-text-on-accent: #04121D;
--frm-accent: #38BDF8;
--frm-accent-2: #6366F1;
--frm-accent-soft: rgba(56, 189, 248, 0.12);
--frm-accent-line: rgba(56, 189, 248, 0.34);
--frm-ring: rgba(56, 189, 248, 0.55);
--frm-focus-ring: var(--frm-ring);
--frm-success: #34D399;
--frm-warning: #FBBF24;
--frm-danger: #FB7185;
--frm-info: #38BDF8;
--frm-unknown: #64748B;
--frm-success-soft: rgba(52, 211, 153, 0.13);
--frm-warning-soft: rgba(251, 191, 36, 0.14);
--frm-danger-soft: rgba(251, 113, 133, 0.13);
--frm-info-soft: rgba(56, 189, 248, 0.12);
--frm-unknown-soft: rgba(100, 116, 139, 0.14);
/* UI 2.0 site-layer (A1) — nocturne CTA/accent (evidence + display font
inherit from :root; only the literal CTA/accent values differ per theme). */
--frm-cta: #38BDF8;
--frm-cta-2: #6366F1;
--frm-on-cta: #04121D;
--frm-site-accent: #6E86A8;
/* ── Surface aliases (0.8.4 compat) ──────────────────────────────── */
--frm-bg-page: var(--frm-bg);
--frm-bg-surface: var(--frm-surface);
--frm-bg-subtle: var(--frm-surface-2);
--frm-bg-muted: var(--frm-surface-muted);
--frm-bg-inverse: var(--frm-surface-inverse);
--frm-topbar-bg:
linear-gradient(180deg, rgba(29, 38, 61, 0.92), rgba(12, 18, 32, 0.98)),
var(--frm-bg);
/* ── Text aliases (0.8.4 compat) ─────────────────────────────────── */
--frm-text-primary: var(--frm-text);
--frm-text-secondary: var(--frm-text-2);
--frm-text-tertiary: var(--frm-text-3);
--frm-text-muted: var(--frm-text-muted-2);
--frm-text-on-dark: var(--frm-text-inverse);
--frm-text-on-brand: var(--frm-text-on-accent);
/* ── Border aliases (0.8.4 compat) ───────────────────────────────── */
--frm-border-subtle: var(--frm-line-subtle);
--frm-border-default: var(--frm-line);
--frm-border-strong: var(--frm-line-strong);
/* ── State semantics ─────────────────────────────────────────────── */
--frm-state-synced: var(--frm-success);
--frm-state-changed: var(--frm-warning);
--frm-state-added: var(--frm-info);
--frm-state-removed: var(--frm-danger);
--frm-state-no-data: var(--frm-unknown);
/* ── Elevation ───────────────────────────────────────────────────── */
--frm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
--frm-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
--frm-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
--frm-shadow-brand: 0 8px 26px rgba(56, 189, 248, 0.28);
--frm-workbench-shadow-panel:
0 22px 70px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(125, 211, 252, 0.10);
--frm-workbench-shadow-drawer:
0 28px 90px rgba(0, 0, 0, 0.42),
inset 1px 0 0 rgba(125, 211, 252, 0.08);
}
/* ============================================================================
THEME · aurora-hc (high-contrast, WCAG AAA — no legacy alias)
── Flat surfaces only. Radial workbench gradients DISABLED (they defeat HC).
Workbench-panel steps are solid #141414 / #1C1C1C with strong lines.
============================================================================ */
[data-frm-theme="aurora-hc"] {
color-scheme: dark;
/* ── Brand / primary ramp (kept sky, HC does not alter the ramp) ─── */
--frm-primary-50: #E0F7FF;
--frm-primary-100: #BAECFF;
--frm-primary-200: #7DDBFF;
--frm-primary-300: #38BDF8;
--frm-primary-400: #22AEEB;
--frm-primary-500: #0EA5E9;
--frm-primary-600: #0284C7;
--frm-primary-700: #0369A1;
--frm-primary-800: #075985;
--frm-primary-900: #0C4A6E;
--frm-accent-violet: #8B93FF;
--frm-accent-aurora-from: #4FC3FF;
--frm-accent-aurora-to: #8B93FF;
/* ── Semantic theme contract (HC palette) ────────────────────────── */
--frm-bg: #000000;
--frm-surface: #0A0A0A;
--frm-surface-2: #141414;
--frm-surface-muted: #0A0A0A;
--frm-surface-raised: #1A1A1A;
--frm-surface-inverse: #FFFFFF;
--frm-surface-panel: var(--frm-surface); /* no gradient in HC */
--frm-surface-panel-subtle: var(--frm-surface-2); /* no gradient in HC */
--frm-surface-panel-raised: var(--frm-surface-raised); /* no gradient in HC */
--frm-surface-panel-shadow: var(--frm-shadow-md);
--frm-surface-panel-rim: var(--frm-line-strong);
--frm-surface-panel-highlight: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
--frm-surface-panel-glow: var(--frm-shadow-md);
--frm-workbench-bg: var(--frm-bg);
--frm-workbench-bg-flat: var(--frm-bg);
--frm-workbench-bg-aurora: var(--frm-bg); /* radial DISABLED in HC — flat floor */
--frm-workbench-bg-grid: var(--frm-bg);
--frm-workbench-bg-radial: var(--frm-workbench-bg-aurora);
--frm-workbench-panel: var(--frm-surface-panel);
--frm-workbench-panel-2: var(--frm-surface-panel-subtle);
--frm-workbench-panel-raised: var(--frm-surface-panel-raised);
--frm-workbench-well: #0A0A0A;
--frm-workbench-well-2: #050505;
--frm-workbench-panel-accent: var(--frm-surface-panel-subtle); /* no gradient */
--frm-workbench-panel-danger: var(--frm-surface-panel-subtle); /* no gradient */
--frm-workbench-panel-accent-rim: var(--frm-accent);
--frm-workbench-line: rgba(255, 255, 255, 0.60);
--frm-workbench-line-accent: rgba(79, 195, 255, 0.60);
--frm-line: rgba(255, 255, 255, 0.40);
--frm-line-subtle: rgba(255, 255, 255, 0.25);
--frm-line-strong: rgba(255, 255, 255, 0.60);
--frm-text: #FFFFFF;
--frm-text-2: #E5E5E5;
--frm-text-3: #C4C4C4;
--frm-text-muted-2: #A3A3A3;
--frm-text-inverse: #000000;
--frm-text-on-accent: #001018;
--frm-accent: #4FC3FF;
--frm-accent-2: #8B93FF;
--frm-accent-soft: rgba(79, 195, 255, 0.18);
--frm-accent-line: rgba(79, 195, 255, 0.60);
--frm-ring: rgba(79, 195, 255, 0.85);
--frm-focus-ring: var(--frm-ring);
--frm-success: #4ADE80;
--frm-warning: #FCD34D;
--frm-danger: #FF8A99;
--frm-info: #4FC3FF;
--frm-unknown: #A3A3A3;
--frm-success-soft: rgba(74, 222, 128, 0.18);
--frm-warning-soft: rgba(252, 211, 77, 0.18);
--frm-danger-soft: rgba(255, 138, 153, 0.18);
--frm-info-soft: rgba(79, 195, 255, 0.18);
--frm-unknown-soft: rgba(163, 163, 163, 0.18);
/* UI 2.0 site-layer (A1) — high-contrast CTA/accent. */
--frm-cta: #4FC3FF;
--frm-cta-2: #8B93FF;
--frm-on-cta: #04121D;
--frm-site-accent: #93A2B8;
/* ── Surface aliases (0.8.4 compat) ──────────────────────────────── */
--frm-bg-page: var(--frm-bg);
--frm-bg-surface: var(--frm-surface);
--frm-bg-subtle: var(--frm-surface-2);
--frm-bg-muted: var(--frm-surface-muted);
--frm-bg-inverse: var(--frm-surface-inverse);
--frm-topbar-bg: #000000;
/* ── Text aliases (0.8.4 compat) ─────────────────────────────────── */
--frm-text-primary: var(--frm-text);
--frm-text-secondary: var(--frm-text-2);
--frm-text-tertiary: var(--frm-text-3);
--frm-text-muted: var(--frm-text-muted-2);
--frm-text-on-dark: var(--frm-text-inverse);
--frm-text-on-brand: var(--frm-text-on-accent);
/* ── Border aliases (0.8.4 compat) ───────────────────────────────── */
--frm-border-subtle: var(--frm-line-subtle);
--frm-border-default: var(--frm-line);
--frm-border-strong: var(--frm-line-strong);
/* ── State semantics ─────────────────────────────────────────────── */
--frm-state-synced: var(--frm-success);
--frm-state-changed: var(--frm-warning);
--frm-state-added: var(--frm-info);
--frm-state-removed: var(--frm-danger);
--frm-state-no-data: var(--frm-unknown);
/* ── Elevation (HC uses solid outlines instead of soft shadows) ──── */
--frm-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.20);
--frm-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.25);
--frm-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.30);
--frm-shadow-brand: 0 0 0 2px var(--frm-accent);
--frm-workbench-shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.30);
--frm-workbench-shadow-drawer: 0 0 0 1px rgba(255, 255, 255, 0.40);
}
/* ============================================================================
PER-SERVICE · accent overlay independent of theme
Sets only --frm-accent / --frm-accent-2 / --frm-ring; everything else
inherits from the theme block above. Applied via
.
============================================================================ */
[data-frm-service="ai.agents"] { --frm-accent: #38BDF8; --frm-accent-2: #6366F1; --frm-ring: rgba(56, 189, 248, 0.55); --frm-focus-ring: var(--frm-ring); }
[data-frm-service="ai.metrics"] { --frm-accent: #55B4F0; --frm-accent-2: #6366F1; --frm-ring: rgba(85, 180, 240, 0.55); --frm-focus-ring: var(--frm-ring); }
[data-frm-service="ai.renta"] { --frm-accent: #43CE93; --frm-accent-2: #38BDF8; --frm-ring: rgba(67, 206, 147, 0.55); --frm-focus-ring: var(--frm-ring); }
[data-frm-service="ai.launcher"] { --frm-accent: #6366F1; --frm-accent-2: #38BDF8; --frm-ring: rgba(99, 102, 241, 0.55); --frm-focus-ring: var(--frm-ring); }
[data-frm-service="ai.market"] { --frm-accent: #B695F4; --frm-accent-2: #6366F1; --frm-ring: rgba(182, 149, 244, 0.55); --frm-focus-ring: var(--frm-ring); }
[data-frm-service="ai.finmodel"] { --frm-accent: #EBA968; --frm-accent-2: #FBBF24; --frm-ring: rgba(235, 169, 104, 0.55); --frm-focus-ring: var(--frm-ring); }
[data-frm-service="site"] { --frm-accent: #F58FB0; --frm-accent-2: #6366F1; --frm-ring: rgba(245, 143, 176, 0.55); --frm-focus-ring: var(--frm-ring); }
/* ============================================================================
Focus ring · unified :focus-visible across interactive elements
============================================================================ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--frm-focus-ring, var(--frm-ring));
outline-offset: 2px;
border-radius: var(--frm-radius-sm);
}
/* ============================================================================
Utilities & keyframes (unchanged from 0.8.4)
============================================================================ */
/* Default monospace utility — works without Tailwind. */
.frm-mono {
font-family: var(--frm-font-mono);
font-feature-settings: 'tnum' 1, 'zero' 1;
}
.frm-skeleton {
background:
linear-gradient(
90deg,
var(--frm-surface-2) 0%,
var(--frm-surface-muted) 45%,
var(--frm-surface-2) 90%
);
background-size: 220% 100%;
animation: frm-skeleton-shimmer 1.2s var(--frm-easing-standard) infinite;
}
/* Markdown prose utility — used by from @frm/ui/components/core. */
.frm-prose {
font-family: var(--frm-font-ui);
font-size: 15px;
line-height: 1.55;
color: var(--frm-text);
}
.frm-prose > * + * {
margin-top: 0.85em;
}
.frm-prose h1,
.frm-prose h2,
.frm-prose h3,
.frm-prose h4 {
font-weight: 800;
color: var(--frm-text);
line-height: 1.25;
margin-top: 1.4em;
}
.frm-prose h1 { font-size: 1.65em; }
.frm-prose h2 { font-size: 1.35em; }
.frm-prose h3 { font-size: 1.15em; }
.frm-prose h4 { font-size: 1em; }
.frm-prose p {
color: var(--frm-text);
}
.frm-prose a {
color: var(--frm-primary-500);
text-decoration: none;
}
.frm-prose a:hover {
text-decoration: underline;
}
.frm-prose code {
font-family: var(--frm-font-mono);
font-size: 0.92em;
padding: 1px 5px;
background: var(--frm-surface-2);
border-radius: var(--frm-radius-sm);
color: var(--frm-text);
}
.frm-prose pre {
font-family: var(--frm-font-mono);
font-size: 0.92em;
padding: 12px 14px;
background: var(--frm-workbench-panel-2);
border: 1px solid var(--frm-line-subtle);
border-radius: var(--frm-radius-md);
overflow-x: auto;
line-height: 1.45;
}
.frm-prose pre > code {
padding: 0;
background: transparent;
border-radius: 0;
}
.frm-prose blockquote {
margin: 1em 0;
padding: 4px 0 4px 12px;
border-left: 3px solid var(--frm-line-strong);
color: var(--frm-text-2);
}
.frm-prose ul,
.frm-prose ol {
padding-left: 1.25em;
}
.frm-prose li + li {
margin-top: 0.35em;
}
.frm-prose hr {
border: 0;
border-top: 1px solid var(--frm-line);
margin: 1.5em 0;
}
.frm-prose table {
width: 100%;
border-collapse: collapse;
font-size: 0.94em;
}
.frm-prose th,
.frm-prose td {
padding: 8px 10px;
border-bottom: 1px solid var(--frm-line);
text-align: left;
}
.frm-prose th {
color: var(--frm-text-2);
font-weight: 800;
}
.frm-prose--dense {
font-size: 14px;
line-height: 1.45;
}
.frm-prose--dense > * + * {
margin-top: 0.55em;
}
.frm-prose--dense h1,
.frm-prose--dense h2,
.frm-prose--dense h3,
.frm-prose--dense h4 {
margin-top: 0.95em;
}
.frm-prose--dense pre {
padding: 8px 10px;
}
@keyframes frm-skeleton-shimmer {
0% {
background-position: 180% 0;
}
100% {
background-position: -180% 0;
}
}
@keyframes frm-spin {
to {
transform: rotate(360deg);
}
}
@keyframes frm-spinner-dot {
0%,
80%,
100% {
opacity: 0.45;
transform: scale(0.7);
}
40% {
opacity: 1;
transform: scale(1);
}
}
@keyframes frm-spinner-bar {
0% {
transform: translateX(-140%);
}
100% {
transform: translateX(340%);
}
}
/* Aurora 1.0 · Phase 1.1.0 — ProgressBar indeterminate stripe. */
/* Aurora 1.0 · Phase 1.1.0 — density-system attribute cascade.
`AppShell density="compact"` writes `data-frm-density="compact"` on
the shell root; consumer CSS can key off this to scale bespoke
spacing without touching the components themselves. */
[data-frm-density="compact"] {
--frm-density: 0.8;
}
[data-frm-density="comfortable"] {
--frm-density: 1;
}
@keyframes frm-progress-indeterminate {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(250%);
}
}
/* Reduced motion respect — used by all @frm/ui animations. */
@media (prefers-reduced-motion: reduce) {
:root {
--frm-motion-fast: 0ms;
--frm-motion-base: 0ms;
--frm-motion-slow: 0ms;
--frm-motion-spin: 0ms;
}
.frm-skeleton {
animation: none;
}
[data-frm-progress-indeterminate="true"] > * {
animation: none !important;
}
/* Aurora 1.3 — public Spinner keeps the busy signal visible but
stops orbit/ring motion under reduced-motion. */
[data-frm-spinner-orbit],
[data-frm-spinner-ring],
[data-frm-spinner-conic],
[data-frm-spinner-dots] > *,
[data-frm-spinner-bar] > *,
[data-frm-minimark-ring] {
animation: none !important;
}
/* Legacy private Button spinner hook kept harmless for consumers
still rendering older package markup during mixed-version rollout. */
[data-frm-button-loading="true"] [data-frm-button-spinner] {
animation: none !important;
}
}