/*
 * Shared frontend foundations.
 *
 * Page styles keep their semantic color roles, while this file owns the
 * rhythm and shape scales used across landing and console surfaces.
 */
/*
 * Inter Variable is self-hosted (no third-party font request) and named
 * distinctly from any OS-installed static "Inter" so the browser can't
 * substitute a non-variable face that would collapse the weight scale below.
 */
@font-face {
  font-family: 'Inter Variable';
  src:
    url('/InterVariable.woff2') format('woff2-variations'),
    url('/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*
 * Border and surface system.
 *
 * A border exists for exactly one reason: to make a boundary perceptible
 * where fill cannot. That gives four cases, and only four:
 *
 *   1. seam       two adjacent regions share a fill, so the join needs a line
 *   2. divider    rows inside one surface must be separated from each other
 *   3. bare edge  a control whose fill equals its parent's, so its hit area
 *                 would otherwise be invisible (inputs, ghost buttons)
 *   4. overlay    it floats over unknown content, so no fill contrast can be
 *                 relied on underneath it
 *
 * Everything else is expressed by fill. A card on the canvas, a filled
 * button, a selected row: these already differ from their ground, and
 * drawing an outline on top of a fill codes the same boundary twice.
 *
 * There is therefore exactly ONE line weight: 1px, var(--line). Weight is
 * not an emphasis channel. Emphasis comes from fill, size and type weight,
 * which are stronger and already in use; a second scale made of border
 * thickness only has to be memorised. The old 2px ink outline is gone: it
 * was the loudest treatment in the product and it sat on its least
 * important elements, which inverts the hierarchy.
 *
 * This is what "borderless" means here. Not zero lines - fill first, with a
 * line only where fill physically cannot express the boundary.
 *
 * For fill to do that work the neutral scale has to be wide enough to be
 * seen. It is a four-step ramp, and the steps are far enough apart that a
 * paper surface reads against the ground without help:
 *
 *   --paper   #ffffff   content surfaces AND the conversation itself
 *   --bg      #f7f8f5   the ground behind the shell
 *   --rail    #f8f9f4   a recessed region, the sidebar
 *   --soft    #f1f2ee   hover and secondary fills
 *   --line    #e2e5df   the single line, on the edge of an object
 *
 * The reading surface is paper, not canvas. An earlier pass moved .workspace
 * onto --bg so that panels would read as paper floating on a ground; the
 * founder called the result too dark, and they were right - the place a
 * person reads all day should be the brightest thing on screen. Panels no
 * longer need the canvas to be seen because each one carries its own
 * hairline, so the workspace went back to paper and the panels kept the line.
 *
 * The rail and the hover fill are back at their pre-redesign steps: the rail
 * sits ~7 units under paper and --soft sits ~7 units under the rail. Those
 * two gaps are what a session row's hover feels like, and doubling them (as
 * --soft #ebeee9 did) made every pass of the mouse over the list flash.
 *
 * Two line colours, one weight. --line draws the edge of an object;
 * --line-hairline (#eceeea) draws a divider between rows inside it, because
 * an internal divider at the same value as the containing edge reads as
 * heavier than the panel itself.
 *
 * Colour carries meaning, not decoration:
 *
 *   - Large passive surfaces are neutral, full stop. The ground, the rail
 *     and the secondary fill carry no brand tint. An area a person looks at
 *     all day is never the place for the brand colour.
 *   - Saturated lime is reserved for brand moments and positive state, and
 *     nothing else: the selected view, primary actions, completion, and
 *     small accent markers. If it is bigger than a control, it is not lime.
 *   - Blue stays informational: links, focus, active work, numerals.
 *
 * One selection idiom. Whatever is currently chosen - the open session, a
 * filter tab, a settings tab, a verbosity switch, a delivery policy, a row
 * in the navigation panel - is a --lime-soft fill with --ink on it, and the
 * fill alone says it, so no ring or outline is added. The pinned nav tabs
 * and the view dropdown, which select a whole view, use solid --lime. Blue
 * never marks a selection; it marks work that is happening.
 *
 * Nothing casts a shadow; see --shadow-* below.
 */

:root {
  /*
   * Native system-ui/-apple-system/Segoe UI sit ahead of Arial so a failed
   * or blocked font request still degrades to each platform's own UI font
   * instead of the less legible web-safe fallback.
   */
  --font-sans: 'Inter Variable', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-control: 8px;
  --radius-row: 10px;
  --radius-panel: 12px;
  --radius-section: 16px;
  --radius-overlay: 14px;
  --radius-brand: 10px 10px 10px 4px;

  --control-height: 42px;
  --control-surface: #ffffff;
  --control-surface-hover: #fbfef6;
  --control-border: #cbdfcb;
  --control-border-hover: #a5bcab;
  --control-label: #3a604e;
  --control-hint: #698879;

  --overlay-gutter: 16px;
  --overlay-width-compact: 480px;
  --overlay-width: 760px;
  --overlay-width-wide: 960px;
  --overlay-border: rgb(11 34 48 / 14%);

  --content-reading: 680px;
  --content-workspace: 1120px;
  --content-composer: 1080px;

  /*
   * No shadows anywhere in the product. These roles stay as tokens so
   * overlays, popovers, and raised panels keep one shared contract, but they
   * resolve to nothing: depth comes from surface value, not from elevation.
   */
  --shadow-raised: none;
  --shadow-overlay: none;
  --shadow-popover: none;

  --focus-border: #70829d;
  --focus-ring: 0 0 0 2px rgb(112 130 157 / 18%);

  --motion-fast: 140ms ease;
  --motion-layout: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}