/* ============================================================================ GRÖNSKAPER — TOKENS (drop-in production CSS) Single self-contained file for the live site. No build step, no @import of local files. Link this ONE file in every page : It loads the brand webfonts and declares every design token as a CSS custom property. Then replace hard-coded values in your existing CSS with var(--…): color: #2a5550; -> color: var(--brand-deep); font-family: "Roboto"; -> font-family: var(--font-body); border-radius: 10px; -> border-radius: var(--radius-md); Generated from the Grönskaper Design System. Keep in sync with tokens/. ============================================================================ */ /* ---- Webfonts: Newsreader (serif headings) + Source Sans 3 (body/UI) ---- */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Source+Sans+3:wght@400;500;600;700&display=swap'); :root { /* ====================== COLORS ====================== */ /* Brand greens */ --green-900: #14362B; --green-800: #1A4D3E; --green-700: #2A5550; --green-600: #376D67; /* spruce — signature brand color */ --green-500: #4A9D7F; --green-400: #6FB89C; --green-300: #A9D4C2; --green-200: #D4ECE2; --green-100: #E8F5F1; --green-050: #F0F9F6; /* Warm accent (honey) — tips / kuriosa */ --honey-700: #B26A00; --honey-500: #F9A825; --honey-100: #FFF7E6; /* Warm, slightly green-leaning neutrals */ --ink: #1A2421; --slate-700: #3D4A45; --slate-500: #647069; --slate-400: #8A968F; --line: #E3E9E5; --line-strong:#D2DAD5; --paper: #FFFFFF; --canvas: #F7F9F7; /* Category accents */ --cat-buskar: #8B4789; /* Buskar & Bär */ --cat-trad: #4A6D52; /* Träd */ --cat-blommor: #C75C84; /* Blommor */ --cat-gronsaker:#568730; /* Grönsaker */ /* Functional */ --positive: #2E7D52; --neutral: #8A968F; /* Semantic aliases — PREFER THESE */ --brand: var(--green-600); --brand-strong: var(--green-800); --brand-deep: var(--green-700); --text-strong: var(--green-800); --text-body: var(--slate-700); --text-muted: var(--slate-500); --text-faint: var(--slate-400); --text-on-brand: #FFFFFF; --text-link: var(--green-500); --text-link-hover: var(--green-800); --surface-page: var(--canvas); --surface-card: var(--paper); --surface-tinted: var(--green-100); --surface-wash: var(--green-050); --surface-dark: var(--green-700); --border-subtle: var(--line); --border-default: var(--line-strong); --border-focus: var(--green-500); --accent-warm: var(--honey-500); --accent-warm-text: var(--honey-700); --accent-warm-wash: var(--honey-100); /* ====================== TYPOGRAPHY ====================== */ --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: var(--font-serif); --font-heading: var(--font-serif); --font-body: var(--font-sans); --font-ui: var(--font-sans); --text-xs: 0.8125rem; /* 13px */ --text-sm: 0.9375rem; /* 15px */ --text-base: 1.0625rem; /* 17px — body */ --text-md: 1.1875rem; /* 19px — lead */ --text-lg: 1.375rem; /* 22px — H3 */ --text-xl: 1.75rem; /* 28px — H2 */ --text-2xl: 2.25rem; /* 36px — H1 */ --text-3xl: 3rem; /* 48px */ --text-4xl: 3.75rem; /* 60px */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed:1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ====================== SPACING / RADII / SHADOWS ====================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --radius-circle: 50%; --shadow-xs: 0 1px 2px rgba(26, 77, 62, 0.06); --shadow-sm: 0 1px 3px rgba(26, 77, 62, 0.10); --shadow-md: 0 4px 12px rgba(26, 77, 62, 0.08); --shadow-lg: 0 8px 24px rgba(26, 77, 62, 0.12); --shadow-xl: 0 16px 40px rgba(26, 77, 62, 0.16); --shadow-focus: 0 0 0 4px rgba(74, 157, 127, 0.18); /* ====================== LAYOUT / MOTION ====================== */ --container: 1200px; --container-text: 760px; --container-wide: 1400px; --sidebar: 300px; --nav-height: 65px; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.15s; --dur-normal: 0.3s; --dur-slow: 0.4s; --lift: translateY(-6px); } /* ---- Optional: a few opt-in base rules. Add the class names to use them. ---- These are NOT applied globally so they won't fight your existing CSS. Use them on new markup or when you're ready to migrate a block. */ .gs-eyebrow { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand); } .gs-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); } .gs-reading { max-width: var(--container-text); margin-inline: auto; }