/*
 * ROSS Component Kit — the token contract's DEFAULT look.
 * GENERATED by tokens/build.py from tokens/contract.json — do not edit by hand.
 * Contract version 1.1.0. Every component reads ONLY these tokens;
 * a kit (Riven's brand, a client's Web Kit, a Journey Kit) re-sets them through
 * a kit map. Dark is the base (Dev Rules); light is a swap on [data-theme="light"].
 */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  /* Surfaces */
  --ross-bg: #0f1115; /* Page background behind every panel */
  --ross-surface: #161a21; /* Panel / card background */
  --ross-surface-2: #1d222b; /* Raised band: table header, toolbar, hover, tabs */
  --ross-surface-3: #252b36; /* Pressed / strongest fill: button hover, badge fill */
  --ross-border: #2c333f; /* Hairlines between rows and around panels */
  --ross-border-strong: #5A677C; /* Control edges (inputs, buttons, segmented) — must read as a boundary (3:1) */
  /* Text */
  --ross-text: #e8ebf0; /* Body text and titles */
  --ross-text-muted: #a3acba; /* Secondary text: meta lines, labels */
  --ross-text-faint: #8a93a3; /* Least prominent text still read: timestamps, hints — still AA */
  /* Accent */
  --ross-accent: #6ea8fe; /* Primary action fill, active view, focus ring */
  --ross-accent-strong: #8fbcff; /* Accent used AS TEXT: sorted heading, chip text, selected tab label */
  --ross-accent-bg: rgba(110, 168, 254, 0.14); /* Accent tint behind accent text: chips, selected rows, bulk bar */
  --ross-on-accent: #0b1220; /* Text on an accent fill */
  /* Status */
  --ross-ok: #4cc38a; /* Success text / dot */
  --ross-ok-bg: rgba(76, 195, 138, 0.14); /* Success tint */
  --ross-warn: #f0b445; /* Caution text / dot */
  --ross-warn-bg: rgba(240, 180, 69, 0.14); /* Caution tint */
  --ross-bad: #f1707b; /* Error / destructive text / dot */
  --ross-bad-bg: rgba(241, 112, 123, 0.14); /* Error tint */
  --ross-info: var(--ross-accent-strong); /* Informational text / dot (follows the accent unless set) */
  --ross-info-bg: var(--ross-accent-bg); /* Informational tint */
  /* Type */
  --ross-font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Body face. Default Geist, self-hosted (tokens/fonts) so the default look renders at the size the operator approved */
  --ross-font-mono: ui-monospace, "Cascadia Code", Consolas, monospace; /* Codes, versions, ids */
  --ross-text-xs: 0.875rem; /* Captions, badges */
  --ross-text-sm: 0.9375rem; /* Dense UI text, buttons */
  --ross-text-md: 0.9375rem; /* Body text */
  --ross-text-lg: 1.125rem; /* Lead text */
  --ross-text-xl: 1.375rem; /* Display numbers */
  /* Headings */
  --ross-font-heading: var(--ross-font); /* Heading face */
  --ross-heading-weight: 650; /* Heading weight */
  --ross-heading-tracking: -0.01em; /* Heading letter-spacing */
  --ross-heading-case: none; /* Heading text-transform */
  --ross-h1: 2rem; /* Page title */
  --ross-h2: 1.5rem; /* Grid / section title — the largest thing in a panel */
  --ross-h3: 1.1875rem; /* Record panel, dialog and sheet titles; empty-state headline */
  --ross-h4: 1rem; /* Card / item title — always below h2 */
  /* Controls */
  --ross-btn-h: 36px; /* Button, tab and segment height (whole segmented control included) */
  --ross-input-h: var(--ross-btn-h); /* Text box, search and select height — equal to the button height so rows align */
  --ross-input-font: var(--ross-text-sm); /* Text size inside text boxes, search and selects (16px on a phone so iOS never zooms the page) */
  --ross-btn-font: var(--ross-text-sm); /* Button text size */
  --ross-btn-pad-x: 0.85rem; /* Button side padding */
  /* Space */
  --ross-space-1: 0.25rem; /* 4px */
  --ross-space-2: 0.5rem; /* 8px */
  --ross-space-3: 0.75rem; /* 12px */
  --ross-space-4: 1rem; /* 16px */
  --ross-space-5: 1.5rem; /* 24px */
  --ross-space-6: 2rem; /* 32px */
  /* Shape and motion */
  --ross-radius-sm: 6px; /* Buttons, inputs, badges */
  --ross-radius-md: 10px; /* Menus, segmented control, toasts */
  --ross-radius-lg: 14px; /* Panels, dialogs */
  --ross-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); /* Floating layers: menus, dialogs, panel */
  --ross-motion: 160ms ease; /* Standard transition */
  --ross-focus-line: var(--ross-accent-strong); /* Focus is ONE line (Dev Rule #46): the colour a focused control's own border turns. Never a ring, outline or halo. It is the accent-strong (the accent every kit already holds to 4.5:1 as text), so a pale accent still gives a line that reads */
  --ross-focus-on-accent: var(--ross-text); /* The focused border's colour on an accent-filled or accent-drawn control (primary button, selected pill), where the accent cannot show. Light: black, the only colour that reaches 3:1 against both the page and the fill */
  --ross-focus-on-accent-edge: var(--ross-bg); /* The thin edge laid just INSIDE the on-accent focus line, between that line and the accent fill (a 1px inset shadow, never outside: Dev Rule #46). Dark: the page colour, so the line clears 3:1 against it where it cannot against a pale fill. Light: transparent, because black already clears 3:1 against the fill. Operator ruling 2026-10-27, Two-tone line */
  --ross-focus-width: 2px; /* Width of the focused border (2px, so it reads in light mode); a control takes the extra pixel back from its padding, so nothing moves */
  /* Density */
  --ross-row-pad-y: 0.625rem; /* Row vertical padding */
  --ross-row-min: 44px; /* Minimum row height */
  /* Label */
  --ross-label-case: uppercase; /* text-transform of a label (one of none, uppercase, lowercase, capitalize) */
  --ross-label-tracking: 0.12em; /* letter-spacing of a label, in em, from 0 to 0.25em */
  --ross-label-size: 0.75rem; /* font-size of a label, 0.75rem or more (0.8125rem on a phone) */
  /* Overlay */
  --ross-scrim: rgba(0, 0, 0, 0.72); /* The dark overlay colour with its opacity, drawn over a photo behind text */
  --ross-on-scrim: #ffffff; /* Text, links and the focus line on the scrim (opaque) */
  /* Attention ring */
  --ross-ring: 0 0 #0000; /* An attention ring drawn as a box-shadow (tour spotlight, approval editor, arrival highlight); a component sets it on itself and writes box-shadow: var(--ross-ring), ...; html:has(:focus-visible) [data-ring] sets it to none so the ring steps aside for a focus line */
  color-scheme: dark;
}

