64 lines
2.6 KiB
CSS
64 lines
2.6 KiB
CSS
/* CluPilot customer-portal design tokens — refined enterprise, light, single
|
|
orange accent. Framework-neutral CSS custom properties (work in Tailwind v3
|
|
or v4). Values calibrated for AA contrast. See design handoff §6. */
|
|
:root {
|
|
/* Surfaces (light, slightly cool) */
|
|
--bg: #f6f7f9;
|
|
--surface: #ffffff;
|
|
--surface-2: #f1f3f5;
|
|
--surface-hover: #f8f9fb;
|
|
|
|
/* Lines */
|
|
--border: #e4e7ec;
|
|
--border-strong: #d0d5dd;
|
|
|
|
/* Text */
|
|
--text-strong: #101828;
|
|
--text: #344054;
|
|
--text-muted: #667085;
|
|
--text-faint: #98a2b3;
|
|
|
|
/* Accent = the single brand / interaction tone: orange */
|
|
--accent: #f97316; /* brand tone: decorative fills, borders, tints, focus */
|
|
--accent-hover: #ea6a0c;
|
|
--accent-active: #c2560a; /* AA-safe fill for white text on orange (~5:1) */
|
|
--accent-press: #a8480a; /* darker press/hover for accent-fill buttons */
|
|
--accent-subtle: #fff4ec;
|
|
--accent-border: #fed7aa;
|
|
--accent-ring: rgba(249, 115, 22, .35);
|
|
--on-accent: #ffffff;
|
|
/* Accent as TEXT on light surfaces (links, small labels) must be dark enough
|
|
for AA — #f97316 on white is only ~2.9:1, so text uses --accent-active. */
|
|
--accent-text: #c2560a;
|
|
|
|
/* Status semantics — only in badges/alerts, never a second decorative tone */
|
|
--success: #067a48; --success-bg: #ecfdf3; --success-border: #abefc6;
|
|
--success-bright: #30b15c; /* dots/rings/charts only (large marks, not small text) */
|
|
--warning: #b54708; --warning-bg: #fffaeb; --warning-border: #fedf89;
|
|
--danger: #b42318; --danger-bg: #fef3f2; --danger-border: #fecdca;
|
|
--info: #175cd3; --info-bg: #eff8ff; --info-border: #b2ddff;
|
|
|
|
/* Typography */
|
|
--font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
|
|
--text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px;
|
|
--text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px;
|
|
|
|
--lh-tight: 1.2; --lh-normal: 1.5;
|
|
--tracking-tight: -0.02em;
|
|
--tracking-label: 0.06em;
|
|
|
|
/* Radius / shadow / motion / focus */
|
|
--radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px;
|
|
|
|
--shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
|
|
--shadow-sm: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06);
|
|
--shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
|
|
|
|
--dur-fast: 120ms; --dur: 180ms; --dur-slow: 240ms;
|
|
--ease: cubic-bezier(.2, .6, .2, 1);
|
|
|
|
--focus-ring: 0 0 0 3px var(--accent-ring);
|
|
}
|