/* ============================================================================
FinalEye — Design Tokens
----------------------------------------------------------------------------
Framework-free CSS custom properties. Drop this into the of
every server-rendered template. Light mode is the default; dark mode is
opt-in via (or prefers-color-scheme fallback).
Naming: --fe--. Everything downstream (components.css, page
templates) should reference these tokens, never raw hex/oklch values.
============================================================================ */
:root {
/* ---- Type families ---------------------------------------------------- */
/* IBM Plex Sans for UI, IBM Plex Mono for data (IDs, URLs, %, counts).
A deliberate engineering-tool pairing — characterful but highly legible,
and free via Google Fonts. System stack is the graceful fallback. */
--fe-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--fe-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
/* ---- Type scale (px, dense-tool tuned) -------------------------------- */
--fe-text-display: 1.75rem; /* 28 — page H1 */
--fe-text-h2: 1.25rem; /* 20 — section */
--fe-text-h3: 1rem; /* 16 — card title */
--fe-text-base: 0.875rem; /* 14 — body / table cell */
--fe-text-sm: 0.8125rem; /* 13 — secondary */
--fe-text-xs: 0.75rem; /* 12 — labels, captions */
--fe-text-xxs: 0.6875rem; /* 11 — uppercase eyebrows */
--fe-leading-tight: 1.2;
--fe-leading-snug: 1.35;
--fe-leading-normal: 1.55;
--fe-weight-regular: 400;
--fe-weight-medium: 500;
--fe-weight-semibold: 600;
--fe-weight-bold: 700;
--fe-tracking-eyebrow: 0.06em;
/* ---- Spacing (4px base) ----------------------------------------------- */
--fe-space-1: 0.25rem; /* 4 */
--fe-space-2: 0.5rem; /* 8 */
--fe-space-3: 0.75rem; /* 12 */
--fe-space-4: 1rem; /* 16 */
--fe-space-5: 1.25rem; /* 20 */
--fe-space-6: 1.5rem; /* 24 */
--fe-space-8: 2rem; /* 32 */
--fe-space-10: 2.5rem; /* 40 */
--fe-space-12: 3rem; /* 48 */
--fe-space-16: 4rem; /* 64 */
/* ---- Radius ----------------------------------------------------------- */
--fe-radius-sm: 4px;
--fe-radius-md: 6px;
--fe-radius-lg: 8px;
--fe-radius-xl: 12px;
--fe-radius-pill: 999px;
/* ---- Border widths ---------------------------------------------------- */
--fe-border: 1px;
--fe-border-2: 2px;
/* ====================================================================== */
/* COLOR — primitives (cool indigo-tinted neutrals + status hues) */
/* ====================================================================== */
/* Neutral / canvas scale (cool, low-chroma) */
--fe-neutral-0: #ffffff;
--fe-neutral-25: oklch(0.988 0.002 265);
--fe-neutral-50: oklch(0.978 0.003 265);
--fe-neutral-100: oklch(0.962 0.004 265);
--fe-neutral-200: oklch(0.925 0.005 265);
--fe-neutral-300: oklch(0.878 0.006 265);
--fe-neutral-400: oklch(0.72 0.012 265);
--fe-neutral-500: oklch(0.6 0.015 265);
--fe-neutral-600: oklch(0.5 0.018 265);
--fe-neutral-700: oklch(0.4 0.02 265);
--fe-neutral-800: oklch(0.3 0.025 265);
--fe-neutral-900: oklch(0.24 0.032 265);
--fe-neutral-950: oklch(0.18 0.035 265);
/* Brand indigo (accent for primary actions, links, running state) */
--fe-indigo-50: oklch(0.96 0.025 264);
--fe-indigo-100: oklch(0.92 0.05 264);
--fe-indigo-200: oklch(0.85 0.09 264);
--fe-indigo-500: oklch(0.55 0.17 264);
--fe-indigo-600: oklch(0.49 0.18 264);
--fe-indigo-700: oklch(0.43 0.17 264);
/* Status — GREEN (pass / match / completed) */
--fe-green-50: oklch(0.96 0.04 152);
--fe-green-100: oklch(0.92 0.07 152);
--fe-green-200: oklch(0.84 0.11 152);
--fe-green-500: oklch(0.62 0.14 152);
--fe-green-600: oklch(0.54 0.13 152);
--fe-green-700: oklch(0.45 0.11 152);
/* Status — AMBER (review) */
--fe-amber-50: oklch(0.96 0.05 82);
--fe-amber-100: oklch(0.93 0.09 82);
--fe-amber-200: oklch(0.87 0.13 82);
--fe-amber-500: oklch(0.77 0.15 75);
--fe-amber-600: oklch(0.66 0.14 67);
--fe-amber-700: oklch(0.54 0.12 62);
/* Status — RED (block / differences / failed) */
--fe-red-50: oklch(0.96 0.03 25);
--fe-red-100: oklch(0.93 0.06 25);
--fe-red-200: oklch(0.86 0.1 25);
--fe-red-500: oklch(0.62 0.21 25);
--fe-red-600: oklch(0.55 0.21 26);
--fe-red-700: oklch(0.48 0.19 27);
/* Status — SLATE (skip / incomplete / pending / cancelled) */
--fe-slate-50: oklch(0.955 0.004 265);
--fe-slate-100: oklch(0.93 0.006 265);
--fe-slate-200: oklch(0.88 0.008 265);
--fe-slate-500: oklch(0.6 0.018 265);
--fe-slate-600: oklch(0.5 0.02 265);
--fe-slate-700: oklch(0.42 0.02 265);
/* ====================================================================== */
/* COLOR — semantic aliases (LIGHT, the default) */
/* ====================================================================== */
--fe-bg: var(--fe-neutral-50); /* app canvas */
--fe-surface: var(--fe-neutral-0); /* cards, panels */
--fe-surface-2: var(--fe-neutral-25); /* subtle raised / table head */
--fe-surface-3: var(--fe-neutral-100); /* inset / hover */
--fe-border-color: var(--fe-neutral-200);
--fe-border-strong: var(--fe-neutral-300);
--fe-text: var(--fe-neutral-900);
--fe-text-muted: var(--fe-neutral-600);
--fe-text-subtle: var(--fe-neutral-500);
--fe-text-on-dark: var(--fe-neutral-50);
/* Top nav (carries the legacy dark-navy identity forward) */
--fe-nav-bg: var(--fe-neutral-950);
--fe-nav-fg: oklch(0.82 0.015 265);
--fe-nav-fg-strong: var(--fe-neutral-0);
--fe-nav-border: oklch(0.3 0.03 265);
/* Accent */
--fe-accent: var(--fe-indigo-600);
--fe-accent-hover: var(--fe-indigo-700);
--fe-accent-weak: var(--fe-indigo-50);
--fe-accent-text: var(--fe-indigo-700);
--fe-link: var(--fe-indigo-600);
/* Primary button — carries the dark-ink legacy button forward */
--fe-btn-primary-bg: var(--fe-neutral-900);
--fe-btn-primary-fg: var(--fe-neutral-0);
--fe-btn-primary-hover: var(--fe-neutral-800);
/* Focus ring (accessibility — visible, 3px, accent-tinted) */
--fe-focus-ring: 0 0 0 3px oklch(0.55 0.17 264 / 0.4);
--fe-focus-ring-offset: var(--fe-surface);
/* ---- Semantic STATUS map --------------------------------------------- */
/* Each status has: -solid (chip/dot fill, on-dark text), -bg (soft pill bg),
-text (text on soft bg / standalone label), -border. */
/* PASS / MATCH / COMPLETED */
--fe-pass-solid: var(--fe-green-500);
--fe-pass-bg: var(--fe-green-50);
--fe-pass-text: var(--fe-green-700);
--fe-pass-border: var(--fe-green-200);
/* REVIEW */
--fe-review-solid: var(--fe-amber-500);
--fe-review-bg: var(--fe-amber-50);
--fe-review-text: var(--fe-amber-700);
--fe-review-border: var(--fe-amber-200);
/* BLOCK / DIFFERENCES / FAILED */
--fe-block-solid: var(--fe-red-500);
--fe-block-bg: var(--fe-red-50);
--fe-block-text: var(--fe-red-700);
--fe-block-border: var(--fe-red-200);
/* SKIP / INCOMPLETE / PENDING / CANCELLED */
--fe-skip-solid: var(--fe-slate-500);
--fe-skip-bg: var(--fe-slate-100);
--fe-skip-text: var(--fe-slate-700);
--fe-skip-border: var(--fe-slate-200);
/* RUNNING (uses brand accent so motion reads as "active") */
--fe-running-solid: var(--fe-indigo-500);
--fe-running-bg: var(--fe-indigo-50);
--fe-running-text: var(--fe-indigo-700);
--fe-running-border: var(--fe-indigo-200);
/* ---- Elevation / shadows --------------------------------------------- */
--fe-shadow-xs: 0 1px 2px oklch(0.24 0.035 265 / 0.06);
--fe-shadow-sm: 0 1px 2px oklch(0.24 0.035 265 / 0.06), 0 1px 3px oklch(0.24 0.035 265 / 0.08);
--fe-shadow-md: 0 2px 4px oklch(0.24 0.035 265 / 0.05), 0 6px 16px -4px oklch(0.24 0.035 265 / 0.12);
--fe-shadow-lg: 0 8px 32px -8px oklch(0.24 0.035 265 / 0.22);
/* ---- Layout ----------------------------------------------------------- */
--fe-nav-height: 56px;
--fe-container: 1200px;
--fe-container-narrow: 760px;
}
/* ========================================================================== */
/* DARK MODE — opt-in. Flip surfaces to a deep navy scale; status hues stay */
/* recognisable but are lightened for contrast on dark. */
/* ========================================================================== */
:root[data-theme="dark"] {
--fe-bg: oklch(0.2 0.03 265);
--fe-surface: oklch(0.245 0.032 265);
--fe-surface-2: oklch(0.275 0.032 265);
--fe-surface-3: oklch(0.31 0.032 265);
--fe-border-color: oklch(0.34 0.03 265);
--fe-border-strong: oklch(0.42 0.03 265);
--fe-text: oklch(0.95 0.006 265);
--fe-text-muted: oklch(0.74 0.014 265);
--fe-text-subtle: oklch(0.62 0.016 265);
--fe-nav-bg: oklch(0.165 0.032 265);
--fe-nav-fg: oklch(0.78 0.016 265);
--fe-nav-fg-strong: var(--fe-neutral-0);
--fe-nav-border: oklch(0.32 0.03 265);
--fe-accent: var(--fe-indigo-500);
--fe-accent-hover: var(--fe-indigo-200);
--fe-accent-weak: oklch(0.36 0.08 264);
--fe-accent-text: oklch(0.84 0.09 264);
--fe-link: oklch(0.78 0.11 264);
--fe-btn-primary-bg: var(--fe-neutral-0);
--fe-btn-primary-fg: var(--fe-neutral-950);
--fe-btn-primary-hover: oklch(0.88 0.01 265);
/* status soft-bgs become translucent tints on dark surfaces */
--fe-pass-bg: oklch(0.45 0.1 152 / 0.18);
--fe-pass-text: oklch(0.82 0.13 152);
--fe-pass-border: oklch(0.5 0.1 152 / 0.4);
--fe-review-bg: oklch(0.6 0.12 75 / 0.2);
--fe-review-text: oklch(0.85 0.13 80);
--fe-review-border: oklch(0.6 0.12 75 / 0.42);
--fe-block-bg: oklch(0.55 0.18 25 / 0.2);
--fe-block-text: oklch(0.82 0.14 27);
--fe-block-border: oklch(0.58 0.18 25 / 0.45);
--fe-skip-bg: oklch(0.5 0.02 265 / 0.28);
--fe-skip-text: oklch(0.78 0.015 265);
--fe-skip-border: oklch(0.55 0.02 265 / 0.45);
--fe-running-bg: oklch(0.5 0.14 264 / 0.22);
--fe-running-text: oklch(0.82 0.12 264);
--fe-running-border: oklch(0.55 0.15 264 / 0.45);
--fe-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.3);
--fe-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.4);
--fe-shadow-md: 0 4px 16px -4px oklch(0 0 0 / 0.5);
--fe-shadow-lg: 0 8px 32px -8px oklch(0 0 0 / 0.6);
}