/* ========================================================================== StudentHPC — Design Tokens -------------------------------------------------------------------------- Two layers, and the distinction is load-bearing: LAYER 1 PRIMITIVES Raw ramps (--pine-600, --slate-200). Named for what they ARE. Never referenced by a component. LAYER 2 SEMANTIC Roles (--color-text, --surface-inset, --border-base). Named for what they DO. Components use only these. The rule: if you are writing a component and you type a primitive name, stop. Add the semantic token instead. This is what lets the whole site re-theme from one block, and it is why the previous stylesheet — which had five competing accent ramps referenced directly by components — could not. PALETTE INTENT Pine Colorado forest / Rocky Linux. The single brand accent. Graphite Server-rack gray. Carries ~90% of the surface area. Blue Dell enterprise blue. Interaction only: links, focus, selection. It is NOT a second brand color and never appears decoratively. Every foreground/background pair used in the system is verified against WCAG 2.1 AA by tools/check-contrast.py. Run it after changing any value. ========================================================================== */ :root { /* ======================================================================= LAYER 1 — PRIMITIVES ======================================================================= */ /* --- Pine — brand accent -------------------------------------------- */ --pine-950: #08170F; --pine-900: #0D2318; --pine-800: #123021; --pine-700: #17402C; --pine-600: #1D5438; /* primary action bg; white text = 9.4:1 */ --pine-500: #256B48; --pine-400: #35875D; --pine-300: #5BA57F; /* on dark surfaces only */ --pine-200: #97C7AC; --pine-100: #CFE5D9; --pine-50: #EDF5F0; /* --- Graphite — structural gray -------------------------------------- */ --slate-950: #0A0D10; --slate-900: #12161B; /* code block ground */ --slate-800: #1A2027; /* docs sidebar ground */ --slate-700: #262E37; --slate-600: #384250; /* body text */ --slate-500: #566270; /* secondary text — 7.0:1 on white */ --slate-400: #66717E; /* muted text — 4.97:1 white / 4.54:1 on --slate-50 */ --slate-300: #858F99; /* UI borders — 3.29:1, meets AA non-text (1.4.11) */ --slate-200: #C6CDD5; /* borders */ --slate-100: #E1E6EB; /* hairlines */ --slate-50: #F2F5F7; /* section ground */ --slate-25: #F8FAFB; /* inset ground */ --white: #FFFFFF; /* --- Dell blue — interaction ----------------------------------------- */ --blue-800: #003F6B; --blue-700: #005A94; /* link text — 7.1:1 on white */ --blue-600: #0076CE; /* Dell brand tone. >=18px text or non-text ONLY */ --blue-500: #2E93DE; --blue-300: #7FC1EF; /* on dark surfaces */ --blue-200: #A8D4F2; --blue-100: #D7EBFA; --blue-50: #EFF7FD; /* --- Status ---------------------------------------------------------- */ --amber-700: #8A5A00; --amber-500: #B67D14; /* non-text: dots, bars, icon fills — 3.0:1 on wash */ --amber-100: #FBEBCE; --amber-50: #FDF6E9; --red-800: #7F1A1A; --red-700: #A11F1F; --red-500: #D14343; /* non-text */ --red-100: #FADEDE; --red-50: #FDF0F0; /* --- Syntax — verified on --slate-900 -------------------------------- */ --syn-text: #DDE3EA; --syn-prompt: #5BA57F; --syn-keyword: #7FC1EF; --syn-string: #D2B475; --syn-number: #E3A87E; --syn-comment: #909CAA; --syn-path: #9FD4B7; /* ======================================================================= LAYER 2 — SEMANTIC ======================================================================= */ /* --- Surfaces --------------------------------------------------------- */ --surface: var(--white); --surface-subtle: var(--slate-50); --surface-inset: var(--slate-25); --surface-raised: var(--white); --surface-invert: var(--slate-800); --surface-code: var(--slate-900); --surface-brand: var(--pine-600); --surface-brand-dk: var(--pine-900); /* --- Text ------------------------------------------------------------- */ --text: var(--slate-800); /* 14.0:1 on white */ --text-secondary: var(--slate-500); /* 7.0:1 */ --text-muted: var(--slate-400); /* 4.6:1 — smallest allowed */ --text-invert: var(--white); --text-on-invert: #C9D2DB; /* secondary text on dark — 10.7:1 */ /* The muted step on DARK grounds is its own token. --text-muted was darkened to clear AA on white, which necessarily lowered it on dark; reusing it on the sidebar shipped 3.3:1 text. This is the floor for dark grounds. */ --text-invert-muted: var(--slate-300); /* 4.99:1 on --slate-800 */ --text-link: var(--blue-700); --text-link-hover: var(--blue-800); --text-brand: var(--pine-700); /* --- Borders ---------------------------------------------------------- */ --border-hair: var(--slate-100); --border-base: var(--slate-200); --border-strong: var(--slate-300); --border-invert: #2E3742; --border-brand: var(--pine-600); --border-focus: var(--blue-600); /* --- Status roles ----------------------------------------------------- */ --status-ok-fg: var(--pine-700); --status-ok-bg: var(--pine-50); --status-ok-bd: var(--pine-200); --status-ok-dot: var(--pine-500); --status-warn-fg: var(--amber-700); --status-warn-bg: var(--amber-50); --status-warn-bd: var(--amber-100); --status-warn-dot:var(--amber-500); --status-err-fg: var(--red-700); --status-err-bg: var(--red-50); --status-err-bd: var(--red-100); --status-err-dot: var(--red-500); --status-info-fg: var(--blue-700); --status-info-bg: var(--blue-50); --status-info-bd: var(--blue-100); --status-info-dot:var(--blue-600); /* ======================================================================= TYPOGRAPHY ======================================================================= */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Intel One Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; /* Scale — 16px base. Each step has ONE documented role; if you need a size that is not here, the answer is almost always the neighbouring step. */ --fs-3xs: 0.6875rem; /* 11px — uppercase eyebrows/badges ONLY, never prose */ --fs-2xs: 0.75rem; /* 12px — table meta, code-block language label */ --fs-xs: 0.8125rem; /* 13px — captions, footnotes, breadcrumbs */ --fs-sm: 0.875rem; /* 14px — dense UI: sidebar, table cells, buttons */ --fs-base: 1rem; /* 16px — UI default, form inputs */ --fs-md: 1.0625rem; /* 17px — DOCS PROSE. The docs read at this size. */ --fs-lg: 1.1875rem; /* 19px — lead paragraphs, card intros */ --fs-xl: 1.4375rem; /* 23px — h3 / card titles */ --fs-2xl: 1.75rem; /* 28px — h2 / section titles */ --fs-3xl: 2.25rem; /* 36px — h1 in docs */ --fs-4xl: 2.875rem; /* 46px — landing section display */ --fs-5xl: 3.5rem; /* 56px — hero headline (fluid-clamped in use) */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.7; /* prose */ --lh-code: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Intel One Mono has no 600 face. Monospace text that wants emphasis uses this instead of --fw-semibold, so the browser never synthesises a bold. */ --fw-mono-strong: 700; --ls-display: -0.022em; --ls-heading: -0.011em; --ls-normal: 0; --ls-wide: 0.02em; --ls-caps: 0.085em; /* pairs with --fs-3xs uppercase */ /* ======================================================================= SPACE — 4px base ======================================================================= */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ --sp-32: 8rem; /* 128px */ /* ======================================================================= RADIUS — deliberately near-square -------------------------------------------------------------------- Institutional and hardware UIs read as blocky. Rounded corners above ~4px are the single strongest "generic SaaS template" tell, so the scale simply does not offer one. Only the status dot is a circle. ======================================================================= */ --r-0: 0; --r-1: 2px; /* inputs, badges, code chips */ --r-2: 3px; /* buttons, cards, code blocks */ --r-3: 4px; /* max — large panels only */ --r-full: 999px; /* status dots ONLY */ /* ======================================================================= ELEVATION -------------------------------------------------------------------- Depth is expressed with borders and background steps, not shadows. Shadows are reserved for things that genuinely float above the page. ======================================================================= */ --shadow-none: none; --shadow-pop: 0 2px 6px rgba(10, 13, 16, 0.10), 0 0 0 1px rgba(10, 13, 16, 0.05); --shadow-modal:0 12px 32px rgba(10, 13, 16, 0.18); /* ======================================================================= LAYOUT ======================================================================= */ --w-max: 1280px; /* page gutter max */ --w-content: 1120px; /* landing section content */ --w-prose: 72ch; /* docs measure — hard cap on line length */ --w-narrow: 680px; --sidebar-w: 272px; --toc-w: 236px; --topbar-h: 60px; --utilbar-h: 34px; --gutter: var(--sp-6); /* ======================================================================= MOTION — short, linear-ish, and fully removable ======================================================================= */ --motion-fast: 120ms; --motion-base: 180ms; --ease: cubic-bezier(0.2, 0.6, 0.3, 1); /* ======================================================================= FOCUS — one ring, everywhere, never removed ======================================================================= */ --focus-w: 2px; --focus-color: var(--blue-600); --focus-offset: 2px; --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; } /* -------------------------------------------------------------------------- Reduced motion — honoured globally. Every transition/animation in the system funnels through the tokens above so this one block disables them. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }