/* ========================================================================= Foundations — adapted from the Hearth design system. Tokens (color / type / spacing / radius / shadow / motion) + component primitives. Light is the base; dark is the app default (set on ). ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"); /* ---------- 1. Color tokens (light = default) ---------- */ :root { /* Brand (default = Forest). Switchable via :root[data-brand="ink|plum|mono"]. */ --brand-ember: #1F5C44; --brand-ember-soft: #4A8770; --brand-ember-deep: #143B2C; --brand-ember-wash: #E6EFE9; /* Warm-tinted neutrals */ --ink-1000:#0E0D0B; --ink-900:#1B1916; --ink-800:#2B2823; --ink-700:#3D3934; --ink-600:#565049; --ink-500:#6F6860; --ink-400:#8E867B; --ink-300:#B5ADA1; --ink-200:#D6CFC4; --ink-150:#E4DED4; --ink-100:#ECE7DC; --ink-75:#F7F7F7; --ink-50:#FFFFFF; /* Semantic — desaturated, warm-friendly */ --success:#4F7A4A; --success-soft:#EAF1E6; --warning:#B6791C; --warning-soft:#F7ECD3; --danger:#B0463E; --danger-soft:#F5E0DC; --info:#4A6A88; --info-soft:#E3EAF1; /* Surfaces (light) */ --bg:var(--ink-50); --bg-elevated:var(--ink-50); --bg-sunken:var(--ink-75); --surface:#FFFFFF; --surface-hover:var(--ink-75); --surface-press:var(--ink-100); --overlay:rgba(15,13,11,.45); /* Text */ --fg-1:var(--ink-1000); --fg-2:var(--ink-700); --fg-3:var(--ink-500); --fg-4:var(--ink-400); --fg-on-accent:#FFFFFF; /* Lines */ --line:rgba(15,13,11,.08); --line-strong:rgba(15,13,11,.14); --line-emphasis:rgba(15,13,11,.24); --focus-ring:var(--brand-ember); /* Type */ --font-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-display:"Geist", ui-sans-serif, system-ui, sans-serif; --fs-display-1:96px; --fs-display-2:72px; --fs-display-3:56px; --fs-h1:40px; --fs-h2:32px; --fs-h3:24px; --fs-h4:20px; --fs-body:16px; --fs-body-sm:14px; --fs-micro:12px; --lh-display:1.0; --lh-heading:1.15; --lh-body:1.5; --lh-tight:1.3; --tk-display:-0.03em; --tk-heading:-0.015em; --tk-body:0; --tk-micro:0.02em; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; /* Spacing */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; /* Radii */ --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-2xl:28px; --radius-full:999px; /* Shadows (hairline-first) */ --shadow-sm:0 1px 0 rgba(15,13,11,.04); --shadow-md:0 4px 16px -8px rgba(15,13,11,.08), 0 1px 2px rgba(15,13,11,.04); --shadow-lg:0 24px 48px -24px rgba(15,13,11,.18), 0 2px 4px rgba(15,13,11,.04); --shadow-focus:0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring); /* Motion */ --ease-out:cubic-bezier(0.2,0.8,0.2,1); --ease-in-out:cubic-bezier(0.4,0,0.2,1); --dur-fast:80ms; --dur-base:150ms; --dur-slow:220ms; --dur-count:400ms; --content-max:1520px; --sidebar-w:240px; --sidebar-w-collapsed:68px; } :root[data-brand="ink"] { --brand-ember:#1E3A5F; --brand-ember-soft:#4F7099; --brand-ember-deep:#122340; --brand-ember-wash:#E2E8F0; } :root[data-brand="plum"] { --brand-ember:#5B3B6E; --brand-ember-soft:#8D6CA1; --brand-ember-deep:#3F2A52; --brand-ember-wash:#ECE3F0; } :root[data-brand="mono"] { --brand-ember:#0E0D0B; --brand-ember-soft:#565049; --brand-ember-deep:#000000; --brand-ember-wash:#E4DED4; } /* ---------- Dark mode (app default) ---------- */ :root[data-theme="dark"] { --bg:var(--ink-1000); --bg-elevated:var(--ink-900); --bg-sunken:#0A0908; --surface:var(--ink-900); --surface-hover:var(--ink-800); --surface-press:var(--ink-700); --overlay:rgba(0,0,0,.6); --fg-1:var(--ink-50); --fg-2:var(--ink-200); --fg-3:var(--ink-300); --fg-4:var(--ink-400); --line:rgba(252,251,248,.08); --line-strong:rgba(252,251,248,.14); --line-emphasis:rgba(252,251,248,.24); --brand-ember-wash:rgba(31,92,68,.20); --brand-ember-deep:#6BB096; --success-soft:rgba(79,122,74,.18); --warning-soft:rgba(182,121,28,.18); --danger-soft:rgba(176,70,62,.18); --info-soft:rgba(74,106,136,.18); --shadow-sm:0 1px 0 rgba(0,0,0,.3); --shadow-md:0 6px 20px -10px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 32px 64px -32px rgba(0,0,0,.7), 0 2px 4px rgba(0,0,0,.3); } :root[data-theme="dark"][data-brand="ink"] { --brand-ember-wash:rgba(79,112,153,.22); --brand-ember-deep:#88AAD0; } :root[data-theme="dark"][data-brand="plum"] { --brand-ember-wash:rgba(141,108,161,.22); --brand-ember-deep:#B595C9; } :root[data-theme="dark"][data-brand="mono"] { --brand-ember:#FCFBF8; --brand-ember-soft:#B5ADA1; --brand-ember-deep:#FEFDFB; --brand-ember-wash:rgba(252,251,248,.10); --fg-on-accent:#0E0D0B; } /* ---------- 2. Base reset + global type ---------- */ *, *::before, *::after { box-sizing:border-box; } html { font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--fg-1); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:"ss01","ss03","cv11"; } body { margin:0; } h1,.h1,h2,.h2,h3,.h3,h4,.h4 { font-family:var(--font-sans); color:var(--fg-1); letter-spacing:var(--tk-heading); line-height:var(--lh-heading); margin:0; } h1,.h1 { font-size:var(--fs-h1); font-weight:var(--fw-semibold); } h2,.h2 { font-size:var(--fs-h2); font-weight:var(--fw-semibold); } h3,.h3 { font-size:var(--fs-h3); font-weight:var(--fw-medium); } h4,.h4 { font-size:var(--fs-h4); font-weight:var(--fw-medium); } p,.body { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--fg-1); margin:0; } .body-sm { font-size:var(--fs-body-sm); color:var(--fg-2); } .muted { color:var(--fg-3); font-size:var(--fs-body-sm); } .warn { color:var(--danger); } .eyebrow { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:0.12em; color:var(--fg-3); font-weight:var(--fw-medium); } .num,[data-num] { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"ss01" 1; } code,kbd,.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; } a { color:var(--brand-ember-deep); text-decoration:none; } a:hover { text-decoration:underline; } :focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--radius-sm); } ::selection { background:var(--brand-ember-wash); color:var(--brand-ember-deep); } /* ---------- 3. Buttons ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--radius-md); font:500 14px/1 var(--font-sans); letter-spacing:-0.005em; border:1px solid transparent; background:transparent; color:var(--fg-1); cursor:pointer; transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); user-select:none; white-space:nowrap; text-decoration:none; } .btn:focus-visible { outline:none; box-shadow:var(--shadow-focus); } .btn:active { transform:scale(0.98); } .btn[disabled],.btn:disabled { opacity:0.4; pointer-events:none; } .btn-primary { background:var(--brand-ember); color:var(--fg-on-accent); } .btn-primary:hover { background:var(--brand-ember-deep); } .btn-secondary { background:var(--surface); color:var(--fg-1); border-color:var(--line-strong); } .btn-secondary:hover { background:var(--surface-hover); border-color:var(--line-emphasis); } .btn-ghost { background:transparent; color:var(--fg-1); } .btn-ghost:hover { background:var(--surface-hover); text-decoration:none; } .btn-sm { height:32px; padding:0 12px; font-size:13px; } .btn-lg { height:48px; padding:0 20px; font-size:15px; } .btn-icon { width:36px; padding:0; } .btn .lucide, .btn svg { width:16px; height:16px; } /* ---------- 4. Fields ---------- */ .field { height:40px; padding:0 14px; border-radius:var(--radius-md); border:1px solid var(--line-strong); background:var(--surface); color:var(--fg-1); font:400 14px/1.4 var(--font-sans); transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .field::placeholder { color:var(--fg-4); } .field:hover { border-color:var(--line-emphasis); } .field:focus { outline:none; border-color:var(--brand-ember); box-shadow:0 0 0 3px var(--brand-ember-wash); } select.field { min-width:160px; cursor:pointer; } .field-label { display:block; font-size:13px; color:var(--fg-2); margin-bottom:6px; font-weight:500; } /* ---------- 5. Card ---------- */ .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .card-stat { border:1px solid var(--line); padding:24px; background:var(--surface); border-radius:var(--radius-lg); } .card-stat .stat-label { font-size:12px; color:var(--fg-3); letter-spacing:0.02em; margin-bottom:12px; font-weight:500; } .card-stat .stat-value { font-family:var(--font-display); font-size:40px; font-weight:500; letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums; color:var(--fg-1); } .card-stat .stat-foot { margin-top:10px; font-size:13px; color:var(--fg-3); display:flex; align-items:center; gap:6px; } /* ---------- 6. Badge / Pill ---------- */ .badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:var(--radius-full); font:500 11px/1 var(--font-sans); letter-spacing:0.02em; background:var(--surface-hover); color:var(--fg-2); white-space:nowrap; } .badge-dot { width:6px; height:6px; border-radius:999px; background:currentColor; } .badge-ember { background:var(--brand-ember-wash); color:var(--brand-ember-deep); } .badge-success { background:var(--success-soft); color:var(--success); } .badge-warning { background:var(--warning-soft); color:var(--warning); } .badge-danger { background:var(--danger-soft); color:var(--danger); } .badge-info { background:var(--info-soft); color:var(--info); } /* ---------- 7. Toggle ---------- */ .toggle { position:relative; width:36px; height:22px; background:var(--line-emphasis); border-radius:999px; cursor:pointer; flex-shrink:0; border:none; padding:0; transition:background var(--dur-base) var(--ease-out); } .toggle::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform var(--dur-base) var(--ease-out); } .toggle[data-on="true"] { background:var(--brand-ember); } .toggle[data-on="true"]::after { transform:translateX(14px); } /* ---------- 8. Segmented tabs (inline pill group) ---------- */ .seg { display:inline-flex; gap:4px; background:var(--bg-sunken); padding:4px; border-radius:var(--radius-md); border:1px solid var(--line); } .seg button { padding:6px 12px; border-radius:8px; font:500 13px/1 var(--font-sans); color:var(--fg-2); cursor:pointer; background:transparent; border:none; transition:all var(--dur-base) var(--ease-out); } .seg button:hover { color:var(--fg-1); } .seg button[data-active="true"] { background:var(--surface); color:var(--fg-1); box-shadow:var(--shadow-sm); } /* ---------- 9. Shell: sidebar + topbar ---------- */ .app { display:flex; min-height:100vh; background:var(--bg); } .sidebar { width:var(--sidebar-w); flex-shrink:0; background:var(--bg); border-right:1px solid var(--line); padding:20px 14px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden; transition:width var(--dur-slow) var(--ease-in-out), padding var(--dur-slow) var(--ease-in-out); } .sidebar-brand { display:flex; align-items:center; gap:10px; padding:4px 8px 18px; border-bottom:1px solid var(--line); margin-bottom:12px; } .sidebar-brand .wordmark, .nav-item span, .nav-section, .sidebar-foot .theme-row span { transition:opacity var(--dur-base) var(--ease-out); } /* ---------- Collapsed sidebar (icon rail) ---------- */ :root[data-collapsed="true"] .sidebar { width:var(--sidebar-w-collapsed); padding-left:10px; padding-right:10px; } :root[data-collapsed="true"] .sidebar-brand { justify-content:center; padding:4px 0 18px; } :root[data-collapsed="true"] .sidebar-brand .wordmark, :root[data-collapsed="true"] .nav-item span, :root[data-collapsed="true"] .nav-section, :root[data-collapsed="true"] #theme-label, :root[data-collapsed="true"] .theme-row .toggle { opacity:0; width:0; height:0; overflow:hidden; pointer-events:none; white-space:nowrap; } :root[data-collapsed="true"] .nav-item { justify-content:center; padding:10px 0; } :root[data-collapsed="true"] .nav-section { padding:6px 0 0; margin:0; min-height:6px; } :root[data-collapsed="true"] .sidebar-foot .theme-row { justify-content:center; padding:8px 0; } /* the hidden label keeps flex:1 and would shove the icon off-center — neutralize it */ :root[data-collapsed="true"] .sidebar-foot .theme-row #theme-label { flex:0; } /* topbar icon button (sidebar toggle) */ .icon-btn { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; border-radius:var(--radius-md); border:1px solid transparent; background:transparent; color:var(--fg-3); cursor:pointer; transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .icon-btn:hover { background:var(--surface-hover); color:var(--fg-1); } .icon-btn .lucide, .icon-btn svg { width:18px; height:18px; } .sidebar-brand .mark { width:28px; height:28px; flex-shrink:0; color:var(--brand-ember); } .sidebar-brand .wordmark { font-size:18px; font-weight:600; letter-spacing:-0.02em; color:var(--fg-1); } .nav-section { font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--fg-4); padding:14px 12px 6px; font-weight:500; } .nav-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--radius-md); font-size:14px; font-weight:500; color:var(--fg-2); cursor:pointer; border:none; background:transparent; text-align:left; width:100%; text-decoration:none; transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .nav-item:hover { background:var(--surface-hover); color:var(--fg-1); text-decoration:none; } .nav-item[data-active="true"] { background:var(--brand-ember-wash); color:var(--brand-ember-deep); } .nav-item .lucide, .nav-item svg { width:18px; height:18px; flex-shrink:0; } .sidebar-foot { margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; } .sidebar-foot .theme-row { display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:14px; color:var(--fg-2); cursor:pointer; border-radius:var(--radius-md); transition:background var(--dur-base) var(--ease-out); } .sidebar-foot .theme-row:hover { background:var(--surface-hover); color:var(--fg-1); } .theme-ico { display:inline-flex; align-items:center; } .sidebar-foot .theme-row .lucide { width:18px; height:18px; } .sidebar-foot .theme-row #theme-label { flex:1; } .main { flex:1; min-width:0; display:flex; flex-direction:column; } .topbar { height:60px; border-bottom:1px solid var(--line-strong); background:var(--bg); padding:0 32px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:10; } .crumbs { display:flex; align-items:center; gap:8px; color:var(--fg-3); font-size:13px; } .crumbs .lucide { width:14px; height:14px; } .crumbs .crumb-cur { color:var(--fg-1); font-weight:500; } .topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; } .view { padding:32px 48px; max-width:var(--content-max); width:100%; } /* ---------- 10. Mobile ---------- */ .menu-btn { display:none; } @media (max-width:860px) { .app { flex-direction:column; } .sidebar { position:static; width:100%; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px; padding:10px 14px; border-right:none; border-bottom:1px solid var(--line); overflow:visible; } .sidebar-brand { border-bottom:none; margin:0 12px 0 0; padding:0; } .nav-section { display:none; } .nav-item { width:auto; padding:8px 10px; } .nav-item span { display:none; } .sidebar-foot { margin:0 0 0 auto; padding:0; border-top:none; flex-direction:row; } .sidebar-foot .nav-item span, .sidebar-foot .theme-row span { display:none; } .topbar { padding:0 20px; } .view { padding:24px 20px; } }