/* ===========================================================================
Prove7 design tokens — the single source of colour, type, space and
elevation for every Prove7 surface (Control Chat, the platform container,
and anything built next).
---------------------------------------------------------------------------
Drop this file in before any other stylesheet, set `data-theme` on
to "light" or "dark", and reference ONLY the semantic names below. No
product stylesheet should contain a literal hex.
Two layers, on purpose:
1. PRIMITIVES --p7-indigo-600 — the raw ramp. Never used by a component.
2. SEMANTICS --p7-accent — what a component asks for. Re-pointed
per theme, so one rule serves both.
A new surface adopts the system by using layer 2 only; a rebrand changes
layer 1 in one place.
Values come from the approved Direction B token sheet. Status is never
carried by hue alone: every status token differs in lightness too, and the
component that uses it must also carry a word.
=========================================================================== */
/* -- Layer 1 . primitives ------------------------------------------------- */
:root {
/* Neutral ramp */
--p7-gray-900:#101828; --p7-gray-700:#344054; --p7-gray-600:#475467;
--p7-gray-500:#667085; --p7-gray-300:#98A2B3; --p7-gray-250:#D0D5DD;
--p7-gray-200:#E4E7EC; --p7-gray-100:#F2F4F7; --p7-gray-50:#F9FAFB;
--p7-gray-25:#FCFCFD; --p7-gray-10:#FBFBFC; --p7-white:#FFFFFF;
/* Indigo - the accent ramp */
--p7-indigo-700:#272082; --p7-indigo-600:#3730A3; --p7-indigo-500:#2B2483;
--p7-indigo-200:#D7D4F5; --p7-indigo-50:#F2F1FB; --p7-indigo-25:#F6F5FE;
--p7-indigo-10:#FCFBFF;
/* Green - allowed / sealed */
--p7-green-700:#05603A; --p7-green-600:#047857; --p7-green-50:#ECFDF3;
/* Amber - held / needs approval */
--p7-amber-700:#93370D; --p7-amber-600:#B45309; --p7-amber-200:#F0C9A0;
--p7-amber-50:#FEF0C7; --p7-amber-25:#FFFAF0;
/* Red - denied */
--p7-red-600:#B42318; --p7-red-200:#FECDCA; --p7-red-50:#FEF3F2; --p7-red-25:#FFFBFA;
/* Prove7 brand orange, sampled from the official mark. It is the IDENTITY colour,
not a status colour: it belongs to the logo and to deliberate brand moments, and
never to allowed / held / denied, which must stay the three signal ramps above. */
--p7-brand:#F26534;
/* Dark-theme ramps, named so the dark block below reads as a mapping. */
--p7-d-canvas:#0B111F; --p7-d-surface:#121A2B; --p7-d-sunken:#0E1626; --p7-d-raised:#162034;
--p7-d-ink-900:#F2F4F7; --p7-d-ink-700:#D0D5DD; --p7-d-ink-600:#B6BECC;
--p7-d-ink-500:#98A2B3; --p7-d-ink-300:#73809A;
--p7-d-indigo:#A5A0F0; --p7-d-indigo-hi:#BDB9F6; --p7-d-indigo-ink:#CFCBFA;
--p7-d-green:#3DD68C; --p7-d-green-ink:#8BE8BC;
--p7-d-amber:#E9A23B; --p7-d-amber-ink:#F3CB8E;
--p7-d-red:#F27A70;
/* -- Type --
IBM Plex, falling back to the system face. Nothing here fetches a font:
a surface that wants Plex self-hosts it and declares @font-face itself,
so no Prove7 page makes a third-party request. */
--p7-font-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--p7-font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
--p7-text-display:700 24px/32px var(--p7-font-sans); /* page hero */
--p7-text-title: 700 19px/26px var(--p7-font-sans); /* page title */
--p7-text-section:700 16px/24px var(--p7-font-sans); /* section heading */
--p7-text-body: 400 14px/22px var(--p7-font-sans); /* prose */
--p7-text-ui: 400 13px/20px var(--p7-font-sans); /* controls, rows */
--p7-text-caption:400 12px/18px var(--p7-font-sans); /* secondary line */
--p7-text-mono: 400 12px/18px var(--p7-font-mono); /* ids, amounts */
--p7-eyebrow-size:11px;
--p7-eyebrow-weight:600;
--p7-eyebrow-tracking:.06em;
/* -- Space . 8px base, 4px half-step -- */
--p7-space-1:4px; --p7-space-2:8px; --p7-space-3:12px; --p7-space-4:16px;
--p7-space-5:20px; --p7-space-6:24px; --p7-space-8:32px;
/* -- Radius -- */
--p7-radius-control:6px; /* input, chip */
--p7-radius-button:8px; /* button, menu row */
--p7-radius-card:12px; /* card, sheet */
--p7-radius-pill:999px;
/* -- Density . set per person, remembered per view (see [data-density]) -- */
--p7-row-y:11px; /* comfortable - 44px rows */
--p7-row-x:12px;
/* -- Motion -- */
--p7-ease:cubic-bezier(.2,.7,.3,1);
--p7-fast:120ms; --p7-med:200ms;
/* -- Focus . one ring everywhere, 2px offset, accent coloured -- */
--p7-focus-width:2px; --p7-focus-offset:2px;
}
/* Compact only removes the secondary line and padding - never the status dot,
the approval control or the hit target. */
[data-density="compact"] { --p7-row-y:6px; }
/* -- Layer 2 . semantics . LIGHT ------------------------------------------ */
html[data-theme="light"] {
--p7-canvas:var(--p7-gray-10);
--p7-surface:var(--p7-white);
--p7-surface-sunken:var(--p7-gray-50);
--p7-surface-raised:var(--p7-gray-25);
--p7-ink:var(--p7-gray-900);
--p7-ink-strong:var(--p7-gray-700);
--p7-ink-muted:var(--p7-gray-600);
--p7-ink-subtle:var(--p7-gray-500);
--p7-ink-faint:var(--p7-gray-300);
--p7-ink-on-accent:var(--p7-white);
--p7-line:var(--p7-gray-200);
--p7-line-strong:var(--p7-gray-250);
--p7-line-soft:var(--p7-gray-100);
--p7-accent:var(--p7-indigo-600);
--p7-accent-hover:var(--p7-indigo-700);
--p7-accent-ink:var(--p7-indigo-500);
--p7-accent-bg:var(--p7-indigo-50);
--p7-accent-bg-soft:var(--p7-indigo-25);
--p7-accent-line:var(--p7-indigo-200);
--p7-accent-raised:var(--p7-indigo-10);
--p7-allow:var(--p7-green-600);
--p7-allow-ink:var(--p7-green-700);
--p7-allow-bg:var(--p7-green-50);
--p7-hold:var(--p7-amber-600);
--p7-hold-ink:var(--p7-amber-700);
--p7-hold-bg:var(--p7-amber-50);
--p7-hold-bg-soft:var(--p7-amber-25);
--p7-hold-line:var(--p7-amber-200);
--p7-deny:var(--p7-red-600);
--p7-deny-ink:var(--p7-red-600);
--p7-deny-bg:var(--p7-red-50);
--p7-deny-bg-soft:var(--p7-red-25);
--p7-deny-line:var(--p7-red-200);
--p7-elev-rest:0 1px 2px rgba(16,24,40,.06);
--p7-elev-hover:0 4px 10px rgba(16,24,40,.10);
--p7-elev-overlay:0 12px 28px rgba(16,24,40,.18);
}
/* -- Layer 2 . semantics . DARK ------------------------------------------- */
html[data-theme="dark"] {
--p7-canvas:var(--p7-d-canvas);
--p7-surface:var(--p7-d-surface);
--p7-surface-sunken:var(--p7-d-sunken);
--p7-surface-raised:var(--p7-d-raised);
--p7-ink:var(--p7-d-ink-900);
--p7-ink-strong:var(--p7-d-ink-700);
--p7-ink-muted:var(--p7-d-ink-600);
--p7-ink-subtle:var(--p7-d-ink-500);
--p7-ink-faint:var(--p7-d-ink-300);
--p7-ink-on-accent:var(--p7-d-canvas);
--p7-line:rgba(255,255,255,.12);
--p7-line-strong:rgba(255,255,255,.22);
--p7-line-soft:rgba(255,255,255,.07);
--p7-accent:var(--p7-d-indigo);
--p7-accent-hover:var(--p7-d-indigo-hi);
--p7-accent-ink:var(--p7-d-indigo-ink);
--p7-accent-bg:rgba(165,160,240,.14);
--p7-accent-bg-soft:rgba(165,160,240,.10);
--p7-accent-line:rgba(165,160,240,.34);
--p7-accent-raised:rgba(165,160,240,.06);
--p7-allow:var(--p7-d-green);
--p7-allow-ink:var(--p7-d-green-ink);
--p7-allow-bg:rgba(61,214,140,.14);
--p7-hold:var(--p7-d-amber);
--p7-hold-ink:var(--p7-d-amber-ink);
--p7-hold-bg:rgba(233,162,59,.15);
--p7-hold-bg-soft:rgba(233,162,59,.09);
--p7-hold-line:rgba(233,162,59,.38);
--p7-deny:var(--p7-d-red);
--p7-deny-ink:var(--p7-d-red);
--p7-deny-bg:rgba(242,122,112,.14);
--p7-deny-bg-soft:rgba(242,122,112,.08);
--p7-deny-line:rgba(242,122,112,.38);
--p7-elev-rest:0 1px 2px rgba(0,0,0,.40);
--p7-elev-hover:0 4px 10px rgba(0,0,0,.46);
--p7-elev-overlay:0 12px 28px rgba(0,0,0,.58);
}
/* No data-theme yet (first paint, before the app reads the person's choice):
follow the OS so nothing flashes the wrong way. */
@media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; } }
html:not([data-theme]) { color-scheme: light; }