/* ============================================================
Sturgeon's Roofing Solutions — Design Tokens
Drop into a hand-coded static site. Drives the visual system
defined in brand-dna.md. Colours sampled from the logo file;
exact brand red to confirm from master vector (see [TO CONFIRM]).
============================================================ */
/* Fonts — load once in your (or keep this @import):
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800;900&family=Inter:wght@400;500;600&display=swap');
:root {
/* ---- Brand palette (raw) ---- */
--ssr-red: #D8231C; /* Sturgeon Red — primary, the one shout */
--ssr-red-deep: #B11C16; /* Deep Red — hover / pressed / depth */
--ssr-black: #0A0A0A; /* Carbon Black — primary background */
--ssr-slate: #1C1F23; /* Slate — secondary dark surface */
--ssr-panel: #14161A; /* Panel — darker card surface */
--ssr-white: #FFFFFF; /* White — text on dark, wordmark, mark */
--ssr-mist: #B8BCC2; /* Mist Grey — muted text on dark */
--ssr-ink: #15171B; /* Ink — body text on light */
--ssr-cloud: #F5F6F7; /* Cloud — light surface / section bg */
--ssr-line-dark: #262A2F; /* borders on dark */
--ssr-line-light: #E3E5E9; /* borders on light */
/* ---- Semantic aliases (use these in components) ---- */
--bg: var(--ssr-black);
--bg-elevated: var(--ssr-slate);
--surface: var(--ssr-panel);
--surface-light: var(--ssr-cloud);
--text: var(--ssr-white);
--text-muted: var(--ssr-mist);
--text-on-light: var(--ssr-ink);
--accent: var(--ssr-red);
--accent-hover: var(--ssr-red-deep);
--on-accent: var(--ssr-white); /* text on red — AA (~5:1) */
--border: var(--ssr-line-dark);
--border-light: var(--ssr-line-light);
--focus-ring: var(--ssr-red);
/* ---- Typography ---- */
--font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--weight-head: 800; /* ExtraBold headlines */
--weight-head-max: 900; /* Black for hero */
--weight-body: 400;
--weight-medium: 500;
--case-head: uppercase; /* headlines are all-caps */
--tracking-label: 0.22em; /* light, wide-tracked sub-label / eyebrows */
--tracking-head: 0.005em;
--leading-head: 1.02;
--leading-body: 1.55;
/* ---- Type scale (fluid) ---- */
--fs-display: clamp(2.6rem, 6vw, 4.75rem);
--fs-h1: clamp(2rem, 4.5vw, 3.25rem);
--fs-h2: clamp(1.5rem, 3vw, 2.25rem);
--fs-h3: clamp(1.2rem, 2vw, 1.5rem);
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-label: 0.78rem;
/* ---- Radius, shadow, spacing ---- */
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 16px;
--shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
--shadow-red: 0 10px 28px rgba(216, 35, 28, 0.30);
--maxw: 1180px;
--gutter: clamp(20px, 5vw, 48px);
}
/* ---- Optional base hooks (remove if you have your own reset) ---- */
/*
body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: var(--leading-body); }
h1, h2, h3 { font-family: var(--font-head); font-weight: var(--weight-head); text-transform: var(--case-head); line-height: var(--leading-head); }
.eyebrow { font-family: var(--font-head); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
.btn { background: var(--accent); color: var(--on-accent); border-radius: var(--radius); }
.btn:hover { background: var(--accent-hover); }
.accent-word { color: var(--accent); }
*/