/* ============================================================================
   JeffNet — Unified Design System (source of truth)
   Shared by the customer portal and (progressively) the admin panel.
   Tokens only + global accessibility niceties, so it can be imported anywhere
   without fighting a page's own component styles.
   Fonts are provided separately by /vendor/fonts/fonts.css (bundled offline).
   ========================================================================= */

:root{
  /* ---- light (base) ---- */
  --bg:#f1f4fa;
  --panel:#ffffff;
  --panel-2:#f6f8fc;
  --line:#e2e8f3;
  --ink:#16202f;
  --muted:#5a6a86;
  --faint:#8593ab;
  --accent:#3763e6;
  --accent-2:#0e93b0;
  --accent-soft:rgba(55,99,230,.10);
  --ok:#0a9d63;
  --amber:#b7791f;
  --danger:#e0294a;

  --grad:linear-gradient(135deg,#3763e6 0%,#5b8cff 100%);
  --grad-brand:linear-gradient(120deg,#3763e6 0%,#0e93b0 100%);
  --shadow:0 1px 3px rgba(20,40,90,.10),0 6px 24px rgba(20,40,90,.06);
  --shadow-lg:0 12px 40px rgba(20,40,90,.14);
  --code-bg:#eef2fb;

  --sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:14px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f17;
    --panel:#111624;
    --panel-2:#171e30;
    --line:#212b42;
    --ink:#e9edf6;
    --muted:#8e9bb4;
    --faint:#68789a;
    --accent:#5b8cff;
    --accent-2:#22d3ee;
    --accent-soft:rgba(91,140,255,.14);
    --ok:#2dd482;
    --amber:#f5b83d;
    --danger:#ff5d6d;
    --grad:linear-gradient(135deg,#3e77f0 0%,#5b8cff 100%);
    --grad-brand:linear-gradient(120deg,#3e77f0 0%,#22d3ee 100%);
    --shadow:0 2px 8px rgba(0,0,0,.30),0 1px 2px rgba(0,0,0,.20);
    --shadow-lg:0 14px 44px rgba(0,0,0,.44);
    --code-bg:#0e1420;
  }
}

/* explicit theme overrides win over the media query, in both directions */
:root[data-theme="light"]{
  --bg:#f1f4fa; --panel:#ffffff; --panel-2:#f6f8fc; --line:#e2e8f3;
  --ink:#16202f; --muted:#5a6a86; --faint:#8593ab;
  --accent:#3763e6; --accent-2:#0e93b0; --accent-soft:rgba(55,99,230,.10);
  --ok:#0a9d63; --amber:#b7791f; --danger:#e0294a;
  --grad:linear-gradient(135deg,#3763e6 0%,#5b8cff 100%);
  --grad-brand:linear-gradient(120deg,#3763e6 0%,#0e93b0 100%);
  --shadow:0 1px 3px rgba(20,40,90,.10),0 6px 24px rgba(20,40,90,.06);
  --shadow-lg:0 12px 40px rgba(20,40,90,.14);
  --code-bg:#eef2fb;
}
:root[data-theme="dark"]{
  --bg:#0b0f17; --panel:#111624; --panel-2:#171e30; --line:#212b42;
  --ink:#e9edf6; --muted:#8e9bb4; --faint:#68789a;
  --accent:#5b8cff; --accent-2:#22d3ee; --accent-soft:rgba(91,140,255,.14);
  --ok:#2dd482; --amber:#f5b83d; --danger:#ff5d6d;
  --grad:linear-gradient(135deg,#3e77f0 0%,#5b8cff 100%);
  --grad-brand:linear-gradient(120deg,#3e77f0 0%,#22d3ee 100%);
  --shadow:0 2px 8px rgba(0,0,0,.30),0 1px 2px rgba(0,0,0,.20);
  --shadow-lg:0 14px 44px rgba(0,0,0,.44);
  --code-bg:#0e1420;
}

/* ---- global accessibility niceties (safe everywhere) ---- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
::selection{ background:var(--accent-soft); color:var(--ink); }

/* thin, theme-aware scrollbars */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); border:2px solid transparent; background-clip:padding-box; }

/* SVG icons hydrated from icons.js inherit text color + size */
[data-icon]{ display:inline-flex; }
[data-icon] > svg{ display:block; width:1em; height:1em; }

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