/* ============================================================
   torc-theme.css · the ONE token file · Option A (2026-09-11)

   Revvek's design system (apps/torc-network/public/network.css, extracted in
   SANDBOX_DESIGN_TOKENS.md) with every orange token replaced by the Torc blue
   family. The base, the surfaces and the header greys are Revvek's exactly.

   Every app reads these --torc-* names. An app never redefines a value here;
   it overrides in its own :root AFTER this file (Revvek puts its orange back,
   for instance). App stylesheets keep their historical short names by
   aliasing them to these tokens, so nothing has to be renamed to adopt it.

   Contrast (sandbox/contrast.py, WCAG 2.1):
   - #194872 (deep) fails as text or outline on every surface here (1.7–2.1).
     It is STRUCTURE ONLY: gradient, brand mark, a filled deep button with
     white text (9.5:1). Never text, never an outline, never a focus ring.
   - #4688c3 (accent) passes 3:1 for outlines, focus rings and icon strokes
     on every surface, and fails 4.5:1 as text on a card (4.48). Never body
     text or a link.
   - #7FB0E0 (link) passes 4.5:1 everywhere (7:1+). Links, quiet buttons,
     info badges, eyebrows.
   - White on a solid #4688c3 button is 3.77: there are no mid-blue filled
     buttons. The primary button is the light fill with a blue underline.
   - Amber #e0983f means ACTION REQUIRED. Nothing else. Ever.
   ============================================================ */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BarlowCondensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/BarlowCondensed-800.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/Inter-var.woff2) format('woff2')}

:root{
  /* chrome: header, tab bar, sidebar */
  --torc-chrome:#0B0C0E;
  --torc-chrome-2:#16181C;        /* hero, sidebar hover, header button hover */
  --torc-chrome-3:#24272D;        /* sidebar active row, avatar tile, tab bar top rule */
  --torc-chrome-text:#C9D1DA;     /* sidebar item at rest, landing nav links */
  --torc-chrome-dim:#9AA3AE;      /* tab bar inactive, sidebar sub-links */
  --torc-chrome-dim-2:#6E7782;    /* counts in the sidebar, the collapse toggle */

  /* surfaces */
  --torc-page:#121417;
  --torc-card:#1A1D22;
  --torc-card-2:#22262C;          /* raised: hover, tiles, tag pills, phone search box */
  --torc-gray:#262B32;            /* segmented track, close buttons, "none" tiles */

  /* lines */
  --torc-line:#2E333B;            /* card, input, button borders */
  --torc-line-2:#272C33;          /* row dividers, card header underline */

  /* text */
  --torc-text:#F1F3F5;
  --torc-text-strong:#FFFFFF;     /* emphasised names and headings inside cards */
  --torc-muted:#B3BAC4;           /* secondary copy, form labels */
  --torc-dim:#8A939E;             /* meta, timestamps, uppercase field labels, placeholders */
  --torc-on-light:#0B0C0E;        /* text on the light primary button */
  --torc-on-light-dim:#4B5058;    /* small text on the light "on" chip */
  --torc-light-hover:#DFE3E8;     /* the light primary button, hovered */

  /* the Torc blue family */
  --torc-accent:#4688c3;          /* outlines, focus, active strokes, underlines (3:1 non-text) */
  --torc-accent-rgb:70,136,195;
  --torc-accent-bg:rgba(70,136,195,.14);
  --torc-accent-bd:rgba(70,136,195,.4);
  --torc-deep:#194872;            /* structure only: gradient, mark, filled deep button */
  --torc-deep-rgb:25,72,114;
  --torc-link:#7FB0E0;            /* link text, quiet buttons, info (4.5:1+) */
  --torc-link-2:#A9C4E0;          /* info text on a tinted background */
  --torc-grad:linear-gradient(225deg,#4688c3 35%,#194872);

  /* status: a written word plus a hairline, never a fill on its own */
  --torc-good:#3DCB7E;  --torc-good-bg:rgba(61,203,126,.14);  --torc-good-bd:rgba(61,203,126,.4);
  --torc-warn:#e0983f;  --torc-warn-bg:rgba(224,152,63,.14);  --torc-warn-bd:rgba(224,152,63,.4);
  --torc-bad:#F45B5B;   --torc-bad-bg:rgba(244,91,91,.10);    --torc-bad-bd:rgba(244,91,91,.4);
  --torc-info:#7FB0E0;  --torc-info-bg:rgba(127,176,224,.14); --torc-info-bd:rgba(127,176,224,.4);

  /* shape */
  --torc-r:10px;                  /* cards, buttons, inputs, chips, menus */
  --torc-r-sm:8px;                /* header buttons, tab items, menu rows */
  --torc-r-lg:14px;               /* sheets on a desktop, compose box, finder */
  --torc-r-xl:18px;               /* sheet top corners, hero bottom corners */
  --torc-r-pill:999px;

  /* depth */
  --torc-shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.28);
  --torc-shadow-menu:0 16px 40px rgba(0,0,0,.5);
  --torc-shadow-sheet:0 -10px 50px rgba(0,0,0,.6);
  --torc-scrim:rgba(0,0,0,.6);

  /* type */
  --torc-head:'Barlow Condensed','Inter',system-ui,sans-serif;
  --torc-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --torc-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* frame */
  --torc-side-w:260px;
  --torc-side-min:74px;
  --torc-top-h:64px;
  --torc-wrap:1120px;
  --torc-tab-h:0px;
  --torc-tabpad-b:env(safe-area-inset-bottom);
}
/* Phones and tablets: the tab bar exists, the header is tighter (Revvek round 14). */
@media(max-width:899px){
  :root{
    --torc-top-h:50px;
    --torc-tab-h:52px;
    --torc-tabpad-b:max(4px,calc(env(safe-area-inset-bottom) - 14px));
  }
}