/* ============================================================= DSI / Tempo Design Foundations (colors, type, spacing, radii, shadows, motion) -------------------------------------------------------------- Aligned with the "UW–Madison Design System" Claude Design project, whose source of truth is the official UW Theme template (uw-style.css v5.3.0 — vendored next to this file). The app canvas is white, sections are gray-lightest #f3f3f3, hairlines are #cfcfcf, and the two accents are Badger Red (primary action / danger) and the UW link blue #036796. DSI's own mark (monogram + mini-bar + prairie lines, see static/img/dsi-*.svg) provides the department identity inside the UW chrome; the palette below stays 100% UW-official. Load order (see base.html): this file → uw-style.css (chrome, self-contained tokens) → styles.css (Tailwind: base+components+ utilities). Tailwind mirrors these tokens via tailwind.config.js. Fonts are SELF-HOSTED (WOFF2 in ../fonts/) rather than the cdn.wisc.cloud stylesheet the official template uses — the app must run offline / behind the UW VM CSP. JetBrains Mono is not vendored; the --font-mono stack degrades to system monospace. ============================================================= */ /* ---- Fonts (self-hosted UW brand fonts) --------------------- */ @font-face { font-family: "Red Hat Display"; src: url("../fonts/redhat-display-latin.911a95787a33.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Red Hat Display"; src: url("../fonts/redhat-display-latin-ext.dd7e89e94fb3.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Red Hat Display"; src: url("../fonts/redhat-display-italic-latin.99f4470e5b73.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; } @font-face { font-family: "Red Hat Display"; src: url("../fonts/redhat-display-italic-latin-ext.ad8aa36dcbf3.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Red Hat Text"; src: url("../fonts/redhat-text-latin.d643e050751b.woff2") format("woff2"); font-weight: 300 625; font-style: normal; font-display: swap; } @font-face { font-family: "Red Hat Text"; src: url("../fonts/redhat-text-latin-ext.0c701fdcba79.woff2") format("woff2"); font-weight: 300 625; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Red Hat Text"; src: url("../fonts/redhat-text-italic-latin.97ae8856b5ac.woff2") format("woff2"); font-weight: 300 625; font-style: italic; font-display: swap; } @font-face { font-family: "Red Hat Text"; src: url("../fonts/redhat-text-italic-latin-ext.1382f71bf320.woff2") format("woff2"); font-weight: 300 625; font-style: italic; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --------------------------------------------------------- Official UW Theme tokens (camelCase names verbatim from uw-style.css :root). NEVER tint the red. --------------------------------------------------------- */ --uwRed: #c5050c; /* Badger Red — Pantone 200 C */ --uwRedDark: #9b0000; /* crimson — hover, press */ --uwGrayDark: #282728; /* charcoal — secondary text, footer bg */ --uwGrayLight: #e1e5e7; --uwGrayLightest: #f3f3f3; /* section backgrounds */ --uwWhite: #ffffff; --uwBlack: #121212; /* NOT pure #000 */ /* Documented extensions (kebab-case, from the design system) */ --uw-link: #036796; /* primary color */ --uw-link-hover: #023d54; --uw-border: #cfcfcf; /* hairline */ --uw-yellow: #ffb500; /* accent — pair with --uwBlack text only */ --uw-gray-blue: #6b8f99; /* chart/data accent */ --uw-blue: #385966; /* chart/data accent */ --uw-footer-fg: #adadad; /* on charcoal only — fails AA on white */ /* Convenience aliases used by component CSS */ --badger-red: var(--uwRed); --crimson: var(--uwRedDark); /* --------------------------------------------------------- Semantic roles — reach for these in new code. Muted text is #5a5a5a (6.9:1 on white, 6.2:1 on gray-lightest). --------------------------------------------------------- */ --fg-1: var(--uwBlack); /* primary text */ --fg-2: var(--uwGrayDark); /* secondary text */ --fg-3: #5a5a5a; /* captions, meta */ --fg-on-red: var(--uwWhite); --bg: var(--uwWhite); /* page canvas */ --bg-elev: var(--uwWhite); /* card surfaces */ --bg-section: var(--uwGrayLightest); --border: var(--uw-border); --border-strong: #adadad; /* decorative edges only, never text */ --link: var(--uw-link); --link-hover: var(--uw-link-hover); --accent: var(--uwRed); --accent-hover: var(--uwRedDark); --success: #3e6b21; /* green, 5.9:1 on white */ --warning: #b07700; /* amber text, AA on white */ --danger: var(--uwRed); --info: var(--uw-link); /* --------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------- */ --font-display: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif; /* @kind font */ --font-body: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif; /* @kind font */ --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* @kind font */ /* Type scale */ --fs-12: 0.75rem; /* @kind font */ --fs-14: 0.875rem; /* @kind font */ --fs-16: 1rem; /* @kind font */ --fs-18: 1.125rem; /* @kind font — official --uwFontSizeBase */ --fs-20: 1.25rem; /* @kind font */ --fs-24: 1.5rem; /* @kind font */ --fs-30: 1.875rem; /* @kind font */ --fs-36: 2.25rem; /* @kind font */ --fs-48: 3rem; /* @kind font */ --fs-60: 3.75rem; /* @kind font */ --fs-72: 4.5rem; /* @kind font */ --fs-96: 6rem; /* @kind font */ /* Line heights */ --lh-tight: 1.05; /* @kind font */ --lh-snug: 1.15; /* @kind font */ --lh-normal: 1.4; /* @kind font */ --lh-relaxed: 1.55; /* @kind font */ --lh-loose: 1.65; /* @kind font */ /* Letter-spacing */ --tracking-tight: -0.02em; /* @kind font */ --tracking-normal: 0; /* @kind font */ --tracking-wide: 0.02em; /* @kind font */ --tracking-eyebrow: 0.12em; /* @kind font */ /* ---- Spacing — 8px base unit ---- */ --space-1: 4px; /* @kind spacing */ --space-2: 8px; /* @kind spacing */ --space-3: 12px; /* @kind spacing */ --space-4: 16px; /* @kind spacing */ --space-5: 24px; /* @kind spacing */ --space-6: 32px; /* @kind spacing */ --space-7: 48px; /* @kind spacing */ --space-8: 64px; /* @kind spacing */ --space-9: 96px; /* @kind spacing */ --space-10: 128px; /* @kind spacing */ /* ---- Radii — 0.5rem is the canonical UW button radius ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 999px; /* ---- Shadows — button shadow is the official UW spec ---- */ --shadow-button: 2px 2px 6px 0 rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 2px rgba(18, 18, 18, 0.06); --shadow-md: 0 2px 8px rgba(18, 18, 18, 0.08); --shadow-lg: 0 8px 24px rgba(18, 18, 18, 0.15); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 180ms; /* @kind other */ --dur-slow: 280ms; /* @kind other */ /* ---- Layout ---- */ --container: 1200px; /* @kind spacing */ --gutter: 32px; /* @kind spacing */ --gutter-sm: 20px; /* @kind spacing */ /* ---- Mini-bar dimensions (matches uw-style.css .uw-mini-bar) ---- */ --mini-bar-w: 1.5em; --mini-bar-h: 0.2em; /* =========================================================== BACK-COMPAT aliases — legacy names still referenced by the vendored chrome or older component CSS. All resolve to the official palette above. =========================================================== */ --uw-red: var(--uwRed); --uw-red-dark: var(--uwRedDark); --uw-white: var(--uwWhite); --uw-black: var(--uwBlack); --uw-gray: var(--uwGrayLight); --uwDisplayFont: var(--font-display); /* @kind font */ --uwTextFont: var(--font-body); /* @kind font */ --ink: var(--uwBlack); --ink-soft: var(--uwGrayDark); --ink-mute: var(--fg-3); --bone: var(--uwWhite); --paper: var(--uwWhite); --cream: var(--uwGrayLightest); --mist: var(--uw-border); --white: var(--uwWhite); --slate: var(--uw-link); --slate-soft: var(--uw-link-hover); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; /* @kind other */ --dur-base: 0ms; /* @kind other */ --dur-slow: 0ms; /* @kind other */ } }