/* ==========================================================================
   YantraVidha AI — design tokens
   ==========================================================================

   DIRECTION, and where it came from.

   agnor.net sets `theme-color: #0a0a0a` and describes itself as "premium,
   minimal". So the product language is near-black, restrained, one accent doing
   real work. Orange is that accent — and on a PCB canvas an orange accent is
   genuinely useful rather than merely on-brand: copper artwork is already
   orange-brown, so the accent reads as "the board" and the UI chrome stays out
   of its way.

   Structurally the canvas borrows from KiCad's appearance panel, which is the
   most proven pattern in this domain: layers, objects and nets as separate
   tabs, each layer with its own visibility toggle and colour swatch, and
   inactive layers DIMMED rather than hidden. Dimming is the important part.
   Hiding a layer loses the spatial relationship you were trying to inspect;
   dimming keeps context while making the active layer unambiguous.

   ONE LINE TO RETHEME: set --accent below. Everything derives from it.
   ========================================================================== */

:root {
  /* ---- the accent --------------------------------------------------------
     Change this and only this to match agnor.net exactly. Every other orange
     in the file is derived, so nothing goes out of step. */
  --accent:            #ff6a1f;
  --accent-bright:     #ff8747;
  --accent-dim:        #c14d12;
  --accent-ink:        #1a0b04;   /* text ON accent — dark, not white */

  /* Accent at low alpha, for fills, glows and focus rings. Kept as explicit
     tokens rather than inline rgba() so a retheme cannot miss one. */
  --accent-a08:        rgba(255, 106, 31, 0.08);
  --accent-a16:        rgba(255, 106, 31, 0.16);
  --accent-a32:        rgba(255, 106, 31, 0.32);
  --accent-a56:        rgba(255, 106, 31, 0.56);

  /* ---- surfaces ----------------------------------------------------------
     Five steps, not three. A four-pane editor needs enough separation to show
     nesting (panel inside pane inside shell) without drawing a border for every
     boundary — borders at that density turn into visual noise fast. */
  --bg-0:              #070707;   /* app backdrop, behind everything */
  --bg-1:              #0a0a0a;   /* agnor.net's own value: panes */
  --bg-2:              #111111;   /* raised: panels, cards */
  --bg-3:              #171717;   /* controls at rest */
  --bg-4:              #1f1f1f;   /* controls hovered */

  --canvas-bg:         #060809;   /* very slightly cool: makes copper warmer */

  /* ---- ink ---------------------------------------------------------------
     Never pure white. #fff on #0a0a0a is a ~19:1 contrast ratio that reads as
     glare on a dark UI people stare at for hours. */
  --ink-0:             #f2efec;   /* primary — warm-shifted to sit with orange */
  --ink-1:             #b9b3ad;   /* secondary */
  --ink-2:             #7d7873;   /* tertiary, metadata */
  --ink-3:             #4e4a47;   /* disabled, placeholders */

  --line:              #232323;   /* hairline */
  --line-strong:       #333131;

  /* ---- status ------------------------------------------------------------
     Deliberately NOT orange-family. Orange is the brand accent and means
     "interactive"; a warning that looks like a button is a warning nobody
     reads. Amber is pushed yellow-ward to stay distinct from --accent. */
  --ok:                #4ea862;
  --warn:              #d9a521;
  --err:               #e0524a;
  --info:              #4d8fd6;
  --ok-a16:            rgba(78, 168, 98, 0.16);
  --warn-a16:          rgba(217, 165, 33, 0.16);
  --err-a16:           rgba(224, 82, 74, 0.16);

  /* ---- copper layers ----------------------------------------------------
     KiCad's own convention, kept on purpose: anyone who has used KiCad already
     knows red is front and green is back, and inventing a private palette would
     cost them that for nothing. */
  --layer-f-cu:        #d9534f;
  --layer-b-cu:        #3f9e57;
  --layer-in1:         #c9a227;
  --layer-in2:         #8f6fd6;
  --layer-in3:         #2f9ea8;
  --layer-in4:         #c96fa8;
  --layer-edge:        #d8c9a8;
  --layer-pad:         #c9a227;
  --layer-silk:        #9aa4ad;
  --plane-alpha:       0.18;
  --layer-inactive:    0.28;       /* dimmed, not hidden — see the note above */

  /* ---- type -------------------------------------------------------------
     System stack: a webfont on a tool people open twenty times a day is a
     render-blocking request for a marginal aesthetic gain. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --fs-xs: 11px;  --fs-sm: 12px;  --fs-md: 13px;
  --fs-lg: 15px;  --fs-xl: 19px;  --fs-2xl: 25px;
  --lh-tight: 1.25;  --lh: 1.5;

  /* ---- space: 4px base -------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --r-sm: 4px; --r-md: 7px; --r-lg: 11px; --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 6px 20px rgba(0,0,0,.55);
  --shadow-3: 0 18px 48px rgba(0,0,0,.62);
  --glow:     0 0 0 1px var(--accent-a32), 0 0 22px -6px var(--accent-a56);

  --t-fast: 90ms cubic-bezier(.2,.6,.2,1);
  --t-mid:  180ms cubic-bezier(.2,.6,.2,1);

  --rail-w: 52px;
  --side-w: 296px;
  --insp-w: 330px;
  --topbar-h: 46px;
  --status-h: 26px;
}

/* Respect the platform. Someone who has asked for reduced motion has asked for
   it everywhere, not just where it was convenient to honour. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-mid: 0ms; }
  * { animation: none !important; }
}

/* A light theme is not provided rather than provided badly. A dense dark canvas
   tool inverted mechanically looks broken, and this is not the step to design a
   second full palette. The tokens make it a contained job later. */

* { box-sizing: border-box; }

/* The failure this exists to catch: any element with `display` set by a
   class -- `.btn { display: inline-flex }`, most visibly -- outranks the
   UA stylesheet's bare `[hidden] { display: none }`, an author rule always
   beats a UA one at equal specificity. A button given the `hidden`
   attribute and a `.btn` class rendered anyway, visible on every tab
   regardless of which one its own script meant to show it on. `!important`
   here is not a shortcut, it is the actual fix: `hidden` needs to outrank
   every other display rule on the page, unconditionally, or it is not
   hiding anything. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-a32); color: var(--ink-0); }

/* One focus style, visible, applied through :focus-visible so it appears for
   keyboard users and not on every mouse click. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Scrollbars: thin, and only coloured on hover. A dense tool with bright
   scrollbars everywhere reads as clutter. */
* { scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--bg-4); border-radius: var(--r-full);
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); background-clip: content-box; }

.mono { font-family: var(--mono); font-variant-ligatures: none; }
.dim  { color: var(--ink-2); }
.tnum { font-variant-numeric: tabular-nums; }