/* ==========================================================================
Halcyon Onyx — Refined Component Layer
--------------------------------------------------------------------------
Drop-in stylesheet that brings the design-refresh tokens + utilities
into the existing app. Fully opt-in: every rule is scoped under
`.halcyon-refined`, so nothing changes on pages that don't add the class.
USAGE
-----
1. Include after styles.css in base.html:
2. Opt a single page in by adding the class to :
…
Or flip the entire app over at once by adding it to .
3. Inside that scope, use the refined component classes verbatim from
the prototypes (.card, .pill.green, .btn-primary, .bar, .eyebrow, …).
Outside the scope, none of these rules apply.
The :root block at the bottom adds NEW token names only (--border-soft,
--primary-tint, --dim, etc.) — it never overrides v4 tokens, so it is
safe to load globally.
========================================================================== */
/* ---- Scope wrapper --------------------------------------------------- */
.halcyon-refined {
font-family: var(--font-sans);
color: var(--fg);
font-feature-settings: 'cv11', 'ss01';
-webkit-font-smoothing: antialiased;
}
.halcyon-refined *,
.halcyon-refined *::before,
.halcyon-refined *::after { box-sizing: border-box; }
/* ---- Headings & body text ------------------------------------------- */
.halcyon-refined .h1 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 4px;
color: var(--fg);
}
.halcyon-refined .h0 {
font-size: 26px;
font-weight: 600;
letter-spacing: -0.015em;
margin: 0;
color: var(--fg);
}
.halcyon-refined .sub {
color: var(--muted);
font-size: 13px;
margin: 0;
}
.halcyon-refined .eyebrow {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--dim);
text-transform: uppercase;
}
/* ---- Cards ----------------------------------------------------------- */
.halcyon-refined .card {
background: var(--card-bg);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 18px;
}
.halcyon-refined .card-title {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--fg);
margin: 0 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.halcyon-refined .card-title .meta {
color: var(--muted);
font-weight: 500;
font-size: 11.5px;
}
/* ---- Buttons --------------------------------------------------------- */
.halcyon-refined .btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 12px;
font-size: 12.5px;
font-weight: 500;
border-radius: 6px;
border: 1px solid var(--border-soft);
background: var(--surface-high);
color: var(--fg);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: background 120ms, color 120ms, border-color 120ms;
}
.halcyon-refined .btn:hover { background: var(--surface-highest); }
.halcyon-refined .btn-primary {
background: var(--primary);
color: #0b1020;
border-color: transparent;
font-weight: 600;
}
.halcyon-refined .btn-primary:hover { background: var(--primary-hover, #c5d6ff); }
.halcyon-refined .btn-ghost {
background: transparent;
border-color: transparent;
color: var(--muted);
}
.halcyon-refined .btn-ghost:hover {
color: var(--fg);
background: var(--surface-high);
}
.halcyon-refined .btn-danger {
color: var(--danger);
background: rgba(255, 180, 171, 0.08);
border-color: rgba(255, 180, 171, 0.18);
}
.halcyon-refined .btn svg { width: 13px; height: 13px; }
/* ---- Pills / tags ---------------------------------------------------- */
.halcyon-refined .pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 2px 7px;
height: 18px;
line-height: 1;
border-radius: 999px;
background: var(--surface-high);
color: var(--fg-secondary);
border: 1px solid var(--border-ghost);
font-variant-numeric: tabular-nums;
}
.halcyon-refined .pill.green { background: rgba(78, 222, 163, 0.10); color: var(--success); border-color: rgba(78, 222, 163, 0.18); }
.halcyon-refined .pill.amber { background: rgba(245, 158, 11, 0.10); color: var(--warning); border-color: rgba(245, 158, 11, 0.22); }
.halcyon-refined .pill.red { background: rgba(255, 180, 171, 0.10); color: var(--danger); border-color: rgba(255, 180, 171, 0.20); }
.halcyon-refined .pill.blue { background: var(--primary-tint); color: var(--primary); border-color: rgba(173, 198, 255, 0.18); }
.halcyon-refined .pill.purple { background: rgba(192, 193, 255, 0.10); color: var(--tertiary); border-color: rgba(192, 193, 255, 0.18); }
.halcyon-refined .pill.gray { background: var(--surface-high); color: var(--muted); }
.halcyon-refined .pill.dot::before {
content: '';
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
display: inline-block;
}
/* ---- Keyboard hint --------------------------------------------------- */
.halcyon-refined .kbd {
font-family: var(--font-mono);
font-size: 10.5px;
padding: 1px 5px;
border-radius: 3px;
color: var(--muted);
background: var(--surface-high);
border: 1px solid var(--border-soft);
}
/* ---- Progress bars --------------------------------------------------- */
.halcyon-refined .bar {
height: 4px;
border-radius: 2px;
background: var(--surface-high);
overflow: hidden;
position: relative;
}
.halcyon-refined .bar > i {
display: block;
height: 100%;
background: var(--primary);
border-radius: 2px;
}
.halcyon-refined .bar.green > i { background: var(--success); }
.halcyon-refined .bar.amber > i { background: var(--warning); }
.halcyon-refined .bar.red > i { background: var(--danger); }
.halcyon-refined .bar.split { display: flex; }
.halcyon-refined .bar.split > i { border-radius: 0; }
.halcyon-refined .bar.split > i:first-child { border-radius: 2px 0 0 2px; }
.halcyon-refined .bar.split > i:last-child { border-radius: 0 2px 2px 0; }
/* ---- Layout primitives ---------------------------------------------- */
.halcyon-refined .row { display: flex; align-items: center; gap: 10px; }
.halcyon-refined .between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.halcyon-refined .stack { display: flex; flex-direction: column; gap: 10px; }
.halcyon-refined .grow { flex: 1; }
.halcyon-refined .divider { height: 1px; background: var(--border-ghost); margin: 12px 0; }
/* ---- Text colour helpers (do not collide with existing utilities) --- */
.halcyon-refined .muted { color: var(--muted); }
.halcyon-refined .dim { color: var(--dim); }
.halcyon-refined .mono { font-family: var(--font-mono); }
.halcyon-refined .tabular { font-variant-numeric: tabular-nums; }
/* ---- Scrollbars (subtle, match refined surfaces) -------------------- */
.halcyon-refined ::-webkit-scrollbar { width: 8px; height: 8px; }
.halcyon-refined ::-webkit-scrollbar-thumb { background: var(--surface-high); border-radius: 4px; }
.halcyon-refined ::-webkit-scrollbar-track { background: transparent; }
/* ==========================================================================
GLOBAL TOKEN ADDITIONS
--------------------------------------------------------------------------
These names are NEW in v4.1 — they augment v4.0 but never replace existing
tokens, so loading this stylesheet globally is non-destructive.
========================================================================== */
:root {
/* Tertiary text — between --muted and full transparency. Used for
deemphasised meta info, eyebrows, and inactive checklist marks. */
--dim: #6b7080;
/* Border variants — softer / ghostlier than --border, used in cards
and dense tables to feel rather than be seen. */
--border-soft: rgba(66, 71, 84, 0.30);
/* (--border-ghost is already defined in styles.css v4.0 — re-stating here
as a fallback in case this file is loaded standalone.) */
/* 10% primary-tinted surface — used for active nav, info pills,
icon backgrounds, and selected-row highlights. */
--primary-tint: rgba(173, 198, 255, 0.10);
/* Hover lighten for the primary button. */
--primary-hover: #c5d6ff;
/* Semantic aliases that match the prototype naming.
--danger maps to v4.0's --destructive; --info maps to --primary's
companion blue. Both are safe additions. */
--danger: #ffb4ab;
--info: #82b1ff;
}