/* ─────────────────────────────────────────────────────────────────────────
Rokyte brand foundation — shared by every page.
Colors are sampled from the official logo (orange #FE6432, navy #0C2B4F on
cream #FEFAF0). Type is Bricolage Grotesque; each page loads it with:
Pages keep their own variable names and map them onto these --rk-* tokens,
so page CSS doesn't need rewriting when the brand moves.
───────────────────────────────────────────────────────────────────────── */
:root {
/* Brand */
--rk-orange: #FE6432;
--rk-orange-hover:#FF7A4D;
--rk-orange-ink: #B83F12; /* orange for small text on light grounds (AA) */
--rk-orange-soft: #FFE3D6;
--rk-orange-line: #F8C4AD; /* border for orange-soft selections */
--rk-focus-ring: 0 0 0 3px rgb(254 100 50 / 0.2);
--rk-navy: #0C2B4F;
--rk-navy-deep: #071D38;
--rk-navy-2: #173A61;
/* Light surfaces */
--rk-cream: #FEFAF0; /* page */
--rk-paper: #F5EEDF; /* recessed band */
--rk-sand: #EFE7D6; /* pressed / selected surface */
--rk-white: #FFFFFF; /* cards, inputs */
--rk-well: #FDFBF6; /* drop zones, empty wells */
--rk-well-hover: #FFF6F1;
/* Text on light */
--rk-ink: var(--rk-navy);
--rk-ink-2: #3A4F6C;
--rk-ink-3: #5E6D83;
--rk-line: #E7DECC;
--rk-line-2: #D9CEB8;
/* Text on navy */
--rk-on-navy: #F4EEE2;
--rk-on-navy-2: #A9B6C9;
--rk-on-navy-3: #8C9BB3;
--rk-line-navy: #1E3F66;
/* Status (light) */
--rk-green: #276A47;
--rk-green-soft: #DDEFE3;
--rk-amber: #8F5206; /* ≥5:1 on white, cream, paper and sand */
--rk-amber-soft: #FBEBD2;
--rk-red: #A8331F; /* ≥5:1 on white, cream and red-soft */
--rk-red-soft: #F8E1DC;
--rk-blue: #2F5F95; /* informational, never a brand accent */
--rk-blue-soft: #E1E8F2;
/* Data-encoding hues (document categories, event types). Distinct from each
other and from the brand accent; never used as decoration. */
--rk-purple: #6A4C8C;
--rk-pink: #A83E6E;
--rk-teal: #1C6B70;
/* Dark-mode palette: deep navy, never neutral black */
--rk-d-bg: #071A33;
--rk-d-surface: #0C2440;
--rk-d-raised: #12304F;
--rk-d-line: #1E3F66;
--rk-d-line-2: #2A4E78;
--rk-d-text: #F4EEE2;
--rk-d-text-2: #A9B6C9;
--rk-d-text-3: #8C9BB3;
--rk-d-orange-ink: #FF9A73; /* orange text on navy */
--rk-d-green: #7FC79E;
--rk-d-amber: #F0B45A;
--rk-d-red: #F28B78;
--rk-d-blue: #8FB4E0;
--rk-d-purple: #B9A2DB;
--rk-d-pink: #E394BA;
--rk-d-teal: #7CC7C9;
--rk-d-pressed: #183A5E;
--rk-font: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--rk-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* code and JSON only */
--rk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--rk-shadow: 0 1px 2px rgb(12 43 79 / 0.06), 0 8px 24px -12px rgb(12 43 79 / 0.18);
--rk-shadow-lg: 0 24px 48px -24px rgb(12 43 79 / 0.35);
/* Logo mark colors — override per context (see .rk-on-navy) */
--mk-a: var(--rk-orange);
--mk-b: var(--rk-navy);
}
/* Browser surfaces */
html { accent-color: var(--rk-orange); caret-color: var(--rk-orange); scrollbar-color: var(--rk-line-2) transparent; }
::selection { background: var(--rk-orange); color: var(--rk-navy); }
body { font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
/* Logo mark + lockup
Markup:
Rokyte
The #rk-mark is inlined once near the top of . */
.rk-mark { width: 1.3em; height: 1.3em; flex-shrink: 0; display: block; }
.rk-brand { display: inline-flex; align-items: center; gap: .42em; color: var(--rk-navy); text-decoration: none; }
.rk-word { font-family: var(--rk-font); font-weight: 700; font-variation-settings: 'wdth' 90; letter-spacing: -0.035em; line-height: 1; }
.rk-on-navy, .rk-on-navy .rk-brand { --mk-b: var(--rk-on-navy); }
.rk-on-navy .rk-brand { color: var(--rk-on-navy); }