/* LexForge workspace — design tokens, base layer and motion.
   Source of truth: the "LexForge Workspace" design prototype
   (claude.ai/design project 2292e4b7-8ca8-410e-8a83-faf46e9d04eb).

   Loaded ONLY by the ten authenticated workspace pages. The public demo page
   (demo.html) keeps workspace-tokens.css + demo.css, which this file
   deliberately does not touch.

   Every colour in the workspace resolves through a token declared here. There
   are no raw hex values in workspace-app.css — that is what stops light and
   dark drifting apart. */

:root {
  color-scheme: light;

  --bg:#FAF7F0; --sidebar:#F3EDE0; --card:#FFFDF8; --card-alt:#FBF8F1; --thead:#F8F4EA;
  --line:#E5DCCB; --line-mid:#EDE5D5; --line-soft:#F2EBDC; --track:#E7DCC6;
  --ink:#221D18; --ink-2:#3E362C; --ink-3:#554C42;
  /* The prototype's muted ramp sits below WCAG AA on this ground: row metadata
     measured 3.10:1 and column headers 3.81:1. These are darkened just enough
     to clear 4.5:1 on the lightest surface each one lands on, while keeping
     the four steps visibly distinct so metadata still recedes behind the
     document name (8.3 / 6.3 / 5.6 / 5.3 on --card). --faintest is disabled
     text and placeholders, which WCAG 1.4.3 exempts, but is lifted too. */
  --muted:#665E56; --muted-2:#6D655B; --faint:#72695A; --faintest:#958671;
  --accent:#8A6A3B; --accent-ink:#7A5A28; --accent-soft:#F0E7D5;
  --nav-bg:#E9DFC9; --nav-fg:#3A2C18; --nav-hover:#EDE5D5;
  --btn-bg:#1C1815; --btn-fg:#FBF8F1; --btn-hover:#332C25; --btn-line:#E2D8C4; --btn-ghost-hover:#F1EADB;
  --row-hover:#F9F5EC; --input-bg:#FFFFFF; --focus:#C9B893;
  --dash:#DED2BA; --dash-hover:#B9A47C; --dz-bg:#FCFAF4; --dz-hover:#FBF7EC;
  --ok-bg:#E5EEE3; --ok-fg:#3F6446; --warn-bg:#F8E8CE; --warn-fg:#8A5A17;
  --proc-bg:#F0E7D5; --proc-fg:#7A5A28; --fail-bg:#F7E2DB; --fail-fg:#8C3E2F;
  --flat-bg:#EDE6D6; --flat-fg:#5A5147; --chip-bg:#F1EADB; --chip-fg:#70675E;
  --avatar-bg:#8A6A3B; --avatar-fg:#FBF8F1; --knob:#FFFDF8;
  --danger-line:#EAD3CB; --danger-bg:#FCF4F1; --danger-title:#7A3226; --danger-body:#886860;
  --danger-btn-line:#DFBDB2; --danger-btn-hover:#F6E4DE;
  --sun-bg:var(--card); --sun-fg:var(--ink); --moon-bg:transparent; --moon-fg:var(--faint);
  --card-shadow:0 1px 2px rgba(34,29,24,.045); --ring:var(--accent);
  --info-bg:var(--accent-soft); --info-fg:var(--accent-ink);

  --serif:'Newsreader', 'Times New Roman', serif;
  --sans:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.2,.75,.3,1);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:#171512; --sidebar:#1C1917; --card:#201D19; --card-alt:#252017; --thead:#221E1A;
  --line:#302A24; --line-mid:#2C2621; --line-soft:#272220; --track:#302A24;
  --ink:#F2EAD9; --ink-2:#DCD2C0; --ink-3:#C3B9A6;
  /* Same AA correction as the light block: dark --faint measured 3.58:1 on
     --card-alt. The ramp keeps ~0.8 between steps (8.3 / 6.3 / 5.5 / 4.8). */
  --muted:#A79E90; --muted-2:#9D9382; --faint:#92887A; --faintest:#6E6558;
  --accent:#D9B677; --accent-ink:#E2C48D; --accent-soft:#332818;
  --nav-bg:#2E2720; --nav-fg:#F0E2C6; --nav-hover:#26221E;
  --btn-bg:#D9B677; --btn-fg:#1A1512; --btn-hover:#E7CB98; --btn-line:#38312A; --btn-ghost-hover:#2A251F;
  --row-hover:#242019; --input-bg:#191612; --focus:#6E5C3C;
  --dash:#3A322A; --dash-hover:#6E5C3C; --dz-bg:#1D1A16; --dz-hover:#241F19;
  --ok-bg:#1E2B20; --ok-fg:#8DBE96; --warn-bg:#37290F; --warn-fg:#E0B36A;
  --proc-bg:#342A1A; --proc-fg:#DCBB80; --fail-bg:#3A211B; --fail-fg:#E39A87;
  --flat-bg:#2A2521; --flat-fg:#A79C8C; --chip-bg:#2A2520; --chip-fg:#A79C8C;
  --avatar-bg:#D9B677; --avatar-fg:#1A1512; --knob:#F2EAD9;
  --danger-line:#3E2A24; --danger-bg:#241A17; --danger-title:#E39A87; --danger-body:#B79288;
  --danger-btn-line:#4A322B; --danger-btn-hover:#33221D;
  --sun-bg:transparent; --sun-fg:var(--faint); --moon-bg:#2E2720; --moon-fg:var(--ink);
  --card-shadow:0 1px 2px rgba(0,0,0,.32); --ring:var(--accent);
}

/* The hidden attribute must win over component display rules. The browser's own
   [hidden] rule is user-agent origin, so ANY author rule setting display on the
   same element beats it. Carried over from workspace-tokens.css, where it was
   added after hidden buttons rendered on the convert page. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); }

/* Base text colour belongs here, NOT as an inline style on the app root — an
   inline colour does not recascade when the theme attribute flips. */
body {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
input, textarea { caret-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--faintest); }

::selection { background: var(--accent-soft); }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) { outline: none; }

* { scrollbar-width: thin; scrollbar-color: var(--dash) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 8px; background: var(--dash); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { border: 3px solid transparent; background: var(--faintest); background-clip: content-box; }

@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Transition SURFACES ONLY. Putting `color` in a blanket transition animates
   inherited colour, which strands every element without an explicit colour at
   the previous theme's value when the theme flips — headings turn invisible. */
body * { transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease, opacity .18s ease; }

@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after {
    transition: none !important;
    animation: none !important;
  }
}