/* ========================================================================== ICL Design System — Design Tokens -------------------------------------------------------------------------- Tier 1: PRIMITIVES — raw values. Never reference these in component CSS. Tier 2: SEMANTIC — role-based aliases. Components consume these. Themes (tokens/themes.css) override semantic accent tokens per project. ========================================================================== */ :root { /* ------------------------------------------------------------------ TIER 1 · PRIMITIVES ------------------------------------------------------------------ */ /* Tennessee Orange — UT primary. Accent use only; never body text lighter than orange-600 (contrast). */ --icl-orange-50: #FFF4E5; --icl-orange-100: #FFE3C2; --icl-orange-200: #FFC58A; --icl-orange-300: #FFA64D; --icl-orange-400: #FF9124; --icl-orange-500: #FF8200; /* PMS 151 — the brand orange */ --icl-orange-600: #D96F00; --icl-orange-700: #AD5800; /* AA text on white */ --icl-orange-800: #854400; --icl-orange-900: #5C2F00; /* Smokey — UT's warm-neutral gray family (black is not in the palette; Smokey stands in for it). */ --icl-gray-900: #2E2F30; --icl-gray-800: #454648; --icl-gray-700: #58595B; /* Smokey */ --icl-gray-600: #6E7072; --icl-gray-500: #838588; --icl-gray-400: #A5A7A9; --icl-gray-300: #C4C5C7; --icl-gray-200: #DDDEDF; --icl-gray-100: #EFEFEF; --icl-gray-50: #F6F6F6; --icl-white: #FFFFFF; /* Globe — UT secondary blue. The link color on every property and theme (historically, links on the web are blue). */ --icl-globe-300: #7CC3E0; --icl-globe-600: #006C93; /* AA text on white and on Limestone */ --icl-globe-700: #00577A; /* Limestone — UT warm neutral (CMYK 5 5 10 0 → #F0EDE4 at the 100 step), extended to a full ramp. THE structural neutral family (adopted v0.3, replacing the legacy site's cool Slate): light surfaces at the top of the ramp, the dark stone bands at the bottom. */ --icl-limestone-50: #F8F6F0; --icl-limestone-75: #F4F1EA; /* half-step: large surfaces (100 reads strong across a whole band) */ --icl-limestone-100: #F0EDE4; /* the brand value */ --icl-limestone-200: #E1DBCB; --icl-limestone-300: #CBC2A9; --icl-limestone-400: #ACA083; --icl-limestone-500: #8B8066; --icl-limestone-600: #6C634D; --icl-limestone-700: #524B3A; --icl-limestone-800: #3A352A; --icl-limestone-900: #27231B; --icl-limestone-950: #181510; /* Back-compat aliases */ --icl-limestone: var(--icl-limestone-100); --icl-limestone-border: var(--icl-limestone-200); /* Project accent primitives (see themes.css for full theme sets) */ --icl-magma-500: #E03A2F; /* molten red */ --icl-magma-700: #AC2A21; --icl-papi-500: #64A03C; /* instrument green */ --icl-papi-700: #447127; --icl-slateproj-500: #4E7FA0; /* slate blue */ --icl-slateproj-700: #38607C; --icl-plasma-500: #7D5BA6; /* ionized violet */ --icl-plasma-700: #5F4287; --icl-parsec-500: #0E8078; /* deep teal (kin to UT Valley) */ --icl-parsec-700: #00655F; /* Status */ --icl-blue-600: #1B6E9B; --icl-blue-100: #DEEFF7; --icl-green-600: #2F7D3B; --icl-green-100: #E1F1E3; --icl-yellow-600:#8A6D00; --icl-yellow-100:#FBF3D0; --icl-red-600: #B3261E; --icl-red-100: #F9E0DE; /* Type families — Adobe Fonts (kit: proxima-nova, merriweather, acumin-pro, rift). Fallbacks keep layout stable if the kit fails. */ --icl-font-display: "rift", "Oswald", "Arial Narrow", sans-serif; --icl-font-sans: "proxima-nova", "acumin-pro", "Helvetica Neue", Arial, sans-serif; --icl-font-serif: "merriweather", Georgia, "Times New Roman", serif; --icl-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Type scale — 1.25 ratio, fluid at display sizes */ --icl-text-xs: 0.75rem; --icl-text-sm: 0.875rem; --icl-text-md: 1rem; --icl-text-lg: 1.125rem; --icl-text-xl: 1.25rem; --icl-text-2xl: 1.5625rem; --icl-text-3xl: 1.953rem; --icl-text-4xl: clamp(2rem, 1.5rem + 2vw, 2.441rem); --icl-text-5xl: clamp(2.4rem, 1.8rem + 3vw, 3.052rem); --icl-text-display: clamp(2.75rem, 2rem + 4vw, 4.5rem); --icl-leading-tight: 1.15; --icl-leading-snug: 1.35; --icl-leading-normal: 1.6; --icl-leading-loose: 1.8; --icl-tracking-wide: 0.06em; --icl-tracking-caps: 0.1em; /* Space — 4px base */ --icl-space-1: 0.25rem; --icl-space-2: 0.5rem; --icl-space-3: 0.75rem; --icl-space-4: 1rem; --icl-space-5: 1.5rem; --icl-space-6: 2rem; --icl-space-7: 3rem; --icl-space-8: 4rem; --icl-space-9: 6rem; --icl-space-10: 8rem; /* Radius — crisp, technical. Reserve large radii for pills only. */ --icl-radius-sm: 2px; --icl-radius-md: 4px; --icl-radius-lg: 8px; --icl-radius-full: 999px; /* Elevation — restrained, warmed to the limestone ink. The two inset shadows are the sunken twins of --icl-shadow-sm (same ink, same 2px softness): raised elements cast it outward, sunken ones catch it inward. -inset = even on all sides, for sunken panels (boxes/cards on the sunken surface; NOT small inline code chips). -inset-band = top + bottom only, for full-width sunken bands. */ --icl-shadow-sm: 0 1px 2px rgba(24, 21, 16, 0.08); --icl-shadow-md: 0 2px 8px rgba(24, 21, 16, 0.12); --icl-shadow-lg: 0 8px 24px rgba(24, 21, 16, 0.16); --icl-shadow-inset: inset 0 0 2px rgba(24, 21, 16, 0.08); --icl-shadow-inset-band: inset 0 1px 2px rgba(24, 21, 16, 0.08), inset 0 -1px 2px rgba(24, 21, 16, 0.08); /* Signature keyline — the orange rule inherited from icl.utk.edu */ --icl-keyline-width: 3px; /* Layout */ --icl-container-max: 72rem; /* 1152px */ --icl-container-narrow: 46rem; /* long-form reading measure */ --icl-container-pad: clamp(1rem, 4vw, 2rem); /* Motion */ --icl-ease: cubic-bezier(0.2, 0, 0.2, 1); --icl-duration-fast: 120ms; --icl-duration-base: 200ms; /* ------------------------------------------------------------------ TIER 2 · SEMANTIC — components reference ONLY these ------------------------------------------------------------------ */ /* Surfaces */ --icl-color-bg: var(--icl-white); --icl-color-surface: var(--icl-white); --icl-color-surface-sunken: var(--icl-limestone-75); /* 100 is too strong across a full band; it stays in play for smaller washes */ --icl-color-surface-raised: var(--icl-white); --icl-color-inverse-bg: var(--icl-limestone-900); --icl-color-inverse-surface: var(--icl-limestone-800); /* Text. Muted and subtle are tuned (not raw Smokey steps) so they meet AA: muted clears 4.5:1 on the limestone-75 sunken band; subtle clears 4.5:1 on white but is NOT AA on limestone — keep subtle to white surfaces or large text, never small text on a limestone band. */ --icl-color-text: var(--icl-gray-800); --icl-color-text-muted: #67696B; --icl-color-text-subtle: #727376; --icl-color-heading: var(--icl-limestone-900); --icl-color-ink: var(--icl-limestone-950); /* deepest warm ink — hero text on light bands (same value on-accent resolves to at lab level, but NOT the theme-overridable on-accent slot) */ --icl-color-inverse-text: var(--icl-limestone-100); --icl-color-inverse-text-subtle: var(--icl-limestone-300); --icl-color-inverse-heading: var(--icl-white); /* Accent — the per-project theme surface area. Default theme = ICL institutional (Tennessee Orange). Project themes override these. */ --icl-color-accent: var(--icl-orange-500); --icl-color-accent-strong: var(--icl-orange-700); /* AA text on white */ --icl-color-accent-soft: var(--icl-orange-50); /* tint wash */ --icl-color-on-accent: var(--icl-limestone-950); /* text atop accent */ --icl-color-accent-inverse: var(--icl-orange-500);/* accent on dark — true Tennessee Orange passes AA on the limestone-900 stone bands */ /* Links — Globe blue on every property and theme; NOT part of the per-project accent slot. */ --icl-color-link: var(--icl-globe-600); --icl-color-link-hover: var(--icl-limestone-950); --icl-color-inverse-link: var(--icl-globe-300); /* White text for filled emphasis/CTA buttons whose fill is dark enough to carry it (e.g. the download button's Globe-blue on the lab theme). */ --icl-color-on-emphasis: var(--icl-white); /* Eyebrows & kickers — the pure accent hue on every theme (ICL orange #FF8200, each project its accent). Treated as WCAG "incidental text" (the real headline sits below), so exempt from the 4.5:1 body-text gate; that's what lets true Tennessee Orange be used here. Blue stays reserved for links. */ --icl-color-eyebrow: var(--icl-color-accent); --icl-color-eyebrow-inverse: var(--icl-color-accent-inverse); /* Borders & lines */ --icl-color-border: var(--icl-limestone-200); --icl-color-border-strong: var(--icl-limestone-400); --icl-color-inverse-border: var(--icl-limestone-600); --icl-color-keyline: var(--icl-color-accent); /* Signature background effect (.icl-background-fx) — adaptive: scanlines on light bands, crossed grid on dark stone bands. Light scanlines are limestone-500 ink laid down with multiply (see icl.css) so they pick up the surface's warmth instead of reading gray; they carry a touch more ink than the grid since a single direction works harder. */ --icl-grid-size: 16px; /* dark grid pitch */ --icl-scanline-size: 6px; /* light scanline pitch */ --icl-color-scanline: rgba(139, 128, 102, 0.3); /* limestone-500 ink, light bands */ --icl-color-inverse-grid-line: rgba(255, 255, 255, 0.075);/* grid ink, dark stone bands */ /* Feature-strength line inks — same hues, more ink. Used where the pattern is part of the composition rather than a whisper (the hero background suite bumps its bands to these). */ --icl-color-scanline-strong: rgba(139, 128, 102, 0.5); --icl-color-inverse-grid-line-strong: rgba(255, 255, 255, 0.16); /* Focus */ --icl-color-focus-ring: var(--icl-blue-600); /* Status */ --icl-color-info: var(--icl-blue-600); --icl-color-info-bg: var(--icl-blue-100); --icl-color-success: var(--icl-green-600); --icl-color-success-bg: var(--icl-green-100); --icl-color-warning: var(--icl-yellow-600); --icl-color-warning-bg: var(--icl-yellow-100); --icl-color-danger: var(--icl-red-600); --icl-color-danger-bg: var(--icl-red-100); }