@filipgutica/ui 1.11.2 → 1.12.0

package/src/site.css

@@ -24,8 +24,11 @@
     line-height: var(--leading-tight);
     text-wrap: balance;
   }
-  .fg-site-docs :where(h1) { max-width: 22ch; font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
-  .fg-site-docs :where(h2) { font-size: var(--text-xl); }
+  .fg-site-docs :where(h1) { max-width: 22ch; font: var(--weight-semibold) var(--text-3xl) / 1.08 var(--font-mono); letter-spacing: var(--tracking-tight); }
+  .fg-site-docs :where(h2) { font-family: var(--font-mono); font-size: var(--text-xl); }
+  .fg-site-docs :where(h3) { font-family: var(--font-ui); font-size: var(--text-lg); }
+  :is(.fg-site-docs main, .fg-site-prose) :where(section > h2, section > :is(header, hgroup) > h2) { padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
+  :is(.fg-site-docs main, .fg-site-prose) :where(section > h2, section > :is(header, hgroup) > h2)::before { content: '## ' / ''; color: var(--color-project); }
   .fg-site-docs :where(p) { max-width: var(--measure); }
   /* Tab panels and other enhanced markup use the hidden attribute, so it outranks the page's own
    * display rules. until-found keeps the browser's find-in-page behavior. */
@@ -86,6 +89,7 @@
     color: var(--color-muted);
     font-size: var(--text-sm);
   }
+  .fg-site-footer { font-family: var(--font-mono); }
   .fg-site-footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
   .fg-site-footer a {
     display: inline-flex;
@@ -128,7 +132,7 @@
   .fg-site-header {
     position: relative;
     z-index: 30;
-    border-bottom: 1px solid var(--color-border-subtle);
+    border-bottom: 1px solid var(--color-text);
     background: var(--color-bg);
     color: var(--color-text);
     font-family: var(--font-ui);
@@ -156,7 +160,7 @@
     min-height: var(--control-lg);
     align-items: center;
     color: var(--color-muted);
-    font-size: var(--text-sm);
+    font-size: var(--text-md);
     text-decoration: none;
   }
   .fg-site-header__links a:hover { color: var(--color-text); }
@@ -175,6 +179,8 @@
     cursor: pointer;
     user-select: none;
   }
+  .fg-site-projects__trigger { font-family: var(--font-mono); }
+  .fg-site-projects__trigger::before { content: '~/' / ''; color: var(--color-project); }
   .fg-site-projects__trigger::-webkit-details-marker { display: none; }
   .fg-site-projects__trigger:hover,
   .fg-site-projects[open] > .fg-site-projects__trigger { background: var(--color-row-hover); }
@@ -195,7 +201,7 @@
 
   /* Route rows. Hover is neutral, and the current page keeps its selected fill on
    * hover. An in-page section marker (aria-current="location") must look different
-   * from the current page, so it only strengthens the text. */
+   * from the current page, so it keeps the bar without the selected fill. */
   .fg-site-nav a {
     display: flex;
     min-height: var(--row);
@@ -203,18 +209,19 @@
     padding-inline: var(--space-3);
     border-radius: var(--radius-control);
     color: var(--color-muted);
-    font-size: var(--text-md);
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
     text-decoration: none;
     transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
   }
   .fg-site-nav a:hover { background: var(--color-row-hover); color: var(--color-text); }
   .fg-site-nav a[aria-current="page"] {
-    background: var(--color-row-selected);
-    box-shadow: inset 2px 0 0 var(--color-accent);
+    background: var(--color-surface-raised);
+    box-shadow: inset 2px 0 0 var(--color-project);
     color: var(--color-text);
     font-weight: var(--weight-medium);
   }
-  .fg-site-nav a[aria-current="location"] { color: var(--color-text); font-weight: var(--weight-medium); }
+  .fg-site-nav a[aria-current="location"] { box-shadow: inset 2px 0 0 var(--color-project); color: var(--color-text); font-weight: var(--weight-medium); }
   .fg-site-nav a code { font-family: var(--font-mono); font-size: var(--text-sm); }
 
   .fg-site-appearance {
@@ -250,6 +257,7 @@
   }
   /* Forced colors drop the fill and the ring, so the pressed choice takes the system highlight. */
   @media (forced-colors: active) {
+    .fg-site-nav a[aria-current] { border-inline-start: 2px solid Highlight; }
     .fg-site-appearance__choice[aria-pressed="true"] { forced-color-adjust: none; color: HighlightText; background: Highlight; }
   }
 
@@ -284,8 +292,9 @@
     margin: 0;
     padding-inline: var(--space-3);
     color: var(--color-muted);
-    font-size: var(--text-sm);
-    font-weight: var(--weight-regular);
+    font-family: var(--font-ui);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-semibold);
   }
   .fg-site-rail__group { display: grid; gap: 2px; }
   .fg-site-rail__group + .fg-site-rail__group { margin-top: var(--space-3); }
