/* ========================================================================= Shared design system. Tokens live on :root; each app ships a theme.css that overrides the accent ramp and nothing else. Dark mode follows the OS and can be overridden by [data-theme] on . ========================================================================= */ :root { /* Neutral ramp (light) */ --n-0: #ffffff; --n-25: #fbfbfc; --n-50: #f5f6f8; --n-100:#eceef2; --n-200:#dfe2e8; --n-300:#c6cbd4; --n-400:#9aa1ad; --n-500:#717985; --n-600:#525a66; --n-700:#3a414b; --n-800:#252a32; --n-900:#14171c; /* Semantic surfaces */ --bg: var(--n-50); --bg-elevated: var(--n-0); --bg-sunken: var(--n-100); --bg-hover: var(--n-100); --border: var(--n-200); --border-strong: var(--n-300); --text: var(--n-900); --text-muted: var(--n-500); --text-subtle: var(--n-400); --text-inverse: var(--n-0); /* Accent — overridden per app */ --accent-50: #eef4ff; --accent-100: #dbe6ff; --accent-300: #9cb6ff; --accent-500: #3f62e0; --accent-600: #2f4ec4; --accent-700: #243d9c; --accent-contrast: #ffffff; /* Status */ --ok-bg:#e8f6ee; --ok-fg:#186a3b; --ok-border:#a9dcc0; --warn-bg:#fdf3e2; --warn-fg:#8a5a06; --warn-border:#f0d6a4; --bad-bg:#fdecec; --bad-fg:#98221f; --bad-border:#f2bebc; --info-bg:#e9f1fd; --info-fg:#1d4f8f; --info-border:#b6d3f5; /* Data viz — 8-step categorical, tuned for both themes */ --c1:#3f62e0; --c2:#00897b; --c3:#c2610b; --c4:#8e44ad; --c5:#2e7d32; --c6:#c62828; --c7:#0277bd; --c8:#6d4c41; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(16, 20, 28, .06); --shadow-sm: 0 1px 3px rgba(16, 20, 28, .09), 0 1px 2px rgba(16, 20, 28, .05); --shadow-md: 0 4px 14px rgba(16, 20, 28, .09), 0 1px 3px rgba(16, 20, 28, .06); --shadow-lg: 0 18px 44px rgba(16, 20, 28, .14); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --maxw: 1180px; --transition: 140ms cubic-bezier(.4, 0, .2, 1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e1116; --bg-elevated: #161b22; --bg-sunken: #0a0d11; --bg-hover: #1f252e; --border: #262d38; --border-strong: #38414f; --text: #e8eaee; --text-muted: #9aa3b0; --text-subtle: #6b7481; --text-inverse: #0e1116; --accent-50: #16203a; --accent-100: #1c2b4d; --accent-300: #5a79e8; --accent-500: #7091ff; --accent-600: #8aa6ff; --accent-700: #a6bcff; --accent-contrast: #0b1020; --ok-bg:#12271b; --ok-fg:#7ddba3; --ok-border:#265a39; --warn-bg:#2a2011; --warn-fg:#f0c274; --warn-border:#5e4718; --bad-bg:#2c1516; --bad-fg:#f2a5a2; --bad-border:#6a2b29; --info-bg:#131f31; --info-fg:#9cc4f5; --info-border:#2a456b; --c1:#7091ff; --c2:#39c6b4; --c3:#e8a04a; --c4:#c58ae0; --c5:#69c473; --c6:#f07a78; --c7:#5bb6ee; --c8:#bd9a8a; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --shadow-md: 0 4px 16px rgba(0, 0, 0, .5); --shadow-lg: 0 18px 44px rgba(0, 0, 0, .6); } } :root[data-theme="dark"] { --bg:#0e1116; --bg-elevated:#161b22; --bg-sunken:#0a0d11; --bg-hover:#1f252e; --border:#262d38; --border-strong:#38414f; --text:#e8eaee; --text-muted:#9aa3b0; --text-subtle:#6b7481; --text-inverse:#0e1116; --accent-50:#16203a; --accent-100:#1c2b4d; --accent-300:#5a79e8; --accent-500:#7091ff; --accent-600:#8aa6ff; --accent-700:#a6bcff; --accent-contrast:#0b1020; --ok-bg:#12271b; --ok-fg:#7ddba3; --ok-border:#265a39; --warn-bg:#2a2011; --warn-fg:#f0c274; --warn-border:#5e4718; --bad-bg:#2c1516; --bad-fg:#f2a5a2; --bad-border:#6a2b29; --info-bg:#131f31; --info-fg:#9cc4f5; --info-border:#2a456b; --c1:#7091ff; --c2:#39c6b4; --c3:#e8a04a; --c4:#c58ae0; --c5:#69c473; --c6:#f07a78; --c7:#5bb6ee; --c8:#bd9a8a; --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(0,0,0,.5); } /* ------------------------------- reset ------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } h1, h2, h3, h4, h5 { margin: 0 0 var(--space-3); line-height: 1.25; font-weight: 650; letter-spacing: -.011em; } h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); } h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); } h3 { font-size: 1.1rem; } h4 { font-size: .98rem; } p { margin: 0 0 var(--space-4); } a { color: var(--accent-600); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } code, pre, kbd, samp { font-family: var(--font-mono); font-size: .875em; } code:not(pre code) { background: var(--bg-sunken); border: 1px solid var(--border); padding: .1em .38em; border-radius: var(--radius-sm); } pre { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); overflow-x: auto; margin: 0 0 var(--space-4); line-height: 1.5; } kbd { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: .1em .4em; font-size: .78em; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; } img, svg { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; border-radius: var(--radius-sm); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-3); top: -60px; z-index: 100; background: var(--accent-500); color: var(--accent-contrast); padding: var(--space-2) var(--space-4); border-radius: var(--radius); transition: top var(--transition); } .skip-link:focus { top: var(--space-3); } /* ------------------------------- layout ------------------------------ */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-4); } .wrap--narrow { max-width: 780px; } .wrap--wide { max-width: 1400px; } .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg-elevated) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 58px; } .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 1.02rem; color: var(--text); letter-spacing: -.02em; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(140deg, var(--accent-500), var(--accent-700)); color: var(--accent-contrast); font-size: .82rem; font-weight: 800; } .brand__sub { color: var(--text-subtle); font-weight: 450; font-size: .78rem; } .nav { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; } .nav a { color: var(--text-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 500; font-size: .9rem; transition: background var(--transition), color var(--transition); } .nav a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; } .nav a[aria-current="page"] { background: var(--accent-50); color: var(--accent-700); } .spacer { flex: 1 1 auto; } main { padding: var(--space-6) 0 var(--space-8); min-height: 62vh; } .site-footer { border-top: 1px solid var(--border); padding: var(--space-5) 0; color: var(--text-subtle); font-size: .84rem; display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } .page-head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-5); } .page-head p { margin: 0; color: var(--text-muted); max-width: 68ch; } .page-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .grid { display: grid; gap: var(--space-4); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .grid--sidebar { grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; } } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack--sm { gap: var(--space-2); } .row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } /* ------------------------------- cards ------------------------------- */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); } .card--flush { padding: 0; overflow: hidden; } .card--sunken { background: var(--bg-sunken); box-shadow: none; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .card__head h2, .card__head h3 { margin: 0; } .card__body { padding: var(--space-5); } .card__foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--bg-sunken); font-size: .86rem; color: var(--text-muted); } .stat { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); } .stat__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle); font-weight: 650; margin-bottom: var(--space-1); } .stat__value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } .stat__value--sm { font-size: 1.3rem; } .stat__hint { font-size: .8rem; color: var(--text-muted); margin-top: var(--space-1); } /* ------------------------------ buttons ------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: inherit; font-weight: 560; font-size: .9rem; padding: .55em 1.05em; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .btn:hover { background: var(--bg-hover); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } .btn--primary { background: var(--accent-500); border-color: var(--accent-500); color: var(--accent-contrast); box-shadow: var(--shadow-xs); } .btn--primary:hover { background: var(--accent-600); border-color: var(--accent-600); } .btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn--ghost:hover { background: var(--bg-hover); color: var(--text); } .btn--danger { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-fg); } .btn--sm { font-size: .82rem; padding: .38em .8em; } .btn--lg { font-size: 1rem; padding: .7em 1.4em; } .btn--block { width: 100%; } .btn-group { display: inline-flex; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-strong); } .btn-group .btn { border: 0; border-radius: 0; box-shadow: none; } .btn-group .btn + .btn { border-left: 1px solid var(--border-strong); } .btn-group .btn[aria-pressed="true"] { background: var(--accent-50); color: var(--accent-700); } /* ------------------------------- forms ------------------------------- */ .field { display: block; margin-bottom: var(--space-4); } .field__label { display: block; font-weight: 580; font-size: .87rem; margin-bottom: var(--space-2); } .field__hint { font-size: .8rem; color: var(--text-muted); margin-top: var(--space-1); } .field__error { font-size: .82rem; color: var(--bad-fg); margin-top: var(--space-1); } .field--inline { display: flex; align-items: center; gap: var(--space-2); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="url"], select, textarea { width: 100%; font: inherit; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: .55em .75em; transition: border-color var(--transition), box-shadow var(--transition); } input:hover, select:hover, textarea:hover { border-color: var(--text-subtle); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 22%, transparent); } textarea { resize: vertical; min-height: 110px; line-height: 1.55; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2em; } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent-500); } input[type="range"] { width: 100%; accent-color: var(--accent-500); } ::placeholder { color: var(--text-subtle); } fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin: 0 0 var(--space-4); } legend { padding: 0 var(--space-2); font-weight: 600; font-size: .87rem; } /* ------------------------------- tables ------------------------------ */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font-size: .89rem; } table.data th, table.data td { text-align: left; padding: .62em .8em; border-bottom: 1px solid var(--border); vertical-align: top; } table.data thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); font-weight: 680; white-space: nowrap; background: var(--bg-sunken); position: sticky; top: 0; } table.data tbody tr:hover { background: var(--bg-hover); } table.data tbody tr:last-child td { border-bottom: 0; } table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ------------------------------- badges ------------------------------ */ .badge { display: inline-flex; align-items: center; gap: .35em; font-size: .75rem; font-weight: 640; line-height: 1.5; padding: .12em .6em; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg-sunken); color: var(--text-muted); white-space: nowrap; } .badge--ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); } .badge--warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); } .badge--bad { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-border); } .badge--info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); } .badge--accent { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-100); } .dot { width: .55em; height: .55em; border-radius: 50%; background: currentColor; flex: none; } /* ------------------------------- alerts ------------------------------ */ .alert { display: flex; gap: var(--space-3); align-items: flex-start; border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--bg-sunken); margin-bottom: var(--space-4); font-size: .9rem; } .alert p:last-child { margin-bottom: 0; } .alert--ok { background: var(--ok-bg); border-color: var(--ok-border); border-left-color: var(--ok-fg); color: var(--ok-fg); } .alert--warn { background: var(--warn-bg); border-color: var(--warn-border); border-left-color: var(--warn-fg); color: var(--warn-fg); } .alert--bad { background: var(--bad-bg); border-color: var(--bad-border); border-left-color: var(--bad-fg); color: var(--bad-fg); } .alert--info { background: var(--info-bg); border-color: var(--info-border); border-left-color: var(--info-fg); color: var(--info-fg); } /* ------------------------------ progress ----------------------------- */ .meter { height: 8px; border-radius: var(--radius-pill); background: var(--bg-sunken); overflow: hidden; border: 1px solid var(--border); } .meter__fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent-500); transition: width 340ms cubic-bezier(.4, 0, .2, 1); } .meter__fill--ok { background: var(--ok-fg); } .meter__fill--warn { background: var(--warn-fg); } .meter__fill--bad { background: var(--bad-fg); } .meter--lg { height: 14px; } .ring { --v: 0; display: grid; place-items: center; width: 108px; height: 108px; position: relative; } .ring__svg { position: absolute; inset: 0; transform: rotate(-90deg); } .ring__track { fill: none; stroke: var(--bg-sunken); stroke-width: 9; } .ring__value { fill: none; stroke: var(--accent-500); stroke-width: 9; stroke-linecap: round; } .ring__label { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* --------------------------------- tabs ------------------------------ */ .tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); overflow-x: auto; } .tabs button, .tabs a { font: inherit; font-size: .89rem; font-weight: 550; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--space-3) var(--space-4); color: var(--text-muted); white-space: nowrap; } .tabs button:hover, .tabs a:hover { color: var(--text); text-decoration: none; } .tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--accent-700); border-bottom-color: var(--accent-500); } /* ------------------------------- misc -------------------------------- */ .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .small { font-size: .84rem; } .tiny { font-size: .76rem; } .mono { font-family: var(--font-mono); } .nowrap { white-space: nowrap; } .tnum { font-variant-numeric: tabular-nums; } .center { text-align: center; } .right { text-align: right; } .bold { font-weight: 650; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .flex-1 { flex: 1 1 auto; min-width: 0; } .hidden { display: none !important; } .pre-wrap { white-space: pre-wrap; word-break: break-word; } .empty { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-sunken); } .empty h3 { color: var(--text); } .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .chip { font-size: .8rem; padding: .25em .7em; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-muted); cursor: pointer; font-weight: 520; } .chip:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; } .chip[aria-pressed="true"], .chip--on { background: var(--accent-50); border-color: var(--accent-300); color: var(--accent-700); } .spinner { width: 15px; height: 15px; border-radius: 50%; flex: none; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .toast-host { position: fixed; inset-block-end: var(--space-5); inset-inline-end: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); z-index: 90; max-width: 360px; } .toast { background: var(--n-800); color: #fff; padding: var(--space-3) var(--space-4); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: .87rem; animation: toast-in 180ms ease-out; } .toast--bad { background: #8d1f1c; } .toast--ok { background: #165c34; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } .theme-toggle { background: none; border: 1px solid var(--border-strong); color: var(--text-muted); border-radius: var(--radius); width: 34px; height: 30px; cursor: pointer; display: grid; place-items: center; font-size: .9rem; flex: none; } .theme-toggle:hover { background: var(--bg-hover); color: var(--text); } .diff ins { background: var(--ok-bg); color: var(--ok-fg); text-decoration: none; border-radius: 3px; padding: 0 2px; } .diff del { background: var(--bad-bg); color: var(--bad-fg); border-radius: 3px; padding: 0 2px; } @media print { .site-header, .site-footer, .page-head__actions, .btn, .theme-toggle, .tabs { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; } main { padding: 0; } a { color: #000; } }