/* ============================================================================
   eabcx — tokens.css
   The palette and the primitives. Everything else in the app keys off these
   variables; no component stylesheet may carry a hard-coded colour.
   Source: CONTRACTS/design.md (Reskin Pro palette) + App Rule 04.
   ==========================================================================*/

/* ------------------------------------------------------------ 0. typeface */
/* Inter ships with the app (public/vendor/fonts, latin subset, variable
   weight) so the design language does not depend on the viewer's machine. */
@font-face{
  font-family:Inter;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/vendor/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------- 1. light */
:root{
  /* surfaces */
  --bg:#eaedf1;            /* the page itself (gray) */
  --panel:#ffffff;         /* cards, popovers, the lifted nav pill */
  --panel2:#fbfcfd;        /* a second surface inside a card */
  --bg2:#f5f6f8;           /* row hover, inset wells, the nav pill track */
  --line:#d8dbdf;          /* every hairline */
  --line2:#e4e6ea;         /* the quieter hairline (inside cards) */

  /* type */
  --txt:#1a1d21;
  --muted:#6b7077;
  --faint:#a3a7ad;

  /* one accent + three semantics */
  --accent:#3e6ae1;
  --accent-hover:#2f56c9;
  --accent-soft:rgba(62,106,225,.09);
  --red:#e82127;    --red-soft:rgba(232,33,39,.08);
  --green:#1f9d55;  --green-soft:rgba(31,157,85,.10);
  --amber:#c98a06;  --amber-soft:rgba(201,138,6,.10);

  /* depth — nothing heavier than --shadow except modals/popovers */
  --shadow:0 1px 2px rgba(16,20,28,.05),0 8px 28px rgba(16,20,28,.07);
  --shadow-lg:0 24px 70px rgba(16,20,28,.18);
  --glass:rgba(255,255,255,.78);
  --backdrop:rgba(16,20,28,.34);

  /* geometry */
  --radius-card:14px;
  --radius-ctl:8px;
  --pill:100px;
  --gutter:20px;           /* the page's left/right gutter — full width, no cap */
  --bar-h:58px;            /* top bar height */
  --cell-y:9px;            /* grid density: 9 x 12 */
  --cell-x:12px;

  /* motion — quiet, one duration */
  --t:.18s;
  --ease:cubic-bezier(.4,0,.2,1);

  /* type scale */
  --font:Inter,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  color-scheme:light;
}

/* ----------------------------------------------------------------- 2. dark */
html[data-theme="dark"]{
  --bg:#121316;
  --panel:#1a1b1f;
  --panel2:#1e1f24;
  --bg2:#202126;
  --line:#2a2c31;
  --line2:#242629;

  --txt:#e8e9eb;
  --muted:#9b9ca1;
  --faint:#5f6065;

  /* the accents lift for a near-black ground (Rule 04 dark block) */
  --accent:#5b8cff;
  --accent-hover:#7ba3ff;
  --accent-soft:rgba(91,140,255,.13);
  --red:#ff4d57;    --red-soft:rgba(255,77,87,.12);
  --green:#34c98a;  --green-soft:rgba(52,201,138,.12);
  --amber:#e8b339;  --amber-soft:rgba(232,179,57,.12);

  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 34px rgba(0,0,0,.45);
  --shadow-lg:0 30px 90px rgba(0,0,0,.65);
  --glass:rgba(18,19,22,.78);
  --backdrop:rgba(0,0,0,.55);

  color-scheme:dark;
}

/* -------------------------------------------------------------- 3. reset  */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:13px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.25}
p{margin:0 0 10px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

/* The UA enforces [hidden] at the lowest specificity, so any author
   display: rule beats it and overlays ship permanently painted. (Rule 04) */
[hidden]{display:none!important}

/* ------------------------------------------------------------- 4. focus   */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
::selection{background:var(--accent-soft);color:var(--txt)}

/* --------------------------------------------------------- 5. scrollbars  */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line);
  border:3px solid transparent;
  background-clip:content-box;
  border-radius:100px;
}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ------------------------------------------------------------ 6. helpers  */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.nowrap{white-space:nowrap}
.grow{flex:1}
.right{text-align:right}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}