/* ===========================================================================
BANYAN SOFTWARE — DESIGN TOKENS (PM Portal shared stylesheet)
Source of truth for all visual design decisions across the PM Portal.
Extracted from the "Portal redesign alignment" handoff package so every
surface — the signed-out landing, the authenticated participant SPA
(app/index.html), and the facilitator dashboard (app.html) — draws from ONE
token set. Link this file from every page; map local (short-name) tokens
onto these in each page's inline :root.
Deviations from the handoff's tokens.css, made to match what the portal
actually ships today (so nothing shifts unexpectedly):
- Body font is 'Source Sans 3' (the current Google Fonts name the SPA
already loads), not 'Source Sans Pro'. Same typeface, current naming.
- Adds --banyan-moss-deep (#2b4030): the darkened moss the hero / full-bleed
bands / CTA use. The handoff called it a derived shade; it is promoted to
a named token here so every surface darkens moss identically.
=========================================================================== */
/* Google Fonts — must be first per CSS spec. Matches the the pages
already carry, so a page that also s this URL fetches it only once. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;600;700&family=Source+Sans+3:wght@300;400;600&display=swap');
:root {
/* ---------------------------------------------------------------------
COLOR — PRIMARY PALETTE
Moss Green is the dominant brand color. White provides breathing room.
Sky Blue and Charcoal are supporting accents.
--------------------------------------------------------------------- */
--banyan-moss-green: #395542; /* Primary brand color. Backgrounds, headers, accents. */
--banyan-moss-deep: #2b4030; /* Darkened moss — hero / full-bleed bands / CTA. Derived shade. */
--banyan-white: #FFFFFF; /* Backgrounds, text on dark, breathing room. */
--banyan-charcoal: #414141; /* Body text, secondary elements. NEVER use #000000. */
--banyan-sky-blue: #9BCBEB; /* Supporting accent. Highlights, callouts, data viz. */
--banyan-light-grey: #F2F2F2; /* Subtle backgrounds, table stripes, dividers. */
/* ---------------------------------------------------------------------
COLOR — SUB-BRAND PALETTES
Reserved for sub-brand materials only. Do NOT use in main Banyan work.
--------------------------------------------------------------------- */
--banyan-bc-gold: #F1BE48; /* Banyan Business Community ONLY */
--banyan-foundation-lime: #A1E2AE; /* Banyan Software Foundation — light bg */
--banyan-foundation-lime-dark: #89C18F; /* Banyan Software Foundation — dark bg */
/* ---------------------------------------------------------------------
COLOR — SEMANTIC ROLES
--------------------------------------------------------------------- */
--color-bg: var(--banyan-white);
--color-bg-subtle: var(--banyan-light-grey);
--color-bg-inverse: var(--banyan-moss-green);
--color-bg-inverse-deep: var(--banyan-moss-deep);
--color-text: var(--banyan-charcoal);
--color-text-inverse: var(--banyan-white);
--color-text-heading: var(--banyan-moss-green);
--color-accent: var(--banyan-moss-green);
--color-accent-secondary: var(--banyan-sky-blue);
--color-border: var(--banyan-light-grey);
--color-border-strong: var(--banyan-charcoal);
--color-link: var(--banyan-moss-green);
--color-link-hover: var(--banyan-charcoal);
/* Chart sequence — always in this order */
--chart-1: var(--banyan-moss-green);
--chart-2: var(--banyan-sky-blue);
--chart-3: var(--banyan-charcoal);
--chart-4: var(--banyan-light-grey);
/* ---------------------------------------------------------------------
TYPOGRAPHY — FONT FAMILIES
Headlines: Libre Franklin. Body: Source Sans 3.
--------------------------------------------------------------------- */
--font-heading: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', Consolas, Monaco, monospace;
/* ---------------------------------------------------------------------
TYPOGRAPHY — WEIGHTS
Specific weights only. Never bold a Light. Never light a SemiBold.
--------------------------------------------------------------------- */
--weight-heading-primary: 600; /* Libre Franklin SemiBold — page titles */
--weight-heading-secondary: 400; /* Libre Franklin Regular — subheadings */
--weight-body: 300; /* Source Sans 3 Light — body, paragraphs */
--weight-body-emphasis: 600; /* Source Sans 3 SemiBold — bold body, labels */
/* ---------------------------------------------------------------------
TYPOGRAPHY — SCALE (marketing/web modular scale)
--------------------------------------------------------------------- */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 2rem; /* 32px */
--text-3xl: 2.5rem; /* 40px */
--text-4xl: 3.5rem; /* 56px */
--text-5xl: 4.5rem; /* 72px */
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-loose: 1.7;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em; /* Eyebrows / uppercase labels */
/* ---------------------------------------------------------------------
SPACING — 4px base
--------------------------------------------------------------------- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
--space-10: 8rem; /* 128px */
/* ---------------------------------------------------------------------
LAYOUT
--------------------------------------------------------------------- */
--container-max: 1280px;
--container-narrow: 880px;
--container-prose: 680px;
--section-padding-y: var(--space-9); /* 96px between marketing sections */
/* ---------------------------------------------------------------------
RADIUS — Banyan is restrained; no heavy rounding.
--------------------------------------------------------------------- */
--radius-sm: 4px; /* buttons, chips */
--radius-md: 6px; /* cards */
--radius-lg: 12px; /* large surfaces / bands */
--radius-pill: 999px;
/* ---------------------------------------------------------------------
SHADOW — quiet, charcoal-tinted (never pure black). Flat-leaning.
--------------------------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(65, 65, 65, 0.06);
--shadow-md: 0 4px 12px rgba(65, 65, 65, 0.08);
--shadow-lg: 0 12px 32px rgba(65, 65, 65, 0.10);
/* ---------------------------------------------------------------------
BORDERS
--------------------------------------------------------------------- */
--border-thin: 1px solid var(--color-border);
--border-strong: 2px solid var(--banyan-moss-green);
--border-accent: 4px solid var(--banyan-moss-green);
/* ---------------------------------------------------------------------
MOTION — understated. cubic-bezier(0.2,0,0.2,1) at 150/250/400ms.
--------------------------------------------------------------------- */
--ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
}