/* =================================================================
Salesdiary Design System — Colors, Type & Core Tokens
-----------------------------------------------------------------
Single source of truth. Import this in any HTML artifact:
Type stack: Rubik (UI) + JetBrains Mono (code). Load via the
Google Fonts below, or self-host from fonts/ if offline.
================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
/* =============================================================
BRAND COLORS
One primary blue. One teal. One navy. One color per state.
Info reuses primary blue — no separate info hue.
============================================================= */
--sd-blue-700: #043A67; /* hover / pressed for primary */
--sd-blue-600: #0762AD; /* primary brand — the only primary blue */
--sd-blue-100: #E1ECF5; /* soft tonal buttons, info pill bg, KPI tile bg */
--sd-blue-050: #F4F6FC; /* hover bg for ghost buttons */
--sd-teal-600: #17A2B8; /* wordmark, secondary actions, focus ring */
--sd-teal-100: #E3F4F6;
--sd-teal-050: #EEF6F5;
--sd-navy-900: #183153; /* wordmark "Sales", sidebar active accent */
--sd-navy-700: #3A6C87;
/* State (semantic) — one color per state */
--sd-green-600: #379862; /* success: approved, confirmed, sync OK */
--sd-green-100: #E1F0E7;
--sd-red-600: #E24260; /* error: reject, fail, destructive */
--sd-red-100: #FBE3E7;
--sd-amber-500: #F6A82C; /* warning: pending, action needed */
--sd-amber-100: #FEF2DF;
--sd-amber-text: #B3711A; /* warning text on light bg (≥4.5:1) */
/* =============================================================
NEUTRALS — Ink (text) & Line (borders)
============================================================= */
--sd-ink-900: #1D1D1D; /* page titles, primary text */
--sd-ink-800: #2D2D2D; /* body text, table cells */
--sd-ink-700: #2E384D; /* labels in cards / forms */
--sd-ink-500: #5D5D5D; /* secondary text, button-grey */
--sd-ink-400: #7D7D7D; /* sidebar items, captions, caps eyebrows */
--sd-ink-300: #9D9D9D; /* placeholders */
--sd-ink-200: #B0BAC9; /* tab labels, disabled, override-default dot */
--sd-line-300: #D7DDE6; /* default borders */
--sd-line-200: #E5E5E5;
--sd-line-100: #EFF1F4; /* hover bg, inner dividers */
/* =============================================================
SURFACES
============================================================= */
--sd-bg-app: #F5F7F9; /* body background under cards */
--sd-bg-panel: #FFFFFF; /* cards, modals, header */
--sd-bg-soft: #F4F6FC; /* table headers, inset blocks */
--sd-bg-softer: #FBFBFB; /* ag-grid alt rows, modal footer */
/* =============================================================
RADII
============================================================= */
--sd-radius-xs: 3px;
--sd-radius-sm: 4px; /* inputs, buttons, badges, code chip */
--sd-radius-md: 6px; /* smaller cards, callouts */
--sd-radius-lg: 10px; /* surfaces, modals, KPI shell */
--sd-radius-pill: 9999px; /* status badges, toolbar CTAs */
/* =============================================================
SHADOWS
============================================================= */
--sd-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--sd-shadow-md: 0 10px 20px rgba(46,91,255,0.07); /* default card */
--sd-shadow-lg: 0 6px 13px rgba(0,0,0,0.19); /* modal */
--sd-shadow-savebar: 0 4px 12px rgba(15,28,46,.08);
/* =============================================================
SPACING — 4-pt scale, snap every gap to one of these.
============================================================= */
--sd-space-1: 4px;
--sd-space-2: 8px;
--sd-space-3: 12px;
--sd-space-4: 16px;
--sd-space-5: 20px;
--sd-space-6: 24px;
--sd-space-8: 32px;
--sd-space-12: 48px;
/* =============================================================
TYPOGRAPHY — base
============================================================= */
--sd-font: 'Rubik', 'Proxima Nova', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
--sd-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
/* Weights in use — 400 body, 500 UI labels & table headers & button, 600 page/section titles.
300 and 700 are intentionally NOT loaded. */
--sd-fw-regular: 400;
--sd-fw-medium: 500;
--sd-fw-semibold: 600;
/* =============================================================
SEMANTIC TYPE TOKENS — match the audit spec exactly.
Use these names (h1, h2, body, small, caps, mono) instead
of raw size values when writing new component CSS.
============================================================= */
--sd-h1-size: 28px; --sd-h1-weight: 600; --sd-h1-track: -0.01em;
--sd-h2-size: 20px; --sd-h2-weight: 600; --sd-h2-track: -0.005em;
--sd-h3-size: 18px; --sd-h3-weight: 500;
--sd-body-size: 14px; --sd-body-weight: 400; --sd-body-line: 1.5;
--sd-small-size: 12px; --sd-small-weight: 400;
--sd-caps-size: 11px; --sd-caps-weight: 500; --sd-caps-track: 0.08em;
--sd-mono-size: 12px;
}
/* =================================================================
BASE
================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--sd-font);
font-size: var(--sd-body-size);
font-weight: var(--sd-body-weight);
line-height: var(--sd-body-line);
color: var(--sd-ink-900);
background: var(--sd-bg-app);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* =================================================================
SEMANTIC TYPE CLASSES — use directly in markup.
These mirror the type specimen card in preview/Type-Scale.html.
================================================================= */
.sd-h1, h1.sd {
font-family: var(--sd-font);
font-size: var(--sd-h1-size);
font-weight: var(--sd-h1-weight);
letter-spacing: var(--sd-h1-track);
color: var(--sd-ink-900);
margin: 0;
}
.sd-h2, h2.sd {
font-family: var(--sd-font);
font-size: var(--sd-h2-size);
font-weight: var(--sd-h2-weight);
letter-spacing: var(--sd-h2-track);
color: var(--sd-ink-900);
margin: 0;
}
.sd-h3, h3.sd {
font-family: var(--sd-font);
font-size: var(--sd-h3-size);
font-weight: var(--sd-h3-weight);
color: var(--sd-ink-900);
margin: 0;
}
.sd-body, p.sd {
font-family: var(--sd-font);
font-size: var(--sd-body-size);
font-weight: var(--sd-body-weight);
line-height: var(--sd-body-line);
color: var(--sd-ink-800);
margin: 0;
}
.sd-small {
font-family: var(--sd-font);
font-size: var(--sd-small-size);
font-weight: var(--sd-small-weight);
color: var(--sd-ink-500);
}
.sd-caps {
font-family: var(--sd-font);
font-size: var(--sd-caps-size);
font-weight: var(--sd-caps-weight);
text-transform: uppercase;
letter-spacing: var(--sd-caps-track);
color: var(--sd-ink-400);
}
.sd-mono {
font-family: var(--sd-mono);
font-size: var(--sd-mono-size);
color: var(--sd-ink-500);
}
/* =================================================================
FOCUS RING — accessibility default.
================================================================= */
:where(button, [role="button"], a, input, select, textarea):focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(23,162,184,.30);
border-radius: var(--sd-radius-sm);
}