/* ========================================================= WARDN DESIGN SYSTEM Color/type/radius/shadow/motion values come from tokens.css (design/tokens/tokens.css, symlinked here as stylesheets/tokens.css, loaded before this file). Nothing below should hardcode a value that already has a --wardn-* token — edit tokens.css instead. ========================================================= */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/space-grotesk-latin-variable.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/space-grotesk-latin-variable.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/space-grotesk-latin-variable.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/inter-latin-variable.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-variable.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-variable.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-variable.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-latin-variable.woff2') format('woff2'); } :root { /* Wardn Accent Colors */ --md-sys-color-primary: var(--wardn-accent); --md-sys-color-primary-light: var(--wardn-accent-wash); --md-sys-color-primary-dark: var(--wardn-accent-hover); --md-sys-color-on-primary: #ffffff; /* Light Mode Colors (Neutral Ramp) */ --md-sys-color-background: var(--wardn-canvas-light); --md-sys-color-surface: var(--wardn-surface-light); /* Typography Variables */ --md-typeset-font-size: 15px; --md-typeset-line-height: 1.7; } /* * Material sets --md-default-* directly on [data-md-color-scheme] (which lives * on ), not on :root. A value declared straight on an element always wins * over one merely inherited from :root on , whatever the source order — so * these have to be overridden on the same selector Material uses, per scheme, or * every themed component that reads them (search, code-copy tooltips, …) quietly * falls back to Material's own black-on-white pair instead of wardn's tokens. */ [data-md-color-scheme='default'] { --md-default-bg-color: var(--wardn-canvas-light); --md-default-fg-color: var(--wardn-ink-light); --md-default-fg-color--light: var(--wardn-muted-light); --md-default-fg-color--lighter: var(--wardn-border-light); --md-code-bg-color: var(--wardn-sunken-light); --md-typeset-a-color: var(--wardn-accent); } /* Dark Mode Colors (Plum-based) */ [data-md-color-scheme='slate'] { --md-sys-color-background: var(--wardn-canvas-dark); --md-sys-color-surface: var(--wardn-surface-dark); --md-default-bg-color: var(--wardn-canvas-dark); --md-code-bg-color: var(--wardn-sunken-dark); --md-default-fg-color: var(--wardn-ink-dark); --md-default-fg-color--light: var(--wardn-muted-dark); --md-default-fg-color--lighter: var(--wardn-border-dark); --md-typeset-a-color: var(--wardn-accent-on-dark); } /* Base Body Styling */ body { font-family: var(--wardn-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ================= HEADER ================= */ .md-header { background-color: var(--md-sys-color-background) !important; color: var(--md-default-fg-color); border-bottom: 1px solid var(--md-default-fg-color--lighter); box-shadow: var(--wardn-shadow-none); } .md-header .md-header__button, .md-header .md-header__topic { color: inherit !important; font-weight: var(--wardn-weight-semibold); font-family: var(--wardn-font-display); } /* ================= SIDEBAR ================= */ .md-sidebar--primary { background-color: var(--md-sys-color-surface); border-right: 1px solid var(--md-default-fg-color--lighter); } .md-nav { font-size: 14px; } .md-nav__item { margin-bottom: 2px; } .md-nav__link { color: var(--md-default-fg-color--light); transition: all var(--wardn-motion-fast); padding: 6px 10px; border-radius: var(--wardn-radius-sm); } .md-nav__link:hover { background: var(--md-sys-color-primary-light); color: var(--md-sys-color-primary-dark); } [data-md-color-scheme='slate'] .md-nav__link:hover { background: rgba(255, 255, 255, 0.1); color: var(--wardn-ink-dark); } .md-nav__item--active > .md-nav__link { color: var(--md-sys-color-primary) !important; background: var(--md-sys-color-primary-light); font-weight: var(--wardn-weight-semibold); } [data-md-color-scheme='slate'] .md-nav__item--active > .md-nav__link { color: var(--wardn-accent-on-dark) !important; background: rgba(180, 83, 172, 0.15); } /* ================= TYPOGRAPHY ================= */ .md-typeset { color: var(--md-default-fg-color); font-size: var(--md-typeset-font-size); line-height: var(--md-typeset-line-height); } .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 { font-family: var(--wardn-font-display); color: var(--md-default-fg-color); font-weight: var(--wardn-weight-semibold); letter-spacing: -0.01em; } /* Sizes */ .md-typeset h1 { font-size: 2rem; margin-bottom: 1.2em; } .md-typeset h2 { font-size: 1.4rem; margin-top: 1.8em; padding-bottom: 0.2em; border-bottom: 1px solid var(--md-default-fg-color--lighter); } .md-typeset h3 { font-size: 1.15rem; } /* ================= BLOCKS & ELEMENTS ================= */ /* Code Blocks */ .md-typeset pre > code { font-family: var(--wardn-font-mono); border-radius: var(--wardn-radius-sm); border: 1px solid var(--md-default-fg-color--lighter); background-color: var(--md-code-bg-color) !important; box-shadow: var(--wardn-shadow-none); font-size: 13.5px; } .md-typeset code { font-family: var(--wardn-font-mono); } /* Admonitions (Alerts) */ .md-typeset .admonition { border-radius: var(--wardn-radius-sm); border: 1px solid var(--md-default-fg-color--lighter); background: var(--md-sys-color-surface); box-shadow: var(--wardn-shadow-none); font-size: 14.5px; } /* Links */ .md-content a:not(.md-content__button) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--md-typeset-a-color) 40%, transparent); text-underline-offset: 3px; color: var(--md-typeset-a-color); } .md-content a:not(.md-content__button):hover { color: var(--wardn-accent-hover); text-decoration-color: var(--wardn-accent-hover); } [data-md-color-scheme='slate'] .md-content a:not(.md-content__button):hover { color: var(--wardn-accent-on-dark); text-decoration-color: var(--wardn-accent-on-dark); } /* Mermaid Diagrams */ .mermaid { background: var(--md-sys-color-surface); border-radius: var(--wardn-radius-md); border: 1px solid var(--md-default-fg-color--lighter); padding: 1.5rem; margin: 2rem 0; display: flex; justify-content: center; box-shadow: var(--wardn-shadow-none); } .mermaid svg { max-width: 100%; }