/* ============================================================
SD Guthrie International — Colour & Type Foundations
------------------------------------------------------------
Brand font is likely a custom/licensed geometric sans.
Nearest Google Fonts match in use here: "Hanken Grotesk".
Load in HTML :
============================================================ */
:root {
/* ---- Brand "Palm" core (from the official palette) ---- */
--palm-brown: #9C1006; /* deepest — heritage, depth */
--palm-red: #C90C0F; /* PRIMARY brand red */
--palm-orange: #E84626; /* energetic accent (logo highlight) */
/* ---- Secondary / supporting ---- */
--sustain-green: #004D24; /* forest — sustainability, RSPO */
--sage: #394D42; /* muted deep sage */
--signal-blue: #0164CA; /* links, info, traceability */
--golden: #FED75E; /* harvest yellow — highlights */
/* Tints of the secondaries (palette shows 75/50/25%) */
--sustain-green-75: #3F7553;
--sage-75: #6B7C72;
--signal-blue-75: #4189D6;
--golden-50: #FEEBAF;
/* ---- Warm neutral ramp (paper → ink) ---- */
--n-0: #FFFFFF;
--n-25: #FBF9F7; /* page tint — barely-warm paper */
--n-50: #F4F1EE;
--n-100: #E9E4DF;
--n-200: #D8D2CC;
--n-300: #BDB6AF;
--n-400: #968F88;
--n-500: #6E6862;
--n-600: #4E4945;
--n-700: #332F2C;
--n-800: #1E1B19;
--n-900: #0E0C0B; /* near-black ink */
--black: #000000;
/* ---- Semantic surface / foreground ---- */
--bg: var(--n-25);
--bg-raised: var(--n-0);
--bg-sunken: var(--n-50);
--bg-ink: var(--n-900); /* dark sections */
--bg-brand: var(--palm-red);
--fg-1: var(--n-900); /* primary text */
--fg-2: var(--n-600); /* secondary text */
--fg-3: var(--n-400); /* tertiary / captions */
--fg-on-dark: rgba(255,255,255,0.94);
--fg-on-dark-2: rgba(255,255,255,0.66);
--fg-on-brand: #FFFFFF;
--border: var(--n-100);
--border-strong: var(--n-200);
--hairline: rgba(14,12,11,0.08);
/* ---- Semantic states ---- */
--accent: var(--palm-red);
--accent-hover: #B00A0D; /* red darkened for hover */
--accent-press: #970A0C;
--link: var(--signal-blue);
--success: var(--sustain-green);
--warning: var(--palm-orange);
--info: var(--signal-blue);
/* ---- Typography families ---- */
--font-sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-display: "Hanken Grotesk", system-ui, sans-serif; /* same family, heavier weights */
--font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* ---- Type scale (1.250 major-third-ish, tuned) ---- */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-md: 18px;
--text-lg: 21px;
--text-xl: 26px;
--text-2xl: 33px;
--text-3xl: 42px;
--text-4xl: 54px;
--text-5xl: 68px;
--text-6xl: 86px;
--leading-tight: 1.08;
--leading-snug: 1.22;
--leading-normal:1.5;
--leading-relaxed:1.65;
--tracking-tight: -0.02em;
--tracking-snug: -0.011em;
--tracking-normal: 0em;
--tracking-wide: 0.04em;
--tracking-caps: 0.12em; /* eyebrows / overlines */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold:600;
--weight-bold: 700;
--weight-extrabold:800;
/* ---- Spacing (4px base) ---- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
--space-32: 128px;
/* ---- Radii ---- */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 28px;
--radius-pill: 999px;
/* ---- Elevation (warm-tinted, soft) ---- */
--shadow-xs: 0 1px 2px rgba(30,27,25,0.06);
--shadow-sm: 0 1px 2px rgba(30,27,25,0.06), 0 2px 6px rgba(30,27,25,0.05);
--shadow-md: 0 4px 10px rgba(30,27,25,0.07), 0 12px 24px rgba(30,27,25,0.06);
--shadow-lg: 0 10px 24px rgba(30,27,25,0.10), 0 28px 56px rgba(30,27,25,0.10);
--shadow-brand: 0 10px 30px rgba(201,12,15,0.28);
/* ---- Motion ---- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 140ms;
--dur: 240ms;
--dur-slow: 420ms;
}
/* ============================================================
Semantic element styles — apply via classes
============================================================ */
.sdgi-eyebrow {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: var(--text-sm);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--accent);
}
.sdgi-h1 {
font-family: var(--font-display);
font-weight: var(--weight-extrabold);
font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-1);
}
.sdgi-h2 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
color: var(--fg-1);
}
.sdgi-h3 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--text-xl);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
color: var(--fg-1);
}
.sdgi-lead {
font-family: var(--font-sans);
font-weight: var(--weight-regular);
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--fg-2);
}
.sdgi-body {
font-family: var(--font-sans);
font-weight: var(--weight-regular);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--fg-2);
}
.sdgi-small {
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--fg-3);
}
.sdgi-mono {
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0;
color: var(--fg-2);
}