/* ============================================================ Yumi — Design tokens (v3.0) Single source of truth. Imported by public.css and admin.css. Per-facility theming: --color-accent / --color-accent-strong are overridden inline on by Jinja (see §3.3 of brief). All other tokens are fixed across facilities. ============================================================ */ /* Two-subset split per family: basic Latin (U+0000-00FF) + Latin Extended (U+0100-024F, U+1E00-1EFF, etc) — matches Google/fontsource subset boundaries. Browser fetches only the subsets needed for visible text on page. */ /* Newsreader — latin */ @font-face{ font-family:'Newsreader';font-style:normal;font-weight:200 800; font-display:swap; src:local('Newsreader'), url('/static/fonts/Newsreader-Variable.woff2') format('woff2-variations'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191, U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Newsreader — latin-ext (Croatian diacritics live here) */ @font-face{ font-family:'Newsreader';font-style:normal;font-weight:200 800; font-display:swap; src:local('Newsreader'), url('/static/fonts/Newsreader-Variable-Ext.woff2') format('woff2-variations'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Newsreader Italic — latin */ @font-face{ font-family:'Newsreader';font-style:italic;font-weight:200 800; font-display:swap; src:local('Newsreader Italic'), url('/static/fonts/Newsreader-Italic-Variable.woff2') format('woff2-variations'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191, U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Newsreader Italic — latin-ext */ @font-face{ font-family:'Newsreader';font-style:italic;font-weight:200 800; font-display:swap; src:local('Newsreader Italic'), url('/static/fonts/Newsreader-Italic-Variable-Ext.woff2') format('woff2-variations'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } /* DM Sans — latin */ @font-face{ font-family:'DM Sans';font-style:normal;font-weight:300 800; font-display:swap; src:local('DM Sans'), url('/static/fonts/DMSans-Variable.woff2') format('woff2-variations'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } /* DM Sans — latin-ext */ @font-face{ font-family:'DM Sans';font-style:normal;font-weight:300 800; font-display:swap; src:local('DM Sans'), url('/static/fonts/DMSans-Variable-Ext.woff2') format('woff2-variations'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* ---------- Brand · per-facility overridable ---------- */ --color-accent: #89c4a4; --color-accent-soft: #e3f1e9; --color-accent-strong: #5e9d7d; --color-accent-deep: #3d6b54; /* ---------- Neutrals · fixed across all facilities ---------- */ --color-bg: #ffffff; --color-surface: #fafaf9; --color-recessed: #f5f4f2; --color-ink: #1a1a1a; --color-ink-2: #4a4a4a; --color-ink-3: #6b6b6b; --color-ink-4: #999999; --color-line: #e5e4e2; --color-line-soft:#f0efed; /* ---------- Semantic ---------- */ --color-danger: #dc2626; --color-danger-bg: #fef2f2; --color-danger-line: #fecaca; --color-warn: #b45309; --color-warn-bg: #fffbeb; --color-warn-line: #fde68a; --color-ok: #15803d; --color-ok-bg: #f0fdf4; --color-ok-line: #bbf7d0; --color-info: #1e40af; --color-info-bg: #eff6ff; --color-info-line: #bfdbfe; /* ---------- Dark sage shell (admin sidebar only) ---------- */ --color-shell: #0e1612; --color-shell-2: #131d18; --color-shell-line: rgba(255,255,255,.08); --color-shell-fg: #cfe7da; --color-shell-fg-2: #7e9a8a; --color-shell-active-bg: rgba(137,196,164,.16); --color-shell-active-fg: #d8efe1; /* ---------- Typography ---------- */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --text-xs: 0.75rem; /* 12px — micro labels, badges */ --text-sm: 0.8125rem; /* 13px — table cells, helper */ --text-base: 0.9375rem; /* 15px — body in admin */ --text-md: 1rem; /* 16px — body in public, form inputs */ --text-lg: 1.125rem; /* 18px — emphasis body */ --text-xl: 1.375rem; /* 22px — sub-headings */ --text-2xl: 1.75rem; /* 28px — page titles in admin */ --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.625rem); /* 30–42px */ --text-4xl: clamp(2.25rem, 1.6rem + 2.5vw, 3.75rem); /* 36–60px hero */ --leading-tight: 1.12; --leading-snug: 1.25; --leading-base: 1.5; --leading-loose: 1.62; --tracking-display: -0.022em; --tracking-heading: -0.012em; --tracking-body: 0; --tracking-label: 0.02em; --tracking-caps: 0.08em; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Spacing · 4-point base, 8-pt rhythm ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- Radii ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 999px; /* ---------- Shadow / elevation ---------- */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(15,30,22,.04); --shadow-2: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,30,22,.05), 0 8px 24px rgba(15,30,22,.06); --shadow-3: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(15,30,22,.06), 0 16px 40px rgba(15,30,22,.10); --shadow-4: 0 12px 32px rgba(15,30,22,.10), 0 28px 80px rgba(15,30,22,.12); --shadow-velvet: 0 1px 0 rgba(255,255,255,.45) inset, 0 2px 4px rgba(0,0,0,.18), 0 14px 26px rgba(0,0,0,.22), 0 22px 48px rgba(94,157,125,.42); --shadow-focus: 0 0 0 3px var(--color-accent-soft); /* ---------- Motion ---------- */ --ease-snappy: cubic-bezier(.22,1,.36,1); --ease-smooth: cubic-bezier(.4,0,.2,1); --ease-linear: linear; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; /* ---------- Layout ---------- */ --container-narrow: 720px; --container-base: 1080px; --container-wide: 1280px; --sidebar-w: 248px; /* ---------- Z-index layers ---------- */ --z-base: 1; --z-sticky: 10; --z-cta: 80; --z-toast: 90; --z-shell: 100; --z-modal: 200; --z-popover: 300; } /* ============================================================ Base resets + global type ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); font-size:var(--text-md); font-weight:var(--weight-regular); line-height:var(--leading-base); color:var(--color-ink); background:var(--color-bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,picture,svg,video{display:block;max-width:100%} button{font:inherit;background:none;border:0;cursor:pointer;color:inherit} a{color:inherit;text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:3px} input,select,textarea{font:inherit;color:inherit} /* Display headings (public-side hero, page titles). Admin uses sans h1 — see admin.css */ h1,h2,h3,.t-display,.t-h2,.t-h3{ font-family:var(--font-display); font-weight:var(--weight-light); line-height:var(--leading-tight); letter-spacing:var(--tracking-heading); text-wrap:balance; } .t-display{font-size:var(--text-4xl);letter-spacing:var(--tracking-display);line-height:var(--leading-tight)} /* Accessibility */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } *:focus-visible{ outline:2px solid var(--color-accent-strong); outline-offset:2px; border-radius:var(--radius-sm); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } }