66 lines
2.6 KiB
CSS
66 lines
2.6 KiB
CSS
/* ============================================================
|
|
ChicoryTV — Color tokens
|
|
Dark, technical admin surface. PRIMARY scheme = warm chicory
|
|
(roasted-amber accent + chicory-leaf green). Cooler periwinkle and
|
|
dual-accent schemes live in tokens/themes.css as opt-in [data-theme] scopes.
|
|
============================================================ */
|
|
:root {
|
|
/* --- Base palette (raw values) — warm chicory --- */
|
|
--ctv-bg: #12100E; /* app background, deepest */
|
|
--ctv-bg-sunken: #0C0B09; /* wells, code, inset areas */
|
|
--ctv-surface: #1C1917; /* cards, panels, rows */
|
|
--ctv-surface-2: #241F1A; /* raised: menus, popovers, hover rows */
|
|
--ctv-surface-3: #2C2620; /* selected row, active chip */
|
|
|
|
--ctv-border: #2E2823; /* hairline dividers, card edges */
|
|
--ctv-border-strong: #3C352D; /* input borders, stronger separation */
|
|
|
|
--ctv-text: #F0EBE4; /* primary text */
|
|
--ctv-text-muted: #A89E92; /* secondary / labels */
|
|
--ctv-text-faint: #726860; /* disabled, placeholder, meta */
|
|
|
|
/* --- Accent: roasted chicory amber --- */
|
|
--ctv-accent: #E08A3C;
|
|
--ctv-accent-hover: #EC9A52;
|
|
--ctv-accent-press: #C9762E;
|
|
--ctv-accent-soft: rgba(224, 138, 60, 0.15); /* tinted fills, active nav bg */
|
|
--ctv-accent-ring: rgba(224, 138, 60, 0.45); /* focus ring */
|
|
|
|
/* --- Secondary: chicory-leaf green --- */
|
|
--ctv-secondary: #6B8F71;
|
|
--ctv-secondary-soft: rgba(107, 143, 113, 0.16);
|
|
|
|
/* --- Status --- */
|
|
--ctv-ok: #3FB984;
|
|
--ctv-ok-soft: rgba(63, 185, 132, 0.14);
|
|
--ctv-warn: #E0A83D;
|
|
--ctv-warn-soft: rgba(224, 168, 61, 0.14);
|
|
--ctv-error: #E5484D;
|
|
--ctv-error-soft: rgba(229, 72, 77, 0.14);
|
|
--ctv-live: #E08A3C; /* on-air / live rides the amber accent */
|
|
--ctv-live-soft: rgba(224, 138, 60, 0.16);
|
|
|
|
/* --- Semantic aliases --- */
|
|
--surface-app: var(--ctv-bg);
|
|
--surface-card: var(--ctv-surface);
|
|
--surface-raised: var(--ctv-surface-2);
|
|
--surface-selected: var(--ctv-surface-3);
|
|
--border-hairline: var(--ctv-border);
|
|
--border-control: var(--ctv-border-strong);
|
|
|
|
--text-primary: var(--ctv-text);
|
|
--text-secondary: var(--ctv-text-muted);
|
|
--text-disabled: var(--ctv-text-faint);
|
|
--text-on-accent: #1F1204;
|
|
|
|
--action-primary: var(--ctv-accent);
|
|
--action-primary-hover:var(--ctv-accent-hover);
|
|
--action-primary-press:var(--ctv-accent-press);
|
|
--focus-ring: var(--ctv-accent-ring);
|
|
|
|
--status-ok: var(--ctv-ok);
|
|
--status-warn: var(--ctv-warn);
|
|
--status-error: var(--ctv-error);
|
|
--status-live: var(--ctv-live);
|
|
}
|