/* ────────────────────────────────────────────────────────────── OZYN.AI — Color tokens A quiet, near-monochrome ink-on-paper system. Brand hue is deliberately absent: meaning is carried by weight, type and space, not color. The only chromatic tokens are functional status colors. ────────────────────────────────────────────────────────────── */ :root { /* ── Ink scale (the "accent" is just black) ── */ --ink-1: #111315; /* primary ink — text, buttons, marks */ --ink-2: #2b2d30; /* hover ink */ --ink-3: #000000; /* pure black, strongest press */ /* ── Paper scale (warm off-whites) ── */ --paper-0: #ffffff; /* card / elevated surface */ --paper-1: #fafaf9; /* page background */ --paper-2: #f2f1ef; /* soft / inset surface */ --paper-3: #e9e8e3; /* deeper paper */ --paper-card-hover: #f4f3f0; /* ── Lines ── */ --line: #e3e2dd; /* default hairline border */ --line-light: #eeede9; /* faint divider */ --line-strong: #c9c7c2; /* emphasized border */ /* ── Text ── */ --fg-1: #111315; /* primary */ --fg-2: #535452; /* secondary */ --fg-3: #8e8e8b; /* muted / metadata */ --fg-4: #b8b7b3; /* faint / disabled */ /* ── Functional status (carry meaning, never decoration) ── */ --error: #dc2626; --error-surface: #fef2f2; --error-border: #fecaca; --status-active: #1a7f37; /* live / running / success */ --status-attention: #b45309; /* needs review / warning */ /* ── Focus ── */ --focus-ring: rgba(17, 19, 21, 0.14); --accent-glow: rgba(17, 19, 21, 0.08); /* ──────────────── Semantic aliases ──────────────── */ --surface-page: var(--paper-1); --surface-card: var(--paper-0); --surface-card-hover: var(--paper-card-hover); --surface-soft: var(--paper-2); --surface-inverse: var(--ink-1); --text-primary: var(--fg-1); --text-secondary: var(--fg-2); --text-muted: var(--fg-3); --text-faint: var(--fg-4); --text-on-ink: var(--paper-1); --border-default: var(--line); --border-divider: var(--line-light); --border-emphasis: var(--line-strong); --action-fill: var(--ink-1); --action-fill-hover: var(--ink-2); --action-on-fill: var(--paper-1); } /* ── Dark mode — near-black with the same restrained contrast. Activate by setting [data-theme="dark"] on or any wrapper. ── */ [data-theme="dark"] { --ink-1: #f4f2ea; --ink-2: #d8d6cf; --ink-3: #ffffff; --paper-0: #171717; --paper-1: #0a0a0a; --paper-2: #1f1f1d; --paper-3: #262626; --paper-card-hover: #262626; --line: #262626; --line-light: #1f1f1f; --line-strong: #3a3a3a; --fg-1: #fafafa; --fg-2: #a3a3a3; --fg-3: #737373; --fg-4: #525252; --error: #f87171; --error-surface: #2a0d0d; --error-border: #5b1d1d; --status-active: #3fb950; --status-attention: #d29922; --focus-ring: rgba(244, 242, 234, 0.2); --accent-glow: rgba(244, 242, 234, 0.12); --text-on-ink: #111315; --action-on-fill: #111315; }