/* RanchNet tokens — generated from tokens.json */
:root {
  --surface: #ffffff;  /* Page and content background: documents, panels, fields. */
  --surface-muted: #f3f4f6;  /* Recessed areas inside a panel: table stripes, code blocks, empty states. */
  --sidebar: #dde4eb;  /* Source-list sidebar background, the blue-grey of the sky at dusk. */
  --chrome-hi: #e8e8e8;  /* Top stop of the toolbar and panel-header gradient. */
  --chrome-lo: #c6c6c6;  /* Bottom stop of the toolbar and panel-header gradient. */
  --chrome-edge: #8f8f8f;  /* The 1px line under a toolbar and above a footer bar. */
  --button-hi: #ffffff;  /* Top stop of the default button gradient. */
  --button-lo: #e3e5e8;  /* Bottom stop of the default button gradient. */
  --ink: #1e1e1e;  /* Primary text on surface, surface-muted, sidebar and the chrome gradient (10:1 or better). */
  --ink-secondary: #5a5f66;  /* Secondary text and sidebar section headers on surface (6.4:1) and sidebar (5.0:1). */
  --ink-tertiary: #6b7179;  /* Captions, timestamps, placeholder text on surface only (4.9:1); never on sidebar. */
  --line: #c3c7cc;  /* Decorative hairlines: dividers, panel outlines, table rules. Not for control borders. */
  --line-strong: #7d838b;  /* Borders of buttons, fields and checkboxes (3.8:1 on surface). */
  --sky: #1d64c6;  /* The brand blue from the top of the orb. Links and primary-action text on surface (5.7:1); fill behind on-sky. */
  --sky-hi: #4a8fe6;  /* Top stop of the primary gel gradient and the progress fill. */
  --sky-lo: #1a58b4;  /* Bottom stop of the primary gel gradient; selected sidebar row bottom. */
  --sky-pale: #c2e5ff;  /* The horizon blue. Hover wash on rows and the inner glow of the primary button; never a text color. */
  --on-sky: #ffffff;  /* Text and icons on sky, sky-lo and the primary gel (4.7:1 at the gradient midpoint). */
  --selection: #2f6ec7;  /* Selected row and focused-list highlight fill, with on-sky text (5.1:1). */
  --focus: #2f74d8;  /* Keyboard focus ring: 2px solid, 2px outside the control (4.6:1 on surface, 3.5:1 on sidebar). */
  --hill: #409636;  /* The brand green from the orb. Status dots and the online pill fill; not for text on white. */
  --hill-ink: #2e7a2c;  /* Green text on surface (5.3:1): success messages, Online labels. */
  --road: #fff6de;  /* The road cream. Background for notices and the callout panel, with ink text. */
  --road-edge: #e3c996;  /* Hairline around a road-cream callout. */
  --danger: #c8382e;  /* Destructive buttons, invalid-field borders and error text on surface (5.2:1) and danger-pale (4.5:1). Always paired with a word. */
  --danger-pale: #fdecea;  /* Error alert background, with ink body text and a danger icon. */
  --danger-edge: #e9a29b;  /* Hairline around an error alert. */
  --hill-pale: #eaf6e4;  /* Success alert background, with ink text; hill-ink icon (4.8:1). */
  --hill-edge: #9fcf8f;  /* Hairline around a success alert. */
  --sky-wash: #eaf4ff;  /* Info alert background, with ink text; sky icon (5.1:1). */
  --sky-edge: #9cc6f2;  /* Hairline around an info alert. */
  --saddle: #9a6a2f;  /* Avatar fill only, with on-sky initials (4.7:1); the leather of the ranch. */
  --warning: #a35e00;  /* Warning text on surface (5.1:1) and road (4.7:1), e.g. a link running on battery. */
  --glyph: #3d4249;  /* Solid 16px glyphs in the toolbar, buttons, menus and bottom bar, etched with a 1px white highlight beneath (5.2:1 on chrome-lo). */
  --glyph-sidebar: #5f7189;  /* Glyphs in source-list rows (3.4:1 on sidebar); on-sky when the row is selected. */
  --bubble-in-lo: #e6e9ee;  /* Bottom of an incoming chat bubble's gradient (top is surface); ink text. */
  --bubble-out-hi: #e8f4ff;  /* Top of your own chat bubble's gradient; ink text. */
  --bubble-out-lo: #bcdcf8;  /* Bottom of your own chat bubble's gradient; ink text (13:1). */
  --bubble-out-edge: #8db9e4;  /* Hairline around your own chat bubbles. */
  --space-1: 4px;  /* Icon-to-label gap, badge padding. */
  --space-2: 8px;  /* Gap between controls in a toolbar; row padding. */
  --space-3: 12px;  /* Button horizontal padding; field padding. */
  --space-4: 16px;  /* Panel padding. */
  --space-6: 24px;  /* Between panels. */
  --space-10: 40px;  /* Between page sections. */
  --radius-field: 3px;  /* Text fields and checkboxes: nearly square, like the era. */
  --radius-control: 5px;  /* Buttons and segmented controls. */
  --radius-panel: 8px;  /* Panels, cards and dialogs. */
  --radius-pill: 999px;  /* Search fields, badges, status pills. */
  --shadow-control: 0 1px 1px rgba(0,0,0,0.18);  /* Under every raised button. */
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.22);  /* Inside text fields, tracks and pressed buttons. */
  --shadow-panel: 0 1px 3px rgba(0,0,0,0.16);  /* Panels sitting on surface-muted or sidebar. */
  --shadow-menu: 0 6px 18px rgba(0,0,0,0.24);  /* Menus and popovers. */
  --shadow-window: 0 14px 40px rgba(0,0,0,0.32);  /* Dialogs and sheets floating over the page. */
  --font-sans: "Source Sans 3", "Lucida Grande", "Myriad Pro", sans-serif;
  --font-mono: "Source Code Pro", Monaco, Menlo, monospace;
}

/* Type styles */
.rn-type-display { font-family: "Source Sans 3", "Lucida Grande", "Myriad Pro", sans-serif; font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.5px; }
.rn-type-title { font-family: "Source Sans 3", "Lucida Grande", "Myriad Pro", sans-serif; font-size: 24px; line-height: 30px; font-weight: 600; }
.rn-type-setup { font-family: "Source Sans 3", "Lucida Grande", "Myriad Pro", sans-serif; font-size: 20px; line-height: 26px; font-weight: 600; }
.rn-type-heading { font-family: "Source Sans 3", "Lucida Grande", "Myriad Pro", sans-serif; font-size: 16px; line-height: 20px; font-weight: 600; }
.rn-type-body { font-family: "Source Sans 3", "Lucida Grande", "Myriad Pro", sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; }
.rn-type-control { font-family: "Source Sans 3", "Lucida Grande", "Myriad Pro", sans-serif; font-size: 13px; line-height: 16px; font-weight: 600; }
.rn-type-small { font-family: "Source Sans 3", "Lucida Grande", "Myriad Pro", sans-serif; font-size: 12px; line-height: 16px; font-weight: 400; }
.rn-type-eyebrow { font-family: "Source Sans 3", "Lucida Grande", "Myriad Pro", sans-serif; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.rn-type-code { font-family: "Source Code Pro", Monaco, Menlo, monospace; font-size: 13px; line-height: 20px; font-weight: 400; }
.rn-type-code-display { font-family: "Source Code Pro", Monaco, Menlo, monospace; font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: 2px; }