/* ============================================================================
GROOT GELUK GAME FARM & BUSH LODGE — design tokens
Version 0.1 — PROPOSED, NOT YET RATIFIED by Michael/Yolande (2026-08-15)
Author: Iris (Design System Architect, myPKA)
Companion doc: Deliverables/2026-08-15-grootgeluk-brand-direction.md
Canonical home on ratification: GL-003-design-system.md, Brand D (§G).
PROVENANCE: these hexes are DESIGNED, not sampled from photography.
The property video could not be decoded in the authoring session (no ffmpeg
available to Iris), so no frame-derived colour exists yet. Treat every value
as a proposal open to adjustment against real photography.
CONTRAST: every ratio in the comments was hand-computed (WCAG 2.x relative
luminance). Values were chosen with generous margins so that a rounding
difference cannot flip a pass/fail verdict. Vera re-verifies at gate time.
NO EXTERNAL RESOURCES. This file references no CDN, no @import, no url().
Fonts are self-hosted; see the @font-face block at the bottom (paths only).
============================================================================ */
:root {
color-scheme: light dark;
/* ---------------------------------------------------------------------
1. RAW RAMPS (never use a raw ramp token in a component — use the
semantic tokens in section 2. Ramps exist so semantics can be re-pointed.)
--------------------------------------------------------------------- */
/* --- bark: thorn-tree bark. The warm-neutral spine of the brand.
Slightly warm, never brown-orange, never a cool blue-grey. --- */
--gg-bark-50: #f7f3ec; /* winter-light canvas */
--gg-bark-100: #ede7de;
--gg-bark-200: #dbd3c8; /* hairline borders, rules */
--gg-bark-300: #bfb5aa; /* dark-mode secondary text */
--gg-bark-400: #9c9187;
--gg-bark-500: #7a6f65; /* NON-TEXT ONLY on light (4.43:1 on canvas) */
--gg-bark-600: #5c534b; /* light-mode muted text floor (6.79:1) */
--gg-bark-700: #443c36; /* light-mode body text (9.76:1) */
--gg-bark-800: #2e2925;
--gg-bark-900: #221e1b;
--gg-bark-950: #171412; /* ink / headings (16.58:1 on canvas) */
/* --- rooigrond: Waterberg red soil. THE signature. A red-brown earth,
deliberately NOT the orange every safari brand reaches for. --- */
--gg-rooi-950: #3a2119; /* dark-mode tint ground for accent chips */
--gg-rooi-100: #f5e2d6;
--gg-rooi-200: #e9c3ac;
--gg-rooi-300: #d79a78; /* dark-mode accent / link (7.34:1 on night) */
--gg-rooi-400: #bc6a45;
--gg-rooi-500: #a85434;
--gg-rooi-600: #94422c;
--gg-rooi-700: #7a3524; /* light-mode accent, links, CTA fill (8.04:1) */
--gg-rooi-800: #5e2a20; /* hover / pressed of rooi-700 */
--gg-rooi-900: #4a211a;
/* --- dam: still dam water at Kiewiet's / Kingfisher. Deep green-teal,
not sky blue. The calm counterweight to the red soil. --- */
--gg-dam-200: #cfe0da;
--gg-dam-300: #7fb3a3; /* dark-mode support (7.42:1 on night) */
--gg-dam-500: #4f8476;
--gg-dam-700: #2f5d52; /* light-mode support fill/text (6.76:1 canvas) */
--gg-dam-900: #1d3a33;
/* --- veld: bleached winter grass. A FILL, never a foreground.
This is the honest replacement for the memo cover's metallic gold. */
--gg-veld-100: #efe7d2; /* quiet section band */
--gg-veld-200: #e0d3b4;
--gg-veld-300: #cbb483; /* highlight fill; bears --gg-bark-950 at 9.08:1*/
/* --- night: genuinely dark skies. Dark-mode ground. Blue-charcoal,
never pure black — black kills the "sky" reading. --- */
--gg-night-1000:#0d1216; /* deepest — dark-mode footer */
--gg-night-950: #131a20;
--gg-night-900: #1c242c;
--gg-night-800: #28323b;
--gg-night-700: #33404a; /* dark-mode hairline border */
--gg-paper: #f2ede3; /* text on night (15.04:1) */
--gg-paper-dim: #ddd6c9; /* dark-mode body copy (~12:1 on night-950) */
/* ---------------------------------------------------------------------
2. SEMANTIC TOKENS — LIGHT (default). Components use ONLY these.
--------------------------------------------------------------------- */
--gg-canvas: var(--gg-bark-50); /* page ground */
--gg-surface: #ffffff; /* cards, panels */
--gg-surface-quiet: var(--gg-veld-100); /* alternating band */
--gg-surface-deep: var(--gg-bark-950); /* inverted section / footer*/
--gg-border: var(--gg-bark-200); /* 1px hairline */
--gg-border-strong: var(--gg-bark-500); /* 3:1+ mark border */
--gg-text: var(--gg-bark-950); /* headings 16.58:1 */
--gg-text-body: var(--gg-bark-700); /* body 9.76:1 */
--gg-text-muted: var(--gg-bark-600); /* captions 6.79:1 */
--gg-text-on-dark: var(--gg-paper);
--gg-text-on-accent: #ffffff; /* on rooi-700 8.89:1 */
--gg-accent: var(--gg-rooi-700); /* links, CTA fill, rules */
--gg-accent-hover: var(--gg-rooi-800);
--gg-accent-quiet: var(--gg-rooi-100); /* tint chip ground */
--gg-support: var(--gg-dam-700); /* birding/water/secondary */
--gg-highlight: var(--gg-veld-300); /* fill only, ink text */
--gg-focus-ring: var(--gg-rooi-700); /* 8.04:1 on canvas */
--gg-focus-halo: var(--gg-bark-50); /* outer ring over imagery */
--gg-status-error: #b3261e; /* 5.91:1 on canvas */
--gg-status-success: #1f6b3a; /* 5.89:1 on canvas */
--gg-status-warning: #8a5a12; /* 5.35:1 on canvas */
/* ---------------------------------------------------------------------
3. SPACING — 4px base. Use the ladder, never a raw px value.
--------------------------------------------------------------------- */
--gg-space-1: 0.25rem; /* 4px */
--gg-space-2: 0.5rem; /* 8px */
--gg-space-3: 0.75rem; /* 12px */
--gg-space-4: 1rem; /* 16px */
--gg-space-5: 1.25rem; /* 20px */
--gg-space-6: 1.5rem; /* 24px */
--gg-space-8: 2rem; /* 32px */
--gg-space-10: 2.5rem; /* 40px */
--gg-space-12: 3rem; /* 48px */
--gg-space-16: 4rem; /* 64px */
--gg-space-20: 5rem; /* 80px */
--gg-space-24: 6rem; /* 96px */
--gg-space-32: 8rem; /* 128px */
/* section vertical rhythm (fluid) */
--gg-section-y: clamp(3rem, 2rem + 5vw, 6rem);
--gg-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
--gg-measure: 68ch; /* long-form line-length cap */
--gg-container: 76rem; /* 1216px max content width */
--gg-container-narrow: 44rem;
/* ---------------------------------------------------------------------
4. RADII — deliberately small. Big radii read "SaaS app", not "farm".
--------------------------------------------------------------------- */
--gg-radius-xs: 2px; /* badges, tags */
--gg-radius-sm: 4px; /* buttons, inputs, images */
--gg-radius-md: 6px; /* cards (canonical) */
--gg-radius-lg: 8px; /* modals, hero panels */
--gg-radius-pill: 9999px;/* filter chips only */
/* ---------------------------------------------------------------------
5. SHADOWS — bushveld light is hard. Prefer a hairline border to a
shadow. Shadows are tinted from bark-950, never neutral black.
--------------------------------------------------------------------- */
--gg-shadow-1: 0 1px 2px rgba(23, 20, 18, 0.06);
--gg-shadow-2: 0 2px 6px rgba(23, 20, 18, 0.09), 0 1px 2px rgba(23, 20, 18, 0.05);
--gg-shadow-3: 0 8px 24px rgba(23, 20, 18, 0.14);
--gg-shadow-inset-image: inset 0 0 0 1px rgba(23, 20, 18, 0.08); /* keeps a
pale photo from bleeding into the canvas — mandatory on every ![]()
*/
/* ---------------------------------------------------------------------
6. TYPOGRAPHY
--------------------------------------------------------------------- */
--gg-font-display: "Fraunces", Georgia, "Times New Roman", serif;
--gg-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--gg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* fluid scale — 1.200 mobile → 1.250 desktop.
NOTE the `--gg-fs-*` prefix: font SIZES are `fs`, text COLOURS are
`--gg-text-*`. Do not merge the two namespaces — an earlier draft named the
body size `--gg-text-body`, which collided with the body-colour token in the
same :root block and silently destroyed body colour site-wide. */
--gg-fs-display: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
--gg-fs-h1: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
--gg-fs-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
--gg-fs-h3: clamp(1.25rem, 1.125rem + 0.6vw, 1.625rem);
--gg-fs-h4: 1.125rem;
--gg-fs-lede: 1.1875rem; /* 19px */
--gg-fs-body: 1.0625rem; /* 17px — older SA audience, phone-first */
--gg-fs-sm: 0.9375rem; /* 15px */
--gg-fs-xs: 0.8125rem; /* 13px — never body copy */
--gg-fs-overline:0.75rem;
--gg-leading-display: 1.05;
--gg-leading-head: 1.18;
--gg-leading-body: 1.65;
--gg-tracking-display: -0.015em;
--gg-tracking-overline: 0.14em;
--gg-weight-body: 400;
--gg-weight-medium: 600;
--gg-weight-display: 700;
}
/* ============================================================================
7. DARK MODE — OPT-IN ONLY.
The site MUST default to light. Dark is offered because "genuinely dark
skies" is a real brand asset (a stargazing page reads better dark), but it
is a user choice, never `prefers-color-scheme` auto-flipping the whole site.
Apply with .
============================================================================ */
[data-theme="dark"] {
--gg-canvas: var(--gg-night-950);
--gg-surface: var(--gg-night-900);
--gg-surface-quiet: var(--gg-night-800);
--gg-surface-deep: var(--gg-night-1000);
--gg-border: var(--gg-night-700);
--gg-border-strong: var(--gg-bark-400);
--gg-text: var(--gg-paper); /* 15.04:1 on night-950 */
--gg-text-body: var(--gg-paper-dim);
--gg-text-muted: var(--gg-bark-300); /* 8.70:1 on night-950
7.78:1 on night-900 */
--gg-text-on-dark: var(--gg-paper);
--gg-text-on-accent: var(--gg-bark-950); /* ink on rooi-300, 7.67:1 */
--gg-accent: var(--gg-rooi-300); /* 7.34:1 on night-950 */
--gg-accent-hover: var(--gg-rooi-200);
--gg-accent-quiet: var(--gg-rooi-950);
--gg-support: var(--gg-dam-300); /* 7.42:1 on night-950 */
--gg-highlight: var(--gg-veld-300); /* still ink-bearing fill */
--gg-focus-ring: var(--gg-rooi-300);
--gg-focus-halo: var(--gg-night-950);
--gg-status-error: #e8917f; /* 7.35:1 */
--gg-status-success: #7cc58f; /* 8.56:1 */
--gg-status-warning: #e0b970; /* 9.48:1 */
--gg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
--gg-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.55);
--gg-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.6);
/* MUST be re-declared: the light-mode inset hairline is near-black and is
invisible on a near-black ground, which would silently drop the one
treatment that is mandatory on every ![]()
. */
--gg-shadow-inset-image: inset 0 0 0 1px rgba(242, 237, 227, 0.14);
}
/* ============================================================================
8. CANONICAL PATTERNS — cite these verbatim in QA.
============================================================================ */
/* Focus: a single ring is enough on flat surfaces. Controls that can sit on
PHOTOGRAPHY (hero CTA, gallery arrows, booking bar) must carry the DUAL ring
— an accent ring plus a halo — because no single hue clears 3:1 against an
arbitrary photograph. Never remove the ring that looks redundant on the page
you happen to be building. */
.gg-focus:focus-visible {
outline: 3px solid var(--gg-focus-ring);
outline-offset: 2px;
}
.gg-focus-on-image:focus-visible {
outline: 3px solid var(--gg-focus-ring);
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--gg-focus-halo);
}
/* Card */
.gg-card {
background: var(--gg-surface);
border: 1px solid var(--gg-border);
border-radius: var(--gg-radius-md);
box-shadow: var(--gg-shadow-1);
padding: var(--gg-space-6);
}
/* Primary button */
.gg-btn-primary {
background: var(--gg-accent);
color: var(--gg-text-on-accent);
border-radius: var(--gg-radius-sm);
padding: var(--gg-space-3) var(--gg-space-6);
font-family: var(--gg-font-body);
font-weight: var(--gg-weight-medium);
min-height: 44px; /* SA phone-first audience; exceeds SC 2.5.8 */
}
.gg-btn-primary:hover { background: var(--gg-accent-hover); }
/* Every photograph carries the inset hairline — pale bushveld skies otherwise
dissolve into the canvas. */
.gg-photo {
border-radius: var(--gg-radius-sm);
box-shadow: var(--gg-shadow-inset-image);
display: block;
}
/* Motion: honour reduced motion globally. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================================
9. SELF-HOSTED FONTS — paths only, no CDN, CSP-safe.
Ship woff2 subsets (latin + latin-ext; latin-ext is REQUIRED for Afrikaans
diacritics: ê ë ï ô û á é í ó ú). Both faces are SIL OFL — self-hosting is
licensed. Preload only the two files above the fold.
============================================================================ */
@font-face {
font-family: "Fraunces";
src: url("/fonts/fraunces-var.woff2") format("woff2-variations");
font-weight: 400 700;
font-style: normal;
font-display: swap;
font-variation-settings: "SOFT" 0, "WONK" 0;
unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F;
}
@font-face {
font-family: "Source Sans 3";
src: url("/fonts/source-sans-3-var.woff2") format("woff2-variations");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F;
}