/* PathFacts design tokens: the Slate Signal palette, type, spacing, radii and
 * motion. Every stylesheet in the application loads this first and none of
 * them carries a :root block of its own.
 *
 * landing/index.html cannot link it (the landing page has to render when the
 * application is down), so scripts/brand/sync_tokens.mjs copies the block
 * between the tokens:start and tokens:end markers into that page. Edit here,
 * then run `npm run tokens`.
 *
 * Lime is the brand accent and reads poorly in large areas: use it for lines,
 * rings, underlines, icon accents and small marks, never as a panel fill or
 * body text. Slate carries anything that needs area. */

/* tokens:start */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest. All tinted toward the slate. */
  --bg-0: #0e131a;
  --bg: #121821;
  --panel: #181f29;
  --panel-2: #1f2833;
  --panel-3: #26313e;
  --line: #2a3644;
  --line-soft: rgba(229, 235, 241, .06);
  --highlight: rgba(229, 235, 241, .04);

  /* Slate: the area colour for selection, secondary buttons, hover. */
  --slate: #334f66;
  --slate-hi: #4a6d88;
  --slate-lo: #22364a;
  --slate-wash: rgba(51, 79, 102, .35);

  /* Text. */
  --text: #e5ebf1;
  --text-2: #a9b6c4;
  --muted: #8a99aa;
  --faint: #55636f;

  /* Brand lime: lines and small marks only. */
  --lime: #9be600;
  --lime-hi: #b4f23a;
  --lime-line: rgba(155, 230, 0, .45);
  --lime-wash: rgba(155, 230, 0, .10);
  --lime-glow: rgba(155, 230, 0, .22);
  --on-lime: #111418;

  /* Primary buttons: solid white with charcoal text. Lime stays the accent
     (tabs, underlines, icons, focus); the button that acts is white. */
  --btn: #e5ebf1;
  --btn-hi: #ffffff;
  --btn-ink: #111418;
  --btn-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 14px rgba(0, 0, 0, .35);

  /* Information and status. */
  --steel: #7fb2dc;
  --steel-wash: rgba(127, 178, 220, .12);
  --warn: #f2b84b;
  --warn-wash: rgba(242, 184, 75, .12);
  --error: #ff6b5e;
  --error-wash: rgba(255, 107, 94, .12);
  --edited: #ff5ec7;

  /* Names the stylesheets used before this file existed. */
  --accent: var(--steel);
  --ok: var(--lime);

  /* Type. */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
               monospace;
  --fs-micro: 11px;
  --fs-table: 12px;
  --fs-body: 13px;
  --fs-lead: 14px;
  --fs-h3: 15px;
  --fs-h2: 17px;
  --fs-h1: 22px;
  --tracking-micro: .08em;

  /* Shape and rhythm (4 px grid). */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --r-sm: 4px;
  --r-ctl: 6px;
  --r-panel: 10px;
  --ctl-h: 32px;
  --topbar-h: 44px;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--lime-line);
  --inset-hi: inset 0 1px 0 var(--highlight);

  /* Motion. */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.6, 0, .3, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-icon: 800ms;
}
/* tokens:end */

/* Base rules shared by every page. */

/* Icons inside a primary button stay in the button's ink: a lime accent on
   white does not read. */
:is(.btn-primary, button.primary, .auth-btn.primary, .ent-actions .primary) .pfi {
  color: var(--btn-ink) !important;
  --pfi-ac: var(--btn-ink) !important;
}
:is(.btn-primary, button.primary, .auth-btn.primary, .ent-actions .primary) .pfi .pfi-a { filter: none !important; }

::selection { background: var(--slate); color: var(--text); }

:focus-visible { outline: none; box-shadow: var(--ring); }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--slate); }
::-webkit-scrollbar-track { background: transparent; }

.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .94em;
}

.micro {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  color: var(--muted);
  font-weight: 600;
}