/* =============================================================
NEKTAR DESIGN SYSTEM — Colors & Type
Source of truth: Nektar.Web/Scripts/MVC/src/skins/main.css
Inter loads from Google Fonts via @import below — link this
stylesheet and the font follows. For best perf in production,
add these to instead (parallel handshake) and the
@import becomes a no-op:
============================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
:root {
/* ---------- BRAND ---------- */
--nk-brand: #ffcb05; /* Nektar yellow (logo + accents) */
--nk-brand-alt: #f7c100; /* Theme yellow (used in --main-theme-color) */
--nk-brand-muted: rgba(249, 136, 6, 0.1);
/* Sidebar background — flat charcoal */
--nk-nav: #272727;
--nk-nav-gradient: #272727; /* legacy alias */
/* ---------- NEUTRALS / SURFACES ---------- */
--bg-1: #f0f0f0; /* primary-background-color (body) */
--bg-2: #ffffff; /* secondary-background-color (cards) */
--bg-3: #e4e4e4; /* tertiary-background-color */
--bg-4: #e6e6e6; /* quaternary-background-color */
--bg-muted: #f1f5f9; /* shadcn-ish muted */
--bg-dark: #23262b; /* login splash backdrop */
/* Text */
--fg-1: #333333; /* primary text */
--fg-2: #999999; /* secondary text */
--fg-3: #cacaca; /* tertiary text */
--fg-on-dark: #ffffff;
--fg-on-dark-muted: rgba(255, 255, 255, 0.6);
/* Borders */
--border-1: #dddddd; /* primary border */
--border-2: rgba(221, 221, 221, 0.58);
--border-strong: #adadad; /* button hover border */
/* Links
--link points at --info so anchors pick up the brand info blue.
The --link-info* family is kept for the explicit "primary action" usage. */
--link: var(--info);
--link-info: var(--info); /* alias — "info" / primary button color */
--link-info-hover: var(--info-hover);
--link-info-border: var(--info-strong);
/* ---------- BUTTONS ---------- */
--btn-bg: #ffffff;
--btn-fg: #686868;
--btn-bg-hover: #e6e6e6;
--btn-border-hover: #adadad;
/* ---------- TABLES ---------- */
--row-selected: #dfdfdf;
--row-grouped: #e2e2e2;
--row-hover: #eeeeee;
--row-alt: #f7f7f7;
/* ---------- CONTROLS ---------- */
--control-focus: #f4f5f7;
--control-disabled: #d3d3d3;
/* ---------- STATUS / SEMANTIC ----------
Each tone has 3 stops:
--{name} solid · icon · dot · button fill (opaque)
--{name}-soft wash · banner bg · badge pill · modal pane (translucent — adapts to surface)
--{name}-border mid-tone · banner border · focus ring · accent (translucent — adapts to surface)
Plus -strong / -hover stops for action-color foregrounds.
soft + border are rgba so they tint into ANY surface, light or dark.
On white they read ~#ECF3FB etc.; on charcoal they appear as a subtle
colored wash. Solid + strong stops stay opaque since they're foreground. */
/* Info */
--info: #519dd8;
--info-soft: rgba(81, 157, 216, 0.10);
--info-border: rgba(81, 157, 216, 0.35);
--info-strong: #368fcb; /* legacy alias — kept for buttons */
--info-hover: #337cc6;
/* Success */
--success: #19b698;
--success-soft: rgba(25, 182, 152, 0.10);
--success-border: rgba(25, 182, 152, 0.35);
--success-strong: #0fac8e;
--success-hover: #23c0a2;
/* Warning */
--warning: #ff9d23;
--warning-soft: rgba(255, 157, 35, 0.12);
--warning-border: rgba(255, 157, 35, 0.40);
--warning-strong: #dc881e;
/* Danger */
--danger: #ea6153;
--danger-soft: rgba(234, 97, 83, 0.10);
--danger-border: rgba(234, 97, 83, 0.35);
--danger-strong: #c8553a;
/* Neutral (placeholder / draft / on-hold) */
--neutral: #999999;
--neutral-soft: rgba(0, 0, 0, 0.05);
--neutral-border: rgba(0, 0, 0, 0.15);
/* Pending (awaiting / queued / scheduled — amber-yellow) */
--pending: #e0a800;
--pending-soft: rgba(224, 168, 0, 0.12);
--pending-border: rgba(224, 168, 0, 0.40);
/* Brand wash — rare, for "New" pills and brand-tinted callouts */
--brand-soft: rgba(255, 203, 5, 0.15);
--brand-border: rgba(255, 203, 5, 0.45);
/* ---------- Legacy aliases ---------- */
--yellow: #ffcc00;
--yellow-muted: rgba(255, 204, 0, 0.15);
--red: #ff0000;
--red-muted: rgba(255, 0, 0, 0.13);
/* ---------- OVERLAY ---------- */
--watermark: rgba(0, 0, 0, 0.08);
--loading-overlay: rgba(255, 255, 255, 0.5);
--nk-scrim-bg: rgba(20, 20, 20, 0.45);
/* ---------- TYPOGRAPHY ---------- */
--font-sans: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont,
"Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Type scale — B2B SaaS standard
Semibold-led headings, step-of-4 progression, 13 px default body.
Aligns with Linear / Stripe Dashboard / Vercel conventions — but
keeps Nektar's dense 13 px body since the app is data-heavy. */
--fs-caption: 11px; /* metadata, timestamps */
--fs-hint: 12px; /* helper text, secondary copy */
--fs-body: 13px; /* DEFAULT body */
--fs-body-lg: 16px; /* reading content (modal body, prose, onboarding) */
--fs-h5: 14px; /* group label — one step above body */
--fs-h4: 16px; /* card title, subsection */
--fs-h3: 20px; /* panel & modal title */
--fs-h2: 24px; /* section title */
--fs-h1: 32px; /* page title */
--fs-display: 48px; /* hero / empty state (rare) */
/* Aliases (Tailwind-style scale for convenience) */
--fs-xs: 11px;
--fs-sm: 12px;
--fs-base: 13px;
--fs-md: 13px;
--fs-lg: 16px;
--fs-xl: 20px;
--fs-2xl: 24px;
--fs-3xl: 32px;
--fs-4xl: 48px;
/* Line heights */
--lh-tight: 1.2; /* @kind font */ /* Display, H1, H2 */
--lh-snug: 1.3; /* @kind font */ /* H3, H4 */
--lh-dense: 1.45; /* @kind font */ /* Body SM (tables) */
--lh-base: 1.5; /* @kind font */ /* Body */
--lh-relaxed: 1.55; /* @kind font */ /* Body LG (reading) */
/* Letter spacing */
--ls-tighter: -0.025em; /* @kind font */ /* Display */
--ls-tight: -0.015em; /* @kind font */ /* H1, H2 */
--ls-snug: -0.005em; /* @kind font */ /* H3 */
--ls-normal: 0; /* @kind font */
--ls-wide: 0.06em; /* @kind font */ /* uppercase eyebrow */
/* Font weights — no light (300); semibold-led */
--fw-regular: 400; /* @kind font */ /* body */
--fw-medium: 500; /* @kind font */ /* buttons, emphasized inline */
--fw-semibold: 600; /* @kind font */ /* all headings + labels + b/strong */
--fw-bold: 700; /* @kind font */ /* Display, eyebrow */
/* ---------- RADII ---------- */
--r-xs: 3px; /* dropdown menus */
--r-sm: 4px; /* buttons, inputs */
--r-md: 7px; /* cards, panels (accordion) */
--r-lg: 12px;
--r-pill: 999px;
/* ---------- SHADOWS ---------- */
--shadow-1: 0 1px 0 0 rgba(0, 0, 0, 0.04); /* panel default */
--shadow-2: 0 2px 4px rgba(0, 0, 0, 0.25); /* dropdown menus */
--shadow-3: 1px 1px 4px rgba(0, 0, 0, 0.22); /* submenu */
--shadow-tooltip: 0 0 2px rgba(0, 0, 0, 0.4);
/* ---------- SPACING (4 / 8 base) ---------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
/* ---------- LAYOUT ---------- */
--sidebar-w: 240px;
--sidebar-w-collapsed: 60px;
--topbar-h: 63px;
--btn-h: 36px;
--input-h: 36px;
}
/* =============================================================
SEMANTIC TYPE — drop-in usage
============================================================= */
html, body {
font-family: var(--font-sans);
font-size: var(--fs-base);
color: var(--fg-1);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--bg-1);
}
/* Headings — semibold across the board; bold only for Display + eyebrow */
.h-display,
h1.display {
font-size: var(--fs-display);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tighter);
}
h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h5, .h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); }
h6, .h6 { font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--fg-2); }
p { font-size: var(--fs-body); line-height: var(--lh-base); margin: 0 0 var(--sp-3); }
label {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
margin-bottom: 4px;
margin-top: 4px;
display: inline-block;
}
b, strong { font-weight: var(--fw-semibold); }
small, .text-muted { color: var(--fg-2); font-size: var(--fs-hint); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre {
font-family: var(--font-mono);
font-size: 12px;
background: var(--bg-muted);
padding: 2px 6px;
border-radius: var(--r-xs);
}