@@ -296,17 +305,23 @@
    * default. A site can set --site-capture-bg and --t* values on :root, which also
    * reach the full-size viewer. Nothing clips the panel, so focus rings inside it stay whole. */
   .fg-capture {
+    --color-text: var(--color-terminal-text);
+    --color-muted: var(--color-terminal-caption-text);
+    --color-accent: var(--color-project-dark);
+    --color-focus: var(--color-project-dark);
+    --color-border-subtle: var(--color-terminal-border);
     position: relative;
     min-width: 0;
     border: 1px solid var(--color-border-subtle);
     border-radius: var(--radius-panel);
-    background: var(--color-surface);
+    background: var(--color-terminal);
+    color: var(--color-terminal-text);
   }
   .fg-capture .fg-tabs__list { width: 100%; margin-block-end: 0; padding-inline: var(--space-2); }
-  .fg-capture .fg-tabs__tab { min-height: var(--control-lg); }
+  .fg-capture .fg-tabs__tab { min-height: var(--control-lg); font-family: var(--font-mono); font-size: var(--text-sm); }
   /* The Full size control sits at the end of the tab row. The list's margin, not its
    * padding, reserves the control's width, so the scroll area and divider end before it. */
-  .fg-capture[data-enhanced="true"] .fg-tabs__list { width: auto; margin-inline-end: calc(var(--space-2) + 6.5rem); }
+  .fg-capture[data-enhanced="true"] .fg-tabs__list { width: auto; margin-inline-end: calc(var(--space-2) + 7rem); }
   .fg-capture__full {
     position: absolute;
     top: 0;
@@ -320,7 +335,7 @@
     border-radius: var(--radius-control);
     background: transparent;
     color: var(--color-muted);
-    font: var(--text-sm) / var(--leading) var(--font-ui);
+    font: var(--text-sm) / var(--leading) var(--font-mono);
     cursor: pointer;
   }
   .fg-capture__full:hover { color: var(--color-text); }
@@ -342,17 +357,18 @@
     min-width: 0;
     max-width: 100%;
     overflow-x: auto;
-    background: var(--site-capture-bg, var(--color-code));
+    background: var(--site-capture-bg, var(--color-terminal));
+    color: var(--color-terminal-text);
   }
