/* ============================================================================= tokens.css – marketing planner (v5, "frames" redesign, 10 November 2026) Built to the Claude Design frames in design/redesign/ and the Howden design system that ships with them (@howden/design-system 0.1.0). Only this file holds colour values. Light only: backgrounds are white or soft white, the brand is one micro-palette – Moss green and Pistachio – used as whole blocks. ========================================================================== */ @font-face { font-family: "Aktiv Grotesk"; src: url("../assets/fonts/AktivGroteskVF_W_Wght.woff2") format("woff2-variations"), url("../assets/fonts/AktivGroteskVF_W_Wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "GT Ultra Median"; src: url("../assets/fonts/GT-Ultra-Median-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* --- brand primaries (design system names) --- */ --howden-moss: #173f35; --howden-pistachio: #e0ec89; --howden-gold: #998542; --howden-teal: #7ce0d3; --howden-rosewood: #3c0f11; --howden-mustard: #ffbf3f; --howden-cobalt: #0857c3; --howden-poppy: #f9423a; --howden-white: #ffffff; --howden-soft-white:#f6f6f6; --howden-grey: #9d9d9d; --howden-black: #000000; /* status – functional only, never brand expression */ --status-positive: #0da20d; --status-neutral: #faaa00; --status-negative: #dc000f; /* --- the micro-palette this app uses --- */ --moss: var(--howden-moss); --pistachio: var(--howden-pistachio); --pistachio-hover: #d6e27c; --pistachio-tint: #eef3c8; --gold: var(--howden-gold); /* --- semantic --- */ --surface: var(--howden-white); --surface-muted: var(--howden-soft-white); --ink: var(--howden-black); --ink-muted: rgb(0 0 0 / 0.62); --ink-faint: rgb(0 0 0 / 0.45); --line: rgb(0 0 0 / 0.1); --line-soft: rgb(0 0 0 / 0.08); --line-moss: rgb(23 63 53 / 0.3); --line-moss-soft: rgb(23 63 53 / 0.18); --moss-shadow: rgb(23 63 53 / 0.12); --scrim: rgb(23 63 53 / 0.45); --field-veil: linear-gradient(100deg, rgb(23 63 53 / 0.72) 0%, rgb(23 63 53 / 0.45) 45%, rgb(23 63 53 / 0.15) 100%); /* over the living field, heavier where the greeting sits */ --photo-veil: linear-gradient(to top, rgb(23 63 53 / 0.9) 0%, rgb(23 63 53 / 0.35) 55%, rgb(23 63 53 / 0.1) 100%); /* over event photos, so white text reads */ --headline: var(--moss); --accent: var(--moss); --accent-ink: var(--howden-white); --focus-ring: var(--moss); /* on the Moss field (sidebar, hero, moss cards) */ --field-bg: var(--moss); --field-text: var(--howden-white); --field-text-soft: rgb(255 255 255 / 0.82); --field-text-faint: rgb(255 255 255 / 0.7); --field-line: rgb(255 255 255 / 0.16); --field-hover: rgb(255 255 255 / 0.08); --field-well: rgb(255 255 255 / 0.06); --field-track: rgb(255 255 255 / 0.16); --field-accent: var(--pistachio); --field-accent-text:var(--moss); /* --- type --- */ --font-display: "GT Ultra Median", Georgia, "Times New Roman", serif; --font-body: "Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --fw-regular: 400; --fw-semibold: 600; --fs-hero: 72px; /* the Home greeting */ --fs-page: 64px; /* page titles */ --fs-stat: 88px; /* numbers in the stat band */ --fs-h2: 40px; /* week title, group headings */ --fs-h3: 30px; /* section headings */ --fs-h4: 22px; /* sub-sections */ --fs-body-lg: 17px; --fs-body: 14px; --fs-small: 13px; --fs-caption: 12px; --fs-micro: 11px; --lh-display: 1; --lh-heading: 1.2; --lh-body: 1.5; /* --- spacing (8px base) --- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --page-x: 48px; --page-top: 40px; --page-max: 1200px; --sidebar-w: 240px; --topbar-h: 64px; /* --- shape --- */ --radius-none: 0px; --radius-sm: 4px; /* badges only */ --radius-btn: 8px; /* buttons, as in the frames */ --control-h: 44px; /* --- motion --- */ --duration: 160ms; --duration-slow: 420ms; --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --stagger: 40ms; --z-panel: 20; --z-toast: 30; /* --- legacy aliases still read by shared code --- */ --text: var(--ink); --text-secondary: var(--ink-muted); --text-disabled: var(--ink-faint); --divider: var(--line); --hover: var(--surface-muted); --surface-alt: var(--surface-muted); --surface-raised: var(--surface); --input-border: var(--line-moss); --input-bg: var(--surface-muted); --action-bg: var(--moss); --action-text: var(--howden-white); --selected-bg: var(--moss); --selected-text: var(--howden-white); --today: var(--moss); --error-text: var(--status-negative); --error-icon: var(--status-negative); --error-bg: rgb(220 0 15 / 0.08); --success-text: var(--status-positive); --success-icon: var(--status-positive); --success-bg: rgb(13 162 13 / 0.1); --neutral-text: #7a5300; --neutral-icon: var(--status-neutral); --neutral-bg: rgb(250 170 0 / 0.14); --status-error: var(--status-negative); --status-success: var(--status-positive); --status-neutral-text: var(--neutral-text); --radius: var(--radius-none); --radius-control: var(--radius-none); --radius-card: var(--radius-none); --target-min: 36px; --control-height: var(--control-h); --row-height: 48px; --text-body: var(--fs-body); --text-small: var(--fs-small); --text-heading: var(--fs-h4); --text-title: var(--fs-h2); --text-hero: var(--fs-stat); --weight-regular: var(--fw-regular); --weight-semibold: var(--fw-semibold); --leading-tight: 1.3; --leading-heading: var(--lh-heading); --leading-prose: var(--lh-body); --leading-hero: var(--lh-display); --measure: 64ch; --gutter: 16px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --page-margin: var(--page-x); --white: var(--howden-white); --moss-green: var(--moss); --teal: var(--howden-teal); --rosewood: var(--howden-rosewood); --mustard: var(--howden-mustard); }