/* ═══════════════════════════════════════════════════════════ MINIMAL THEME Activate: add data-style="minimal" to . Editorial and monochrome — clean sans headings, hairline borders, a single near-black / near-white accent. Owns its palette, type scale and radius scale outright; only the class contract in base.css is shared. ═══════════════════════════════════════════════════════════ */ /* ── Minimal light ── */ /* ── Minimal palette ── the accents are heavily desaturated so colour reads as a quiet index, never decoration; hue survives, volume does not. ── */ html[data-style='minimal'] { --p-accent-1: #5b8c86; --p-accent-2: #a8657f; --p-accent-3: #9c8748; --p-accent-4: #7a72a3; --p-accent-5: #5f7da8; --p-accent-6: #a86a63; --p-accent-7: #6f8f5f; --p-accent-8: #a8794f; --p-info: #5f7da8; --p-success: #6f8f5f; --p-warn: #9c8748; --p-danger: #a86a63; --p-on-accent: #ffffff; /* Editorial restraint: a modest top step, generous leading, wide steps. */ --t-h1: clamp(2rem, 1.5rem + 2.2vw, 2.9rem); --t-h2: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem); --t-lh-display: 1.15; --t-lh-body: 1.7; --t-track-display: -0.022em; /* Print-adjacent corners: barely there. A 1rem card radius is the single loudest tell of the generic docs-kit look this theme is defined against, so every step is pulled back to a crisp near-square. */ --r-xs: 0.125rem; --r-sm: 0.25rem; --r-md: 0.3rem; --r-lg: 0.375rem; } html[data-style='minimal'] { --c-bg: #ffffff; --c-surface: #ffffff; --c-border: #ececec; --c-muted: #757575; --c-text: #17171a; --c-text-sub: #6b6b70; --c-dot: #ededed; --c-nav-bg: rgba(255, 255, 255, 0.85); --c-accent: #17171a; --c-accent-2: #73737a; --c-accent-3: #a3a3aa; /* Text/icons sitting ON a --c-accent fill (accent is near-black here). */ --c-on-accent: #ffffff; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-accent-2); } /* ── Minimal dark ── */ html[data-style='minimal'][data-theme='dark'] { --c-bg: #0b0b0c; --c-surface: #141416; --c-border: #262629; --c-muted: #7f7f86; --c-text: #f2f2f4; --c-text-sub: #9c9ca4; --c-dot: #1f1f22; --c-nav-bg: rgba(11, 11, 12, 0.85); --c-accent: #f2f2f4; --c-accent-2: #8f8f98; --c-accent-3: #5c5c63; --c-on-accent: #0b0b0c; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-accent-2); } /* ── Minimal dark (system preference) ── */ @media (prefers-color-scheme: dark) { html[data-style='minimal']:not([data-theme]) { --c-bg: #0b0b0c; --c-surface: #141416; --c-border: #262629; --c-muted: #7f7f86; --c-text: #f2f2f4; --c-text-sub: #9c9ca4; --c-dot: #1f1f22; --c-nav-bg: rgba(11, 11, 12, 0.85); --c-accent: #f2f2f4; --c-accent-2: #8f8f98; --c-accent-3: #5c5c63; --c-on-accent: #0b0b0c; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-accent-2); } } /* ══════════════════════════════════════════════════════════ MINIMAL STYLE OVERRIDES Applied to html[data-style='minimal'] ══════════════════════════════════════════════════════════ */ /* ── Clean sans headings (no PT Mono): one-family system, headings are the body face at 600 with tight tracking ── */ html[data-style='minimal'] h1, html[data-style='minimal'] h2, html[data-style='minimal'] h3, html[data-style='minimal'] h4, html[data-style='minimal'] h5, html[data-style='minimal'] h6 { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; } html[data-style='minimal'] .gradient-text { font-weight: 600; letter-spacing: -0.02em; } /* ── Hairline cards: no lift shadow, border darkens on hover ── */ html[data-style='minimal'] .card:hover, html[data-style='minimal'] .link-card:hover { box-shadow: none; transform: translateY(-2px); border-color: var(--c-text); } /* ══════════════════════════════════════════════════════════ MINIMAL — new element classes (forms / feedback / nav) Restraint only: hairline focus rings instead of a wide glow, alerts drop their tinted fill for a neutral surface + a coloured left edge, badges go outlined instead of solid. The accent itself is already monochrome here, so controls that lean on --c-accent (checked states, active tab/page) need no further re-tinting. ══════════════════════════════════════════════════════════ */ /* ── Quieter, thinner focus rings ── */ html[data-style='minimal'] .input:focus-visible, html[data-style='minimal'] .select:focus-visible, html[data-style='minimal'] .checkbox:focus-visible, html[data-style='minimal'] .radio:focus-visible, html[data-style='minimal'] .switch:focus-visible, html[data-style='minimal'] .tab:focus-visible, html[data-style='minimal'] .page:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 22%, transparent); } /* ── Alerts: neutral surface, no tinted fill — the variant lives in a hairline border tinted from the palette, nothing louder ── */ html[data-style='minimal'] .alert { background: var(--c-surface); } html[data-style='minimal'] .alert-info { background: var(--c-surface); border-color: color-mix(in srgb, var(--p-info) 45%, var(--c-border)); } html[data-style='minimal'] .alert-success { background: var(--c-surface); border-color: color-mix(in srgb, var(--p-success) 45%, var(--c-border)); } html[data-style='minimal'] .alert-warn { background: var(--c-surface); border-color: color-mix(in srgb, var(--p-warn) 50%, var(--c-border)); } html[data-style='minimal'] .alert-error { background: var(--c-surface); border-color: color-mix(in srgb, var(--p-danger) 45%, var(--c-border)); } /* ── Badges: outlined, not solid — text stays --c-text (monochrome), the palette only tints the hairline border. ── */ html[data-style='minimal'] .badge { background: transparent; border: 1px solid var(--c-border); color: var(--c-text); font-weight: 600; } html[data-style='minimal'] .badge-accent-1, html[data-style='minimal'] .badge-accent-2, html[data-style='minimal'] .badge-accent-3, html[data-style='minimal'] .badge-accent-4, html[data-style='minimal'] .badge-accent-5, html[data-style='minimal'] .badge-accent-6, html[data-style='minimal'] .badge-accent-7, html[data-style='minimal'] .badge-accent-8 { background: transparent; border: 1px solid var(--c-border); color: var(--c-text); } html[data-style='minimal'] .badge-accent-1 { border-color: var(--p-accent-1); } html[data-style='minimal'] .badge-accent-2 { border-color: var(--p-accent-2); } html[data-style='minimal'] .badge-accent-3 { border-color: var(--p-accent-3); } html[data-style='minimal'] .badge-accent-4 { border-color: var(--p-accent-4); } html[data-style='minimal'] .badge-accent-5 { border-color: var(--p-accent-5); } html[data-style='minimal'] .badge-accent-6 { border-color: var(--p-accent-6); } html[data-style='minimal'] .badge-accent-7 { border-color: var(--p-accent-7); } html[data-style='minimal'] .badge-accent-8 { border-color: var(--p-accent-8); }