/* ============================================================ Greener Creative — Design Tokens "Deep Field" — near-black forest green, vivid spring-green accent. Confident geometric/grotesk type. Warm but professional. Fonts: Space Grotesk (display) + Hanken Grotesk (body/UI). Loaded via Google Fonts in HTML — see fonts/ for self-hosting. ============================================================ */ /* ---- 1. PRIMITIVE TOKENS (raw values — don't reference directly in UI) ---- */ :root { /* Greens — the spine of the brand */ --gc-green-950: #0B150F; /* deepest background, near-black forest */ --gc-green-900: #0E1A14; /* primary dark background */ --gc-green-850: #122017; /* raised background */ --gc-green-800: #15251C; /* surface / card on dark */ --gc-green-700: #1C3024; /* elevated surface, hover */ --gc-green-600: #274533; /* borders on dark, dividers */ --gc-green-500: #3C6B4C; /* mid green */ --gc-green-400: #5D9E6F; /* desaturated leaf */ --gc-spring: #6FE08A; /* PRIMARY ACCENT — vivid spring green */ --gc-spring-bright: #84F09E; /* hover/lift of accent */ --gc-spring-dim: #58C273; /* pressed accent */ /* Warm neutrals — paper side of the system (light surfaces) */ --gc-paper: #F5F2E9; /* warm off-white "paper" */ --gc-paper-2: #ECE8DB; /* warm paper, slightly deeper */ --gc-bone: #FFFFFF; /* pure white surface */ --gc-sand: #E2DCCB; /* warm border on light */ /* Text on dark */ --gc-text-hi: #ECF2EC; /* primary text on dark */ --gc-text-mid: #8FA396; /* secondary text on dark */ --gc-text-lo: #5E7166; /* tertiary / faint on dark */ /* Text on light */ --gc-ink: #16271D; /* primary text on light (deep forest ink) */ --gc-ink-mid: #5C6A5E; /* secondary on light */ --gc-ink-lo: #8C9588; /* tertiary on light */ /* Functional / status */ --gc-success: #6FE08A; /* same as spring — success IS the brand */ --gc-warning: #E8B24A; /* warm amber */ --gc-danger: #E5705B; /* warm clay-red, not harsh */ --gc-info: #6BB6C4; /* muted teal */ /* ---- Type families ---- */ --gc-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --gc-font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --gc-font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- Type scale (1.25 major-third-ish, tuned) ---- */ --gc-text-xs: 12px; --gc-text-sm: 14px; --gc-text-base: 16px; --gc-text-md: 18px; --gc-text-lg: 20px; --gc-text-xl: 24px; --gc-text-2xl: 30px; --gc-text-3xl: 38px; --gc-text-4xl: 48px; --gc-text-5xl: 62px; --gc-text-6xl: 78px; /* Weights */ --gc-w-regular: 400; --gc-w-medium: 500; --gc-w-semibold:600; --gc-w-bold: 700; /* Letter-spacing — geometric sans tightens at display sizes */ --gc-tracking-tight: -0.035em; /* big display */ --gc-tracking-snug: -0.018em; /* headings */ --gc-tracking-normal: 0; --gc-tracking-wide: 0.04em; /* eyebrows */ --gc-tracking-caps: 0.12em; /* all-caps kickers */ /* Line-height */ --gc-leading-none: 1.02; --gc-leading-tight: 1.12; --gc-leading-snug: 1.3; --gc-leading-normal: 1.5; --gc-leading-relaxed: 1.6; /* ---- Spacing scale (4px base) ---- */ --gc-space-1: 4px; --gc-space-2: 8px; --gc-space-3: 12px; --gc-space-4: 16px; --gc-space-5: 20px; --gc-space-6: 24px; --gc-space-8: 32px; --gc-space-10: 40px; --gc-space-12: 48px; --gc-space-16: 64px; --gc-space-20: 80px; --gc-space-24: 96px; --gc-space-32: 128px; /* ---- Radii ---- */ --gc-radius-sm: 6px; --gc-radius-md: 9px; --gc-radius-lg: 12px; --gc-radius-xl: 16px; --gc-radius-2xl: 22px; --gc-radius-pill: 999px; /* ---- Borders ---- */ --gc-border-dark: rgba(180,210,185,0.12); /* hairline on dark */ --gc-border-dark-2:rgba(180,210,185,0.20); /* stronger on dark */ --gc-border-light: rgba(20,39,28,0.12); /* hairline on light */ --gc-border-light-2:rgba(20,39,28,0.20); /* ---- Shadows — soft, low, green-tinted (never pure black) ---- */ --gc-shadow-sm: 0 1px 2px rgba(8,18,12,0.20); --gc-shadow-md: 0 4px 16px rgba(8,18,12,0.28); --gc-shadow-lg: 0 16px 48px rgba(8,18,12,0.38); --gc-shadow-light-sm: 0 1px 2px rgba(20,39,28,0.05); --gc-shadow-light-md: 0 6px 24px rgba(20,39,28,0.08); --gc-glow-accent: 0 8px 30px rgba(111,224,138,0.22); /* accent button lift */ /* ---- Motion ---- */ --gc-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* default — gentle, confident */ --gc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entrances */ --gc-dur-fast: 140ms; --gc-dur: 220ms; --gc-dur-slow: 420ms; } /* ---- 2. SEMANTIC TOKENS — default theme is DARK ("Deep Field") ---- */ :root { --bg: var(--gc-green-900); --bg-raised: var(--gc-green-850); --surface: var(--gc-green-800); --surface-2: var(--gc-green-700); --border: var(--gc-border-dark); --border-strong: var(--gc-border-dark-2); --fg1: var(--gc-text-hi); /* primary text */ --fg2: var(--gc-text-mid); /* secondary */ --fg3: var(--gc-text-lo); /* tertiary / faint */ --accent: var(--gc-spring); --accent-hover: var(--gc-spring-bright); --accent-press: var(--gc-spring-dim); --on-accent: var(--gc-green-900); /* text on accent buttons */ --shadow-sm: var(--gc-shadow-sm); --shadow-md: var(--gc-shadow-md); --shadow-lg: var(--gc-shadow-lg); } /* Light section/theme — for "paper" blocks within a dark site, or light pages */ .gc-theme-light { --bg: var(--gc-paper); --bg-raised: var(--gc-bone); --surface: var(--gc-bone); --surface-2: var(--gc-paper-2); --border: var(--gc-border-light); --border-strong: var(--gc-border-light-2); --fg1: var(--gc-ink); --fg2: var(--gc-ink-mid); --fg3: var(--gc-ink-lo); --accent: #1C7A41; /* emerald reads better on paper than neon */ --accent-hover: #156233; --accent-press: #0F4D27; --on-accent: #FFFFFF; --shadow-sm: var(--gc-shadow-light-sm); --shadow-md: var(--gc-shadow-light-md); --shadow-lg: var(--gc-shadow-light-md); } /* ============================================================ 3. SEMANTIC TYPE CLASSES — apply directly to elements ============================================================ */ .gc-display { font-family: var(--gc-font-display); font-size: var(--gc-text-6xl); font-weight: var(--gc-w-semibold); line-height: var(--gc-leading-none); letter-spacing: var(--gc-tracking-tight); color: var(--fg1); } .gc-h1 { font-family: var(--gc-font-display); font-size: var(--gc-text-4xl); font-weight: var(--gc-w-semibold); line-height: var(--gc-leading-tight); letter-spacing: var(--gc-tracking-snug); color: var(--fg1); } .gc-h2 { font-family: var(--gc-font-display); font-size: var(--gc-text-3xl); font-weight: var(--gc-w-semibold); line-height: var(--gc-leading-tight); letter-spacing: var(--gc-tracking-snug); color: var(--fg1); } .gc-h3 { font-family: var(--gc-font-display); font-size: var(--gc-text-xl); font-weight: var(--gc-w-semibold); line-height: var(--gc-leading-snug); letter-spacing: var(--gc-tracking-snug); color: var(--fg1); } .gc-h4 { font-family: var(--gc-font-display); font-size: var(--gc-text-lg); font-weight: var(--gc-w-medium); line-height: var(--gc-leading-snug); color: var(--fg1); } .gc-lead { /* intro paragraph under a heading */ font-family: var(--gc-font-body); font-size: var(--gc-text-lg); font-weight: var(--gc-w-regular); line-height: var(--gc-leading-normal); color: var(--fg2); } .gc-body { font-family: var(--gc-font-body); font-size: var(--gc-text-base); font-weight: var(--gc-w-regular); line-height: var(--gc-leading-relaxed); color: var(--fg2); } .gc-small { font-family: var(--gc-font-body); font-size: var(--gc-text-sm); line-height: var(--gc-leading-normal); color: var(--fg2); } .gc-eyebrow { /* accent-coloured label above a heading */ font-family: var(--gc-font-body); font-size: var(--gc-text-sm); font-weight: var(--gc-w-semibold); letter-spacing: var(--gc-tracking-wide); text-transform: uppercase; color: var(--accent); } .gc-kicker { /* faint all-caps section label */ font-family: var(--gc-font-body); font-size: var(--gc-text-xs); font-weight: var(--gc-w-bold); letter-spacing: var(--gc-tracking-caps); text-transform: uppercase; color: var(--fg3); } .gc-mono { font-family: var(--gc-font-mono); font-size: var(--gc-text-sm); letter-spacing: 0; color: var(--fg2); }