/* @operifex/web-next — DESIGN TOKENS.
   Loaded AFTER /agentui/src/theme.css and targeting the SAME `.aui-root`
   selector, so equal specificity + later source order means these values win.
   Nothing here invents a palette: every colour is derived from the one --hue
   token agentui already uses, which is why a single number rebrands the product.

   HARD RULE (enforced by test/theme.test.mjs): no hex / rgb() / hsl() literal
   may appear anywhere under src/theme/. Colour is var(--x) or oklch(... var(--hue)). */

.aui-root {
  /* --- the one dial -------------------------------------------------------
     262 = deep violet-indigo. Chosen over agentui's default 226 because 226 is
     the generic-SaaS blue every dashboard template ships with; 262 reads as
     "intelligent tool" and keeps enough chroma to stay legible at both the
     0.70L (dark accent) and 0.56L (light accent) agentui derives. */
  --hue: 262;

  /* --- spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 ----------------------
     Inconsistent gaps are the single loudest tell of a wireframe. Every gap,
     padding and margin in shell.css / components.css comes from this ladder. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* --- radii (agentui defines --rad: 10px; these are its siblings) --------- */
  --rad: 10px;
  --rad-sm: 7px;
  --rad-lg: 14px;
  --rad-pill: 999px;

  /* --- layout ------------------------------------------------------------- */
  --ox-sidebar: 248px;         /* fixed sidebar width, desktop                */
  --ox-rail: 68px;             /* collapsed icon rail, <=1100px               */
  --ox-content-max: 1120px;    /* reading-comfort cap for the main column     */
  --ox-pad: 24px;              /* page padding (16px on mobile, see shell.css) */

  /* --- type scale: 20 / 15 / 14 / 13 / 12.5 / 11 --------------------------
     Body line-height 1.45 (agentui default), headings 1.25. Body text is never
     letter-spaced; only the 20px title gets a slight negative tracking. */
  --ox-t-title: 20px;
  --ox-t-lg: 15px;
  --ox-t-md: 14px;
  --ox-t-sm: 13px;
  --ox-t-xs: 12.5px;
  --ox-t-2xs: 11px;

  /* --- elevation ----------------------------------------------------------
     Cards carry NO shadow at rest — a hairline border does the separating. The
     lift only appears on hover/lifted state, which is what makes the hover feel
     like the object rose rather than like the page repainted. */
  --ox-lift-sm: 0 1px 2px oklch(0.10 0.02 var(--hue) / .40);
  --ox-lift: 0 1px 2px oklch(0.10 0.02 var(--hue) / .34), 0 8px 22px oklch(0.09 0.02 var(--hue) / .34);
  --ox-pop: 0 16px 48px oklch(0.07 0.02 var(--hue) / .55), 0 2px 6px oklch(0.07 0.02 var(--hue) / .4);

  /* --- derived surfaces ---------------------------------------------------
     agentui gives --bg / --bg2 / --bg3. These three fill the gaps the shell
     needs: a RECESSED plane (sidebar, disclosure strip) below --bg, a hover
     wash between --bg2 and --bg3, and a faint accent glow for tinted fills. */
  --ox-sunken: oklch(0.155 0.014 var(--hue));
  --ox-hover: oklch(0.27 0.018 var(--hue));
  --ox-glow: oklch(0.70 0.155 var(--hue) / 0.13);
  --ox-scrim: oklch(0.10 0.02 var(--hue) / 0.55);
}

/* Light mode is a first-class mode, not an inversion afterthought: the recessed
   plane goes slightly GREY (a lighter sidebar than the content would read as
   raised, which is the wrong depth cue), and the shadows lose almost all their
   opacity — a dark-mode shadow on white looks like dirt. */
.aui-root[data-mode="light"] {
  --ox-lift-sm: 0 1px 2px oklch(0.55 0.03 var(--hue) / .10);
  --ox-lift: 0 1px 2px oklch(0.55 0.03 var(--hue) / .10), 0 8px 20px oklch(0.55 0.03 var(--hue) / .12);
  --ox-pop: 0 18px 44px oklch(0.5 0.03 var(--hue) / .16), 0 2px 6px oklch(0.5 0.03 var(--hue) / .10);
  /* 0.945, not 0.962: at 0.962 the sidebar sat within a hair of --bg (0.975) and
     the two planes read as one sheet — the depth cue has to be visible, not
     merely present. */
  --ox-sunken: oklch(0.945 0.008 var(--hue));
  --ox-hover: oklch(0.925 0.012 var(--hue));
  --ox-glow: oklch(0.56 0.17 var(--hue) / 0.10);
  --ox-scrim: oklch(0.35 0.03 var(--hue) / 0.35);
}

/* Coarse pointers get agentui's larger --hit automatically; the page padding
   tightens with them too so a phone does not spend a fifth of its width on air. */
@media (pointer: coarse) {
  .aui-root { --ox-pad: 16px; }
}