-  /* Terminal markup gets the dark default; a plain <pre> keeps the code background its text expects. */
-  .fg-capture__screen:has(> .term) { background: var(--site-capture-bg, var(--t-bg, #131316)); }
+  /* ANSI captures and plain output share the terminal plate; explicit site palettes still win. */
+  .fg-capture__screen:has(> .term) { background: var(--site-capture-bg, var(--t-bg, var(--color-terminal))); }
   .fg-capture__screen > * { width: max-content; margin: 0; }
   /* Terminal colors for checked-in capture markup: .term and the ANSI classes the capture
    * converter emits. Each color reads the site's --t* value first, so a site palette on
    * :root still wins, and these defaults apply only where a site sets none. */
   .fg-capture__screen .term {
     padding: var(--space-4);
-    color: var(--t-fg, #e6e6ea);
+    color: var(--t-fg, var(--color-terminal-text));
     font: var(--weight-regular) var(--text-sm) / 1 var(--font-mono);
     font-variant-ligatures: none;
     tab-size: 8;
@@ -391,8 +407,8 @@
   .fg-capture__screen .tb14 { background: var(--t14, #8ee3e8); }
   .fg-capture__screen .tb15 { background: var(--t15, #ffffff); }
   .fg-capture__screen .tf-dim { color: var(--t-dim, #a0a0ab); }
-  .fg-capture__screen .tf-bg { color: var(--t-bg, #131316); }
-  .fg-capture__screen .tb-fg { background: var(--t-fg, #e6e6ea); }
+  .fg-capture__screen .tf-bg { color: var(--t-bg, var(--color-terminal)); }
+  .fg-capture__screen .tb-fg { background: var(--t-fg, var(--color-terminal-text)); }
   /* Text on the light selection row stays dark, whatever its own colour class. */
   .fg-capture__screen .tb8 { color: #1b1b1f; }
   .fg-capture__screen .tbold { font-weight: var(--weight-semibold); }
@@ -419,11 +435,13 @@
     gap: var(--space-1);
     padding: var(--space-3) var(--space-4);
     border-top: 1px solid var(--color-border-subtle);
-    color: var(--color-muted);
+    color: var(--color-terminal-caption-text);
+    background: var(--color-terminal-caption);
+    font-family: var(--font-mono);
     font-size: var(--text-sm);
     line-height: var(--leading);
   }
-  .fg-capture__caption > code { color: var(--color-text); font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
+  .fg-capture__caption > code { color: var(--color-terminal-caption-text); font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
   /* Inset: the enhanced panel clips its content. */
   .fg-capture__screen:focus-visible,
   .fg-capture__expand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
@@ -491,28 +509,41 @@
   /* Page helpers. Steps number a real sequence; facts are short label and value
    * pairs on one line; definitions pair terms with short meanings. Definitions
    * take dt and dd as direct children. */
-  .fg-site-steps { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: fg-site-step; }
+  .fg-site-steps { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; counter-reset: fg-site-step; }
+  /* Each step hangs from a mono number in the project hue, set on the title's baseline; a
+   * rule runs down the leading column to the next step. */
   .fg-site-steps > li {
     position: relative;
-    min-width: 0;
-    padding-inline-start: calc(var(--space-6) + var(--space-3));
+    display: grid;
+    grid-template-columns: var(--space-8) minmax(0, 1fr);
+    row-gap: var(--space-2);
     counter-increment: fg-site-step;
   }
+  .fg-site-steps > li > * { grid-column: 2; }
   .fg-site-steps > li::before {
     content: counter(fg-site-step);
+    grid-area: 1 / 1;
+    align-self: baseline;
+    color: var(--color-project);
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    font-variant-numeric: tabular-nums;
+  }
+  .fg-site-steps > li > :first-child { align-self: baseline; }
+  .fg-site-steps > li:not(:last-child)::after {
+    content: '';
     position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    display: grid;
-    width: var(--space-6);
-    height: var(--space-6);
-    place-items: center;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-pill);
+    top: var(--space-8);
+    bottom: calc(var(--space-2) - var(--space-6));
+    inset-inline-start: 0.25em;
+    border-inline-start: 1px solid var(--color-border-subtle);
+  }
+  /* The outcome of the last step. */
+  .fg-site-steps__result {
+    padding-inline-start: var(--space-3);
+    border-inline-start: 2px solid var(--color-project);
     color: var(--color-muted);
-    font-size: var(--text-xs);
-    font-variant-numeric: tabular-nums;
-    line-height: 1;
   }
   .fg-site-facts {
     display: flex;
@@ -522,6 +553,7 @@
     color: var(--color-muted);
     font-size: var(--text-sm);
   }
+  .fg-site-facts { font-family: var(--font-mono); }
   .fg-site-facts > div { display: flex; gap: var(--space-2); }
   .fg-site-facts dd { margin: 0; color: var(--color-text); }
   .fg-site-definitions {
@@ -574,19 +606,47 @@
     letter-spacing: var(--tracking-tight);
     text-wrap: balance;
   }
-  .fg-site-prose :where(h1) { font-size: var(--text-3xl); }
-  .fg-site-prose :where(h2) { font-size: var(--text-xl); }
+  .fg-site-prose :where(h1) { font-family: var(--font-mono); font-size: var(--text-3xl); line-height: 1.08; }
+  /* Hero titles sit in the components layer so they also outrank the prose defaults above. */
+  .fg-site-hero > h1 {
+    max-width: none;
+    font-size: var(--text-display);
+    line-height: 1.04;
+    word-spacing: -0.12em;
+  }
+  .fg-site-prose :where(h2) { font-family: var(--font-mono); font-size: var(--text-xl); }
   .fg-site-prose :where(h3, h4) { font-size: var(--text-lg); }
   .fg-site-prose :where(p, ul, ol) { max-width: var(--measure); margin: 0; }
   .fg-site-prose :where(p, ul, ol) + :where(p, ul, ol) { margin-top: var(--space-4); }
   .fg-site-prose :where(p a, li a, dd a) { text-decoration: underline; text-underline-offset: 0.18em; }
-  .fg-site-meta { color: var(--color-muted); font-size: var(--text-sm); }
+  .fg-site-meta { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
 
   /* No-JavaScript desktop: the rail's disclosure stays expanded. */
   @media (min-width: 801px) {
+    .fg-site-rail { border-inline-end: 1px solid var(--color-border-subtle); padding-inline-end: var(--space-4); }
     .fg-site-rail__menu::details-content { content-visibility: visible; }
     .fg-site-rail__menu:not([open]) > .fg-site-rail__content { display: block; }
   }
+  /* Explicit opt-in keeps the hero independent of page-owned install and capture markup. */
+  .fg-site-hero { display: grid; gap: var(--space-4); }
+  .fg-site-hero > * { min-width: 0; }
+  .fg-site-hero__lede,
+  .fg-site-hero__aside { display: grid; gap: var(--space-3); align-content: start; }
+  .fg-site-hero__aside .fg-site-meta { margin: 0; align-self: start; }
+  /* 1024px is the documented wide exception; narrower heroes keep source order. */
+  @media (min-width: 1024px) {
+    .fg-site-hero {
+      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+      grid-auto-columns: minmax(0, 1fr);
+      column-gap: var(--space-8);
+      align-items: start;
+    }
+    /* Explicit lines also span the implicit column when an unlayered site overrides the template. */
+    .fg-site-hero > * { grid-column: 1 / 3; }
+    .fg-site-hero > h1 { grid-row: 1; }
+    .fg-site-hero > .fg-site-hero__lede { grid-column: 1; grid-row: 2; }
+    .fg-site-hero > .fg-site-hero__aside { grid-column: 2; grid-row: 2; }
+  }
   /* Keep in sync with MOBILE_QUERY in UiSiteNav.vue. */
   @media (max-width: 800px) {
     .fg-site-docs { grid-template-columns: minmax(0, 1fr); }
@@ -597,10 +657,17 @@
       overflow: visible;
       padding-block: var(--space-2);
     }
-    .fg-site-rail__summary {
+    .fg-site-rail__summary,
+    .fg-site-rail__toggle {
       display: flex;
+      gap: var(--space-3);
+      border: 1px solid var(--color-border);
+      background: var(--color-surface-raised);
       width: max-content;
+      max-width: 100%;
       min-height: var(--control-lg);
+      white-space: normal;
+      text-align: start;
       align-items: center;
       padding-inline: var(--space-3);
       border-radius: var(--radius-control);
@@ -609,6 +676,15 @@
       list-style: none;
       cursor: pointer;
     }
+    .fg-site-rail__summary::after,
+    .fg-site-rail__toggle::after {
+      content: '';
+      width: 6px;
+      height: 6px;
+      border-right: 1px solid currentColor;
+      border-bottom: 1px solid currentColor;
+      transform: rotate(45deg);
+    }
     .fg-site-rail__summary::-webkit-details-marker { display: none; }
     .fg-site-rail__summary:hover { color: var(--color-text); background: var(--color-row-hover); }
     .fg-site-rail__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@@ -633,18 +709,24 @@
     .fg-site-header__inner:has(.fg-site-header__links > :nth-child(3)) .fg-site-header__end { display: contents; }
     .fg-site-header__inner:has(.fg-site-header__links > :nth-child(3)) .fg-site-projects { margin-inline-end: auto; }
     .fg-site-header__inner:has(.fg-site-header__links > :nth-child(3)) .fg-site-header__links { order: 1; flex-basis: 100%; }
+    .fg-site-docs :where(h1) { font-size: 32px; }
+    .fg-site-hero > h1 { font-size: var(--text-display-sm); }
     .fg-site-docs { padding-inline: var(--space-4); }
     /* Docs-shell pages keep one header row on phones and repeat these links in their footer. */
     .fg-site-docs .fg-site-header__links { display: none; }
-    /* Fact links, such as a Source link that stands in for the hidden header link, get a
-     * touch-sized hit area. The negative margin keeps each fact row one line tall, and the
-     * row gap of a list with links makes room for the part of the hit area past the line. */
-    .fg-site-facts:has(a) { row-gap: calc(var(--control-lg) - 1lh); }
-    .fg-site-facts a {
-      display: inline-flex;
+    /* Expand the link target without adding space between the text rows. A later link fact
+     * moves a full target below the one before it, so their targets never overlap. */
+    .fg-site-facts { row-gap: var(--space-2); }
+    .fg-site-facts > div:has(a) ~ div:has(a) { margin-top: calc(var(--control-lg) - 1lh - var(--space-2)); }
+    .fg-site-facts a { position: relative; display: inline-block; }
+    .fg-site-facts a::after {
+      content: '';
+      position: absolute;
+      inset-inline: 0;
+      top: 50%;
       min-height: var(--control-lg);
-      align-items: center;
-      margin-block: calc((1lh - var(--control-lg)) / 2);
+      height: 100%;
+      transform: translateY(-50%);
     }
     .fg-dialog__content.fg-capture-viewer { width: 100%; max-width: none; }
     /* Phones keep the icon; the accessible name still says Full size. */
@@ -681,7 +763,7 @@
     .fg-site-header__inner { padding-inline: var(--site-gutter, var(--space-6)); }
   }
   @media (max-width: 680px) {
-    .fg-site-prose :where(h1) { font-size: var(--text-2xl); }
+    .fg-site-prose :where(h1) { font-size: 32px; }
     .fg-site-header__end { gap: var(--space-2) var(--space-4); }
     .fg-site-header__links { gap: var(--space-4); }
     .fg-site-projects__menu a { min-height: var(--control-lg); }

package/src/theme.css

@@ -1,12 +1,15 @@
+@import "./fonts.css";
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 :root {
   color-scheme: light;
-  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
-  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
   --text-xs: 0.75rem;
   --text-sm: 0.8125rem;
   --text-md: 0.875rem;
+  --text-code: 0.84375rem;
   --text-lg: 1rem;
   --text-xl: 1.25rem;
   --text-2xl: 1.5rem;
@@ -14,7 +17,7 @@
   --weight-medium: 500;
   --weight-semibold: 600;
   --leading-tight: 1.25;
-  --leading: 1.5;
+  --leading: 1.6;
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
@@ -30,106 +33,132 @@
   --measure: 68ch;
   --page-max: 60rem;
   --sidebar: 14rem;
-  --color-bg: #fcfcfd;
-  --color-surface: #f6f6f8;
-  --color-surface-raised: #fff;
-  --color-surface-muted: #efeff2;
-  --color-text: #1b1b1f;
-  --color-muted: #62626d;
-  --color-link: #3d63dd;
-  --color-accent: #3d63dd;
-  --color-focus: #3d63dd;
-  --color-border: #667085;
-  --color-border-subtle: #e9e9ed;
-  --color-button-bg: #3d63dd;
-  --color-button-text: #fff;
-  --color-button-hover: #3354c4;
-  --color-input-bg: #fff;
-  --color-input-text: #1b1b1f;
-  --color-input-border: #667085;
-  --color-input-placeholder: #667085;
-  --color-row-hover: #efeff2;
-  --color-row-selected: #e9ebf8;
-  --color-row-selected-text: #3354c4;
-  --color-code: #f6f6f8;
-  --color-code-text: #1b1b1f;
-  --color-syntax-comment: #62626d;
-  --color-syntax-keyword: #3d63dd;
-  --color-syntax-string: #1f7a52;
-  --color-syntax-number: #854a0e;
-  --color-syntax-function: #3d63dd;
-  --color-syntax-type: #854a0e;
-  --color-syntax-variable: #1b1b1f;
-  --color-syntax-operator: #62626d;
-  --color-syntax-punctuation: #62626d;
-  --color-syntax-tag: #3d63dd;
-  --color-syntax-attribute: #854a0e;
-  --color-error: #c01048;
-  --color-warning: #854a0e;
-  --color-success: #067647;
+  --color-bg: #f4f5f6;
+  --color-surface: #e9ebed;
+  --color-surface-raised: #fbfbfc;
+  --color-surface-muted: #e2e5e8;
+  --color-text: #101315;
+  --color-muted: #50575e;
+  --color-link: #0b5f7c;
+  --color-accent: var(--color-project);
+  --color-focus: var(--color-link);
+  --color-border: #6d747b;
+  --color-border-subtle: #d3d8dd;
+  --color-button-bg: #101315;
+  --color-button-text: #f4f5f6;
+  --color-button-hover: #50575e;
+  --color-input-bg: #fbfbfc;
+  --color-input-text: #101315;
+  --color-input-border: #6d747b;
+  --color-input-placeholder: #50575e;
+  --color-row-hover: #e2e5e8;
+  --color-row-selected: var(--color-surface-raised);
+  --color-row-selected-text: #101315;
+  --color-code: var(--color-surface);
+  --color-code-text: var(--color-text);
+  --color-syntax-comment: #626772;
+  --color-syntax-keyword: #715b42;
+  --color-syntax-string: #346347;
+  --color-syntax-number: #86532e;
+  --color-syntax-function: #715b42;
+  --color-syntax-type: #86532e;
+  --color-syntax-variable: var(--color-text);
+  --color-syntax-operator: #50575e;
+  --color-syntax-punctuation: #50575e;
+  --color-syntax-tag: #715b42;
+  --color-syntax-attribute: #86532e;
+  --color-error: #bd342b;
+  --color-warning: #86532e;
+  --color-success: #157249;
   --color-info: #175cd3;
-  --color-progress: #3d63dd;
+  --color-progress: var(--color-project);
   --color-shadow: rgb(16 24 40 / 10%);
   --color-overlay: rgb(0 0 0 / 42%);
-  --color-error-surface: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
-  --color-warning-surface: color-mix(in srgb, var(--color-warning) 13%, var(--color-surface));
-  --color-success-surface: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
-  --color-info-surface: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
-  --radius-inline: 0.25rem;
-  --radius-control: 0.375rem;
-  --radius-panel: 0.5rem;
-  --radius-pill: 999px;
+  --color-error-surface: var(--color-surface-raised);
+  --color-warning-surface: var(--color-surface-raised);
+  --color-success-surface: var(--color-surface-raised);
+  --color-info-surface: var(--color-surface-raised);
+  --radius-inline: 2px;
+  --radius-control: 2px;
+  --radius-panel: 3px;
+  --radius-pill: 2px;
   --duration-fast: 120ms;
   --duration: 180ms;
   --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
   --shadow-control: none;
-  --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%);
+  --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px var(--color-border-subtle);
+
+  --color-project: #4b45d1;
+  --color-accent-text: var(--color-bg);
+  --color-accent-hover: var(--color-text);
+  --color-project-dark: #a5a1ff;
+  --color-status-text: #101315;
+  --color-terminal: #0a0c0e;
+  --color-terminal-text: #e6e9eb;
+  --color-terminal-border: #2a3036;
+  --color-terminal-caption: #13171a;
+  --color-terminal-caption-text: #c9d0d6;
 }
 
 :root.dark {
   color-scheme: dark;
-  --color-bg: #0f0f11;
-  --color-surface: #151518;
-  --color-surface-raised: #1a1a1e;
-  --color-surface-muted: #1f1f24;
-  --color-text: #ececf0;
-  --color-muted: #a0a0ab;
-  --color-link: #7d97ff;
-  --color-accent: #7d97ff;
-  --color-focus: #7d97ff;
-  --color-border: #647189;
-  --color-border-subtle: #222227;
-  --color-button-bg: #7d97ff;
-  --color-button-text: #0d1020;
-  --color-button-hover: #97acff;
-  --color-input-bg: #151518;
-  --color-input-text: #ececf0;
-  --color-input-border: #647189;
-  --color-input-placeholder: #a0a0ab;
-  --color-row-hover: #1f1f24;
-  --color-row-selected: #1f2233;
-  --color-row-selected-text: #ececf0;
-  --color-code: #151518;
-  --color-code-text: #ececf0;
-  --color-syntax-comment: #a0a0ab;
-  --color-syntax-keyword: #97acff;
-  --color-syntax-string: #6fd3a0;
-  --color-syntax-number: #e8b56a;
-  --color-syntax-function: #97acff;
-  --color-syntax-type: #e8b56a;
-  --color-syntax-variable: #ececf0;
-  --color-syntax-operator: #a0a0ab;
-  --color-syntax-punctuation: #a0a0ab;
-  --color-syntax-tag: #97acff;
-  --color-syntax-attribute: #e8b56a;
-  --color-error: #ff8aad;
-  --color-warning: #f8c477;
-  --color-success: #75e0a7;
+  --color-bg: #0d1012;
+  --color-surface: #13171a;
+  --color-surface-raised: #181d21;
+  --color-surface-muted: #20262b;
+  --color-text: #e6e9eb;
+  --color-muted: #9aa3ab;
+  --color-link: #67c1df;
+  --color-accent: var(--color-project);
+  --color-focus: var(--color-link);
+  --color-border: #78818a;
+  --color-border-subtle: #262d33;
+  --color-button-bg: #e6e9eb;
+  --color-button-text: #0d1012;
+  --color-button-hover: #9aa3ab;
+  --color-input-bg: #181d21;
+  --color-input-text: #e6e9eb;
+  --color-input-border: #78818a;
+  --color-input-placeholder: #9aa3ab;
+  --color-row-hover: #20262b;
+  --color-row-selected: var(--color-surface-raised);
+  --color-row-selected-text: #e6e9eb;
+  --color-code: var(--color-surface);
+  --color-code-text: var(--color-text);
+  --color-syntax-comment: #a0a6b1;
+  --color-syntax-keyword: #d8c2a5;
+  --color-syntax-string: #a8bd9c;
+  --color-syntax-number: #d5b98c;
+  --color-syntax-function: #d8c2a5;
+  --color-syntax-type: #d5b98c;
+  --color-syntax-variable: var(--color-text);
+  --color-syntax-operator: #9aa3ab;
+  --color-syntax-punctuation: #9aa3ab;
+  --color-syntax-tag: #d8c2a5;
+  --color-syntax-attribute: #d5b98c;
+  --color-error: #f0776c;
+  --color-warning: #e2a54b;
+  --color-success: #4cc38a;
   --color-info: #84adff;
-  --color-progress: #7d97ff;
+  --color-progress: var(--color-project);
   --color-shadow: rgb(0 0 0 / 32%);
   --color-overlay: rgb(0 0 0 / 62%);
-  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%);
+  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border-subtle);
+
+  --color-project: #a5a1ff;
+  --color-accent-text: var(--color-bg);
+  --color-accent-hover: var(--color-text);
+  --color-project-dark: #a5a1ff;
+  --color-error-surface: var(--color-surface-raised);
+  --color-warning-surface: var(--color-surface-raised);
+  --color-success-surface: var(--color-surface-raised);
+  --color-info-surface: var(--color-surface-raised);
+  --color-status-text: #e6e9eb;
+  --color-terminal: #0a0c0e;
+  --color-terminal-text: #e6e9eb;
+  --color-terminal-border: #2a3036;
+  --color-terminal-caption: #13171a;
+  --color-terminal-caption-text: #c9d0d6;
 }
 
 @theme inline {