/* ============================================================================
Slyder Consulting Group — Brand Design Tokens
Single source of truth for color, type, spacing, and component primitives.
Derived from the SCG brand style guide (v1).
Load AFTER a CSS reset and BEFORE component styles.
============================================================================ */
/* ---- Fonts (Google Fonts) --------------------------------------------------
Add to for best performance:
--------------------------------------------------------------------------- */
:root {
/* ---- Core palette ---- */
--scg-ink: #0A1419; /* primary background · nav · footer · ~60% */
--scg-slate: #13252E; /* cards · elevated sections on ink · ~30% */
--scg-slate-2: #1B333E; /* hover / second elevation on ink */
--scg-teal: #14B8A6; /* brand: links · active · logo · key stats */
--scg-amber: #F0A93B; /* signal: primary CTA · one hero highlight · ~10% */
--scg-paper: #F5F7F8; /* light sections · body text on dark */
/* ---- Teal ramp (tints, borders, hovers, chart fills) ---- */
--scg-teal-50: #E1F5F2;
--scg-teal-100: #9FE3DA;
--scg-teal-200: #5DCFC0;
--scg-teal-500: #14B8A6; /* = --scg-teal */
--scg-teal-600: #0E8177; /* teal text on light · teal button hover */
--scg-teal-800: #0A5A53;
--scg-teal-900: #063A35;
/* ---- Amber (single accent + hover) ---- */
--scg-amber-500: #F0A93B; /* = --scg-amber */
--scg-amber-600: #E39A28; /* primary button hover */
--scg-amber-text: #3A2705; /* dark text on amber */
--scg-amber-text-onlight: #9A6410; /* amber-family text on light bg */
/* ---- Neutral / text ramp (for use on ink) ---- */
--scg-text-primary: #F5F7F8; /* = paper */
--scg-text-soft: #B9C7CE; /* muted body on ink */
--scg-text-dim: #8FA3AC; /* labels · captions on ink */
--scg-border: #2A3B44; /* hairline borders on ink */
--scg-border-ghost: #3A4A52; /* ghost button border */
/* ---- Text on light sections (paper backgrounds) ---- */
--scg-ink-text-primary: #0A1419;
--scg-ink-text-secondary: #3C4A50;
--scg-ink-text-muted: #7A888E;
--scg-border-light: #E1E6E8;
/* ---- Status / semantic — STATUS ONLY, never branding ---- */
--scg-success: #2FBF71;
--scg-warning: #F0A93B;
--scg-danger: #E24B4A; /* reserve red for genuine alerts, never decoration */
--scg-success-bg: #E4F7EF; --scg-success-text: #177A4E; --scg-success-border: #BEE9D3;
--scg-danger-bg: #FCEAEA; --scg-danger-text: #B23230; --scg-danger-border: #F3CFCE;
--scg-warning-bg: rgba(240,169,59,.16); --scg-warning-text: #9A6410;
/* ---- Badge fills ---- */
--scg-badge-brand-bg: rgba(20,184,166,.14);
--scg-badge-brand-text: #0E8177;
--scg-badge-brand-border: rgba(20,184,166,.30);
--scg-badge-neutral-bg: #EAEEEF;
--scg-badge-neutral-text: #4A585E;
--scg-badge-neutral-border: #D8DEE0;
/* ---- Typography ---- */
--scg-font-display: "Space Grotesk", system-ui, sans-serif; /* display + headings */
--scg-font-body: "Inter", system-ui, -apple-system, sans-serif; /* body + UI + labels */
--scg-tracking-tight: -0.02em; /* display / headings */
--scg-tracking-label: 0.10em; /* eyebrows / uppercase labels */
--scg-fw-body: 400;
--scg-fw-medium: 500;
--scg-fw-strong: 600;
--scg-fw-display: 700;
/* Type scale */
--scg-fs-display: 30px;
--scg-fs-h1: 30px;
--scg-fs-h2: 21px;
--scg-fs-h3: 15px;
--scg-fs-body: 15px;
--scg-fs-small: 13px;
--scg-fs-label: 12px;
--scg-lh-body: 1.6;
--scg-lh-tight: 1.2;
/* ---- Radius ---- */
--scg-radius-sm: 6px;
--scg-radius: 9px; /* buttons */
--scg-radius-card: 12px;
--scg-radius-lg: 16px;
--scg-radius-pill: 20px; /* badges */
/* ---- Spacing scale ---- */
--scg-space-1: 4px;
--scg-space-2: 8px;
--scg-space-3: 12px;
--scg-space-4: 16px;
--scg-space-5: 22px;
--scg-space-6: 32px;
--scg-space-7: 44px; /* section horizontal padding */
}
/* ============================================================================
Optional helpers
NOTE: the base primitives (body / h1-h6 / a) that shipped with this file
were removed for this site — assets/styles.css already carries the global
reset, body, heading, and link base that every page depends on, and it
consumes these tokens. Tokens + component classes below are the contract.
============================================================================ */
/* Eyebrow / uppercase label */
.scg-eyebrow {
font-family: var(--scg-font-body);
font-weight: var(--scg-fw-strong);
font-size: var(--scg-fs-label);
letter-spacing: var(--scg-tracking-label);
text-transform: uppercase;
color: var(--scg-teal);
}
/* Elevated surface on ink */
.scg-card {
background: var(--scg-slate);
border-radius: var(--scg-radius-card);
color: var(--scg-text-primary);
}
/* ============================================================================
Buttons — radius 9px · padding 11px 22px · weight 600 · 14px
Rule: only ONE amber (primary) button per view.
============================================================================ */
.scg-btn {
font-family: var(--scg-font-body);
font-weight: var(--scg-fw-strong);
font-size: 14px;
line-height: 1;
border: none;
border-radius: var(--scg-radius);
padding: 11px 22px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background-color .15s ease, border-color .15s ease;
}
.scg-btn--primary { background: var(--scg-amber); color: var(--scg-amber-text); }
.scg-btn--primary:hover { background: var(--scg-amber-600); }
.scg-btn--brand { background: var(--scg-teal); color: #04211E; }
.scg-btn--brand:hover { background: var(--scg-teal-600); }
.scg-btn--ghost {
background: transparent;
color: var(--scg-paper);
border: 1px solid var(--scg-border-ghost);
}
.scg-btn--ghost:hover { background: var(--scg-slate-2); }
.scg-btn--link {
background: transparent;
color: var(--scg-teal);
padding: 11px 6px;
}
.scg-btn--link:hover { color: var(--scg-teal-600); }
/* Visible focus for keyboard users */
.scg-btn:focus-visible,
a:focus-visible {
outline: 2px solid var(--scg-teal);
outline-offset: 2px;
}
/* ============================================================================
Badges / pills — radius 20px · padding 5px 12px · 12px · weight 600
Status badges MUST pair color with a dot/icon, never color alone.
============================================================================ */
.scg-badge {
font-family: var(--scg-font-body);
font-weight: var(--scg-fw-strong);
font-size: 12px;
line-height: 1;
padding: 5px 12px;
border-radius: var(--scg-radius-pill);
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid transparent;
}
.scg-badge--brand {
background: var(--scg-badge-brand-bg);
color: var(--scg-badge-brand-text);
border-color: var(--scg-badge-brand-border);
}
.scg-badge--neutral {
background: var(--scg-badge-neutral-bg);
color: var(--scg-badge-neutral-text);
border-color: var(--scg-badge-neutral-border);
}
.scg-badge--highlight {
background: var(--scg-warning-bg);
color: var(--scg-warning-text);
border-color: rgba(240,169,59,.40);
}
.scg-badge--success {
background: var(--scg-success-bg);
color: var(--scg-success-text);
border-color: var(--scg-success-border);
}
.scg-badge--danger {
background: var(--scg-danger-bg);
color: var(--scg-danger-text);
border-color: var(--scg-danger-border);
}
/* Status dot — place inside success/danger badges */
.scg-badge__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
}
/* ============================================================================
Utility classes (optional convenience helpers)
============================================================================ */
.scg-bg-ink { background: var(--scg-ink); }
.scg-bg-slate { background: var(--scg-slate); }
.scg-bg-paper { background: var(--scg-paper); color: var(--scg-ink-text-primary); }
.scg-text-teal { color: var(--scg-teal); }
.scg-text-amber{ color: var(--scg-amber); }
.scg-text-soft { color: var(--scg-text-soft); }
.scg-text-dim { color: var(--scg-text-dim); }
/* On paper (light) sections, remap text + headings to dark ink */
.scg-bg-paper h1, .scg-bg-paper h2, .scg-bg-paper h3 { color: var(--scg-ink-text-primary); }
.scg-bg-paper p { color: var(--scg-ink-text-secondary); }