/* =====================================================================
Hungry Lion — Console Kit theme
Single source of truth for colour, type, shape and space on every
RecruitBot surface. Load order on every page:
Brand colours are SAMPLED FROM THE LOGO FILES (HL_FullLogo.jpg,
android-chrome-512x512.png), not taken from the brand book, which has
not been supplied yet. Replace the three --hl-* values if the book
specifies different ones; everything else derives from them.
THE COLOUR RULE — read before changing anything
------------------------------------------------
Hungry Lion red is the FRAME: app bar, brand moments, eyebrows.
It is never a button. Inside the content, red means only one thing:
danger (delete, decline, reject, void). A recruiter who sees a red
button must be able to assume it is destructive without reading it.
So the kit's "brand" ramp — primary buttons, links, focus, info — is
a warm LION INK (a brown-black taken from the lion's line work), and
HL yellow is the ACCENT on the dark chrome (active nav rule, loading
line). Every ratio below is WCAG 2.1, measured.
If Hungry Lion insists on red primary buttons, swap the ramp for the
commented RED RAMP at the bottom AND change --danger to a colour that
is not red. Do not do one without the other.
===================================================================== */
:root {
/* ---- Hungry Lion (from the logo) --------------------------------- */
--hl-red: #D42329; /* logo field. 5.16:1 with white — AA */
--hl-red-deep: #A81A1F; /* red text on light. 7.41:1 */
--hl-yellow: #FFDD00; /* lion + "LION". 12.5:1 on --chrome, 3.8:1 on red
(logotype only — exempt).
1.3:1 on white: NEVER text on light. */
/* ---- Brand ramp = Lion ink (warm brown-black) ------------------- */
--brand-50: #f7f3f0; /* banner fill, hover wash */
--brand-100: #ece4de; /* info chip fill */
--brand-200: #d9cbc2; /* banner border, card hover border */
--brand-300: #bba89b; /* control hover border */
--brand-400: #8c776a; /* dashed "add" hover border */
--brand-500: #5d4a40; /* focus border. 8.3:1 */
--brand-600: #3a2a25; /* PRIMARY. Buttons, links, focus. 13.7:1 */
--brand-700: #2a1d19; /* primary hover. 16.3:1 */
--brand-800: #3a2a25; /* text on brand-100 */
--brand-900: #1f1513; /* field captions. 17.9:1 */
--on-brand: #ffffff;
/* ---- Chrome ------------------------------------------------------
App bar is overridden to --hl-red in hl-console.css (the logo sits
on its own field there). --chrome-deep still paints toasts and the
code blocks, where red would read as an error. */
--chrome-deep: #1c1210; /* toasts, code blocks */
--chrome: #271a17; /* sidebar */
--chrome-pale: #dccdc5; /* labels on the chrome. 10.9:1 */
--chrome-mid: var(--brand-600); /* links on light */
--accent: var(--hl-yellow); /* active marker, loading line */
/* ---- Neutrals: warm-cast so they sit with the brand -------------- */
--ink: #1f1513; /* body text. 16.3:1 on page */
--ink-2: #4f403b; /* secondary text. 9.0:1 */
--muted: #6d5f59; /* captions, hints. 5.6:1 on page — AA */
--line: #e8e0da; /* every hairline */
--page: #f7f4f0; /* behind the cards (the old HL canvas) */
--panel: #ffffff; /* cards, sheets, drawers */
--panel-2: #fcfaf8; /* footers, row hover */
--shade: #f0e9e3; /* neutral chip fill, link-button hover */
/* ---- Semantic: never carried by colour alone -------------------- */
--ok: #1e6e45; --ok-bg: #e7f2ec;
--warn: #8a5a12; --warn-bg: #fdf3e3;
--danger: #b3261e; --danger-bg: #fdecea;
--danger-deep: #8e1e17;
/* ---- Overlays and elevation -------------------------------------- */
--scrim: rgba(28, 18, 16, .45);
--shadow-float: 0 30px 70px rgba(40, 20, 16, .32);
--shadow-side: -18px 0 50px rgba(40, 20, 16, .22);
--shadow-toast: 0 22px 55px rgba(28, 14, 10, .40);
/* ---- Type: system stacks, nothing fetched -------------------------
The wordmark's rounded display face is the logo, not a UI font.
Body copy stays on the system stack the kit was tuned for. */
--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* ---- Shape and space: the kit's, unchanged ----------------------- */
--r-ctl: 3px;
--r-surf: 5px;
--r-pill: 20px;
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px;
}
/* ---- RED RAMP (alternative — see THE COLOUR RULE above) --------------
--brand-50:#fdeeee; --brand-100:#fad6d7; --brand-200:#f3acae; --brand-300:#e97b7f;
--brand-400:#de4a4f; --brand-500:#d42329; --brand-600:#d42329; --brand-700:#a81a1f;
--brand-800:#7e1317; --brand-900:#3a0c0e;
--danger:#6b1d8f; (violet — must no longer be red)
----------------------------------------------------------------------- */