/* Canopy Early Learning — design tokens as CSS custom properties
Generated from the Design System artifact's tokens.json.
Drop this in your repo (e.g. /css/tokens.css) and load it before
your other stylesheets. Build every colour, size and spacing
decision from these variables instead of hardcoding values, so
the site and the design system never drift apart. */
/* Fonts: Quicksand and Square Peg are free Google Fonts — add this
to your , don't self-host them:
Roca is licensed and self-hosted. Copy fonts/Roca-Regular.woff2
from the design system into your repo (e.g. /fonts/) and adjust
the url() path below if it lands somewhere else. */
@font-face {
font-family: 'Roca';
src: url('../fonts/Roca-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
/* Colour */
--forest: #495848;
--eucalyptus: #819773;
--willow: #b1c3a0;
--stone: #dddbd0;
--off-white: #f1f0e9;
--blush-clay: #c19284;
--bark: #332d27;
/* Type families */
--font-wordmark: 'Roca', Georgia, 'Times New Roman', serif;
--font-heading: 'Square Peg', 'Segoe Script', 'Brush Script MT', cursive;
--font-body: 'Quicksand', -apple-system, 'Segoe UI', sans-serif;
/* Type scale — name, size, weight, line-height */
--text-wordmark-size: 64px;
--text-wordmark-weight: 400;
--text-wordmark-leading: 0.95;
--text-tagline-size: 20px;
--text-tagline-weight: 400;
--text-tagline-leading: 1.3;
--text-h1-size: 40px;
--text-h1-weight: 400;
--text-h1-leading: 1.1;
--text-h2-size: 28px;
--text-h2-weight: 400;
--text-h2-leading: 1.15;
--text-label-size: 13px;
--text-label-weight: 600;
--text-label-leading: 1.4;
--text-label-spacing: 0.08em;
--text-body-size: 16px;
--text-body-weight: 500;
--text-body-leading: 1.6;
--text-body-sm-size: 14px;
--text-body-sm-weight: 500;
--text-body-sm-leading: 1.5;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* Radius */
--radius-sm: 8px;
--radius-md: 20px;
--radius-pill: 9999px;
}
/* Ready-made type styles, so you're not rebuilding font-size/weight/
line-height combos by hand on every element. Apply as classes or
copy the declarations into your own selectors. */
.text-wordmark {
font-family: var(--font-wordmark);
font-size: var(--text-wordmark-size);
font-weight: var(--text-wordmark-weight);
line-height: var(--text-wordmark-leading);
}
.text-tagline {
font-family: var(--font-heading);
font-size: var(--text-tagline-size);
font-weight: var(--text-tagline-weight);
line-height: var(--text-tagline-leading);
}
h1, .text-h1 {
font-family: var(--font-heading);
font-size: var(--text-h1-size);
font-weight: var(--text-h1-weight);
line-height: var(--text-h1-leading);
}
h2, .text-h2 {
font-family: var(--font-heading);
font-size: var(--text-h2-size);
font-weight: var(--text-h2-weight);
line-height: var(--text-h2-leading);
}
.text-label {
font-family: var(--font-body);
font-size: var(--text-label-size);
font-weight: var(--text-label-weight);
line-height: var(--text-label-leading);
letter-spacing: var(--text-label-spacing);
text-transform: uppercase;
}
body, .text-body {
font-family: var(--font-body);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-leading);
color: var(--bark);
background: var(--off-white);
}
.text-body-sm {
font-family: var(--font-body);
font-size: var(--text-body-sm-size);
font-weight: var(--text-body-sm-weight);
line-height: var(--text-body-sm-leading);
}