/* ------------------------------------------------------------------ VENDORED, DO NOT HAND-EDIT THE TOKEN VALUES. Copied verbatim from the UMES Apiary Design System: Bee-Badges/UMES-Apiary-Design-System/colors_and_type.css (repo-relative from here: ../../../../Bee-Badges/UMES-Apiary-Design-System/colors_and_type.css) Copied 2026-09-02 for session 3. Re-copy the file to update; never retype values by hand. Any bloom-calendar-specific styling belongs in app/globals.css, which layers on top of these tokens. This file is served statically from /umes-tokens.css and linked from app/layout.tsx rather than imported through the bundler, so that (a) it stays byte-identical to the design system copy and (b) its relative `fonts/` URLs resolve against /fonts/ at request time instead of being resolved as modules at build time. Only merel_black.otf is present; the other proprietary faces 404 and the font stack falls through to the brand fallbacks, which is the behaviour the design system documents. App-specific styling (the calendar grid, badges, bloom bars, print rules) lives in app/globals.css and layers on top of these tokens. ------------------------------------------------------------------ */ /* ============================================================ UMES APIARY DESIGN SYSTEM — Color + Type Foundations ------------------------------------------------------------ Adheres to the official UMES Brand Guidelines v1.0 (May 2025). The apiary program lives inside the School of Agricultural and Natural Sciences + UMES Extension, so it inherits the maroon-grey-white core palette and adds a tightly-scoped "apiary" warm accent set for crop calendars, in-bloom indicators, and honey/wax-themed callouts. ============================================================ */ /* ---------- WEBFONTS (Google fallback substitutions) ---------- * • Merel (proprietary) → Jost (geometric sans, closest free match) • Sentinel (proprietary slab) → Georgia (system, official brand fallback) • Factoria (proprietary slab) → Zilla Slab (geometric square slab match) --------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&family=Zilla+Slab:wght@500;600;700;800&display=swap'); /* ---------- PROPRIETARY UMES FONTS ---------- These @font-face blocks make Merel / Sentinel / Factoria pick up automatically from one of three sources, in priority order: 1. The user's local system (if the font is installed) 2. A file dropped into fonts/ (recommended: .woff2; .otf also accepted) If neither source is present, the browser silently skips and the CSS font-family chain falls through to the next family (Century Gothic / Georgia / Rockwell). */ @font-face { font-family: "Merel"; src: local("Merel"), local("Merel Black"), local("Merel Bold"), url("fonts/merel_black.otf") format("opentype"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "Sentinel"; src: local("Sentinel"), url("fonts/Sentinel-Book.woff2") format("woff2"), url("fonts/Sentinel-Book.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sentinel"; src: local("Sentinel Book Italic"), url("fonts/Sentinel-BookItalic.woff2") format("woff2"), url("fonts/Sentinel-BookItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Sentinel"; src: local("Sentinel Bold"), url("fonts/Sentinel-Bold.woff2") format("woff2"), url("fonts/Sentinel-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Sentinel"; src: local("Sentinel Bold Italic"), url("fonts/Sentinel-BoldItalic.woff2") format("woff2"), url("fonts/Sentinel-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Factoria"; src: local("Factoria"), url("fonts/Factoria.woff2") format("woff2"), url("fonts/Factoria.otf") format("opentype"); font-weight: 400 800; font-style: normal; font-display: swap; } :root { /* ============ UMES PRIMARY PALETTE ============ */ --umes-maroon: #651D32; /* Pantone 7421 — primary brand */ --umes-grey: #888B8D; /* Pantone Cool Grey 8 — secondary structural */ --umes-light-grey: #D9D9D6; /* Pantone Cool Grey 1 — backgrounds, table shade */ --umes-white: #FFFFFF; --umes-black: #000000; /* ============ UMES SECONDARY PALETTE (use sparingly) ============ */ --umes-stone-maroon: #896F77; /* muted warm accent */ --umes-deep-maroon: #441120; /* rich dark accent — depth/contrast */ --umes-feather-grey: #EDEDED; /* very light background fills */ --umes-dark-grey: #515251; /* secondary text, footers, captions */ /* ============ APIARY ACCENT PALETTE ============ Subordinate to the UMES primaries. Use for hive-state indicators, calendar bloom bars, honey-flow charts, and educational diagrams where maroon alone is too limiting. Avoid as a dominant slide background. */ --apiary-honey: #C8881C; /* honey amber — primary apiary accent */ --apiary-honey-deep: #8C5A0E; /* dark honey, propolis */ --apiary-honey-light: #F4E3B8; /* wax/comb, soft fill */ --apiary-comb-cream: #FAF3E1; /* lightest wash, pairs with feather-grey */ --apiary-leaf: #4F6B3A; /* forage / in-bloom green */ --apiary-leaf-light: #C8D4B3; /* tint */ --apiary-sky: #6A8AA8; /* weather / cold-broody states */ /* ============ SEMANTIC TOKENS ============ */ /* Backgrounds */ --bg-page: var(--umes-white); --bg-subtle: var(--umes-feather-grey); --bg-muted: var(--umes-light-grey); --bg-inverse: var(--umes-maroon); --bg-inverse-deep: var(--umes-deep-maroon); --bg-tinted: var(--apiary-comb-cream); /* Foregrounds */ --fg-default: var(--umes-black); --fg-muted: var(--umes-dark-grey); --fg-subtle: var(--umes-grey); --fg-inverse: var(--umes-white); --fg-accent: var(--umes-maroon); --fg-accent-warm: var(--apiary-honey-deep); /* Borders + rules */ --border-default: var(--umes-light-grey); --border-strong: var(--umes-grey); --border-accent: var(--umes-maroon); --border-hairline: rgba(0,0,0,0.08); /* Status / states */ --status-healthy: #C8881C; /* capped-comb honey amber */ --status-watch: #E5BB2B; /* dandelion / pollen yellow */ --status-treat: #B7202E; /* danger red, distinct from brand maroon */ --status-cold: var(--apiary-sky); /* ============ TYPE FAMILIES ============ */ /* Display: Merel is the brand primary (proprietary, must be installed locally). Century Gothic is the official brand fallback. Jost is loaded via Google Fonts as a cross-browser web fallback when neither is available. */ --font-display: "Merel", "Century Gothic", "Jost", "Avenir Next", "Helvetica Neue", system-ui, sans-serif; /* Body: Sentinel is the brand primary (proprietary). Georgia is the official brand fallback (system-installed on macOS and Windows). */ --font-body: "Sentinel", Georgia, "Iowan Old Style", "Times New Roman", serif; /* Accent: Factoria is the brand primary, Rockwell Nova / Rockwell are brand fallbacks, Zilla Slab is the Google Fonts cross-browser fallback. */ --font-accent: "Factoria", "Rockwell Nova", "Rockwell", "Zilla Slab", "Roboto Slab", Georgia, serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ============ TYPE SCALE (slide/print baseline = 18pt) ============ */ --fs-display: 64px; --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 20px; --fs-body: 18px; --fs-body-sm: 16px; --fs-caption: 14px; --fs-micro: 12px; /* Line heights */ --lh-tight: 1.05; /* @kind font */ --lh-snug: 1.2; /* @kind font */ --lh-normal: 1.45; /* @kind font */ --lh-loose: 1.6; /* @kind font */ /* Letter spacing */ --tracking-tight: -0.01em; /* @kind font */ --tracking-normal: 0; /* @kind font */ --tracking-wide: 0.04em; /* @kind font */ --tracking-caps: 0.08em; /* @kind font */ /* ALL-CAPS Merel-style headings */ /* ============ SPACING (4px base) ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ============ RADII ============ */ /* UMES brand is restrained — sharp or modestly rounded. */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ============ ELEVATION ============ */ --shadow-xs: 0 1px 2px rgba(68, 17, 32, 0.06); --shadow-sm: 0 2px 6px rgba(68, 17, 32, 0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 6px 18px rgba(68, 17, 32, 0.10), 0 2px 4px rgba(0,0,0,0.05); --shadow-lg: 0 16px 40px rgba(68, 17, 32, 0.14), 0 4px 8px rgba(0,0,0,0.06); --shadow-inset-subtle: inset 0 -1px 0 var(--border-hairline); /* ============ MOTION ============ */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 400ms; /* @kind other */ } /* ============ BASE TYPE STYLES ============ */ html { color: var(--fg-default); background: var(--bg-page); } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-default); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h-display, .h1, .h2, .h3, .h4, .eyebrow { font-family: var(--font-display); color: var(--fg-accent); line-height: var(--lh-tight); font-weight: 700; margin: 0 0 var(--space-4) 0; } .h-display { font-size: var(--fs-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; } h1, .h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); text-transform: uppercase; } h2, .h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); } h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); } h4, .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); } .eyebrow { font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--umes-grey); margin-bottom: var(--space-2); } /* Subheads = serif (Sentinel/Georgia) per brand */ .subhead { font-family: var(--font-body); font-weight: 700; font-style: italic; font-size: var(--fs-body-lg); color: var(--fg-default); line-height: var(--lh-snug); } p, .p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-default); margin: 0 0 var(--space-4) 0; text-wrap: pretty; } .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); } .body-sm { font-size: var(--fs-body-sm); } .caption { font-size: var(--fs-caption); color: var(--fg-muted); } .micro { font-size: var(--fs-micro); color: var(--fg-muted); } /* Factoria-style accent — RESERVED for high-energy moments only. (event banners, fan gear, bold callouts) */ .accent-display, .factoria { font-family: var(--font-accent); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-accent); } a { color: var(--umes-maroon); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--umes-deep-maroon); } hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-6) 0; } .rule-accent { border-top: 2px solid var(--umes-maroon); }