[data-theme="light"] {
  --ross-bg: #f5f6f8;
  --ross-surface: #ffffff;
  --ross-surface-2: #f1f3f6;
  --ross-surface-3: #e7eaef;
  --ross-border: #dde1e7;
  --ross-border-strong: #8B94A3;
  --ross-text: #161a21;
  --ross-text-muted: #4d5666;
  --ross-text-faint: #5f6878;
  --ross-accent: #2257c9;
  --ross-accent-strong: #1a47a8;
  --ross-accent-bg: rgba(34, 87, 201, 0.10);
  --ross-on-accent: #ffffff;
  --ross-ok: #19794d;
  --ross-ok-bg: rgba(25, 121, 77, 0.10);
  --ross-warn: #8a5a00;
  --ross-warn-bg: rgba(176, 116, 0, 0.12);
  --ross-bad: #b42330;
  --ross-bad-bg: rgba(180, 35, 48, 0.10);
  --ross-shadow: 0 10px 30px rgba(20, 30, 50, 0.16);
  --ross-focus-on-accent: #000000;
  --ross-focus-on-accent-edge: transparent;
  color-scheme: light;
}

/* Phone step: desktop stays as approved; below this width text steps up,
   text boxes use 16px (iOS zooms below that) and controls grow for thumbs. */
@media (max-width: 759px) { :root { --ross-text-xs: 0.8125rem; --ross-text-sm: 0.9375rem; --ross-text-md: 1rem; --ross-input-font: 16px; --ross-btn-h: 40px; --ross-label-size: 0.8125rem; } }

/* Touch size (contract 1.1, note R6/Q13): the look's, the owner's and the visitor's choice reach the page as
   data-touch="large" on the root; below this width a large look grows controls to 44px. Always last of the
   phone rules, so it wins over the 40px above. */
@media (max-width: 759px) { [data-touch="large"] { --ross-btn-h: 44px; --ross-input-h: 44px; } }

/* Density: the one knob a user may change */
[data-density="compact"] { --ross-row-pad-y: 0.375rem; --ross-row-min: 36px; }
[data-density="roomy"] { --ross-row-pad-y: 0.875rem; --ross-row-min: 56px; }