/* ============================================================ Orenda Commons — Brand Tokens v1.0 Single source of truth for color, type, and spacing across the four properties (Commons/personal, Pastures, Academy, Foundation). Import this; reference the variables; never hard-code hex in a site stylesheet. Siblings rhyme, not match. The base below IS the Commons kit and the personal site. Set data-kit on or to shift accent emphasis and density for an org: Omit data-kit for the Commons base. ============================================================ */ :root { /* --- Core palette (formalized Pastures palette) --- */ --forest: #2B3B22; /* primary: ink, dark sections, the mark */ --forest-light: #34472A; /* lifted forest, hover on dark */ --pasture: #4A7C3F; /* links, accents, eyebrows */ --cream: #FAF7F0; /* page backgrounds, light surfaces */ --cream-dark: #F1EADC; /* alternate band, card wells */ --gold: #D4A853; /* CTAs, highlights — sparingly */ --gold-dark: #C2933F; /* gold hover/active */ --gold-soft: #E0BC72; /* gold tint */ --earth: #3D3228; /* dark grounding, alt dark text */ /* --- Neutrals / text --- */ --text: #2B3B22; --text-muted: #5F6450; --text-light: #95917F; --on-dark: #FAF7F0; --on-dark-muted: #C9CDBB; --border: #E5DDCC; --line-soft: #EFE8DA; --card: #FFFFFF; --white: #FFFFFF; /* --- Semantic roles (siblings override these) --- */ --bg: var(--cream); --bg-alt: var(--cream-dark); --bg-dark: var(--forest); --accent: var(--pasture); /* default working accent */ --cta: var(--gold); /* default call-to-action color */ --cta-hover: var(--gold-dark); /* --- Type --- */ --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fs-display: 46px; --fs-h1: 32px; --fs-h2: 26px; --fs-body: 17px; --fs-ui: 15px; --fs-caption: 13px; --fs-eyebrow: 12px; --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.8; /* density dial — siblings adjust */ --eyebrow-spacing: 1.6px; /* --- Layout / density --- */ --max-width: 1120px; --content-width: 720px; --band-pad: 76px; /* vertical section padding — density dial */ --radius: 10px; } /* ============================================================ SIBLING SUB-KITS — thin overrides on the base. Two dials only: which accent carries weight, and how much air. ============================================================ */ /* --- Orenda Pastures: closest to the ground. Gold is the working accent (CTAs), denser, more rugged. --- */ [data-kit="pastures"] { --accent: var(--gold); --cta: var(--gold); --cta-hover: var(--gold-dark); --bg: var(--cream); --lh-body: 1.7; /* a touch tighter */ --band-pad: 72px; } /* --- Orenda Academy: reads standalone, like a publication. Pasture green leads, more air, Lora carries more weight. --- */ [data-kit="academy"] { --accent: var(--pasture); --cta: var(--gold); /* gold stays rare, CTA only */ --cta-hover: var(--gold-dark); --bg: var(--cream); --lh-body: 1.85; --band-pad: 84px; } /* --- Orenda Foundation: lightest and airiest. Soft pasture accent, most negative space, lighter feel. --- */ [data-kit="foundation"] { --accent: var(--pasture); --cta: var(--pasture); /* softer CTA than gold */ --cta-hover: var(--forest); --bg: var(--white); /* more white than cream */ --bg-alt: var(--cream); --lh-body: 1.9; /* the most air */ --band-pad: 96px; } /* ============================================================ OPTIONAL STARTER PRIMITIVES Minimal, so sites can adopt the system without a rewrite. Use them or just reference the variables above. ============================================================ */ .eyebrow { display: block; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--eyebrow-spacing); font-size: var(--fs-eyebrow); font-weight: 600; color: var(--accent); } .btn { display: inline-block; font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: 0.2px; padding: 14px 32px; border-radius: var(--radius); background: var(--cta); color: var(--forest); cursor: pointer; border: none; } .btn:hover { background: var(--cta-hover); } /* On the Foundation, the soft CTA reads better with light text */ [data-kit="foundation"] .btn { color: var(--on-dark); } .band { padding: var(--band-pad) 24px; } .band--light { background: var(--bg); } .band--alt { background: var(--bg-alt); } .band--dark { background: var(--bg-dark); color: var(--on-dark); } .band-inner { max-width: var(--max-width); margin: 0 auto; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: var(--lh-heading); color: var(--text); } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); } a { color: var(--accent); }