/* abstech UI 1.0.0 — tokens, base layer, components. Source: packages/abstech-ui in naf-apps.
   Do not edit a copy inside an app: change the package and run sync-ui. */

/* ---------- Tokens ---------- */
:root {
  --ab-bg: #F5F7F9;
  --ab-surface: #FFFFFF;
  --ab-text: #14212B;
  --ab-muted: #51606C;
  --ab-line: #D5DDE3;
  --ab-brand: #1B5E7A;
  --ab-brand-soft: #E3EFF4;
  --ab-on-brand: #FFFFFF;
  --ab-focus: #2B7FA3;
  --ab-ok: #1E6B45;
  --ab-ok-soft: #E1F2E8;
  --ab-warn: #8A5A00;
  --ab-warn-soft: #FBEFD6;
  --ab-danger: #A4302A;
  --ab-danger-soft: #F9E2E0;
  --ab-info: #1B5E7A;
  --ab-info-soft: #E3EFF4;

  --ab-shadow: 0 1px 2px rgb(15 22 27 / .06), 0 4px 12px rgb(15 22 27 / .06);

  --ab-space-1: 4px;
  --ab-space-2: 8px;
  --ab-space-3: 12px;
  --ab-space-4: 16px;
  --ab-space-5: 24px;
  --ab-space-6: 32px;
  --ab-space-7: 48px;

  --ab-radius-sm: 6px;
  --ab-radius: 8px;

  --ab-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ab-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ab-text-xs: 12px;
  --ab-text-sm: 14px;
  --ab-text-md: 16px;
  --ab-text-lg: 18px;
  --ab-text-xl: 22px;
  --ab-text-2xl: 28px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ab-bg: #0F161B;
    --ab-surface: #172128;
    --ab-text: #E6EDF1;
    --ab-muted: #9AAAB5;
    --ab-line: #2A3740;
    --ab-brand: #7CC4DE;
    --ab-brand-soft: #16303B;
    --ab-on-brand: #0B1A21;
    --ab-focus: #7CC4DE;
    --ab-ok: #7FD1A3;
    --ab-ok-soft: #15301F;
    --ab-warn: #E8C06A;
    --ab-warn-soft: #33280F;
    --ab-danger: #F2968E;
    --ab-danger-soft: #3A1A18;
    --ab-info: #7CC4DE;
    --ab-info-soft: #16303B;

    --ab-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 12px rgb(0 0 0 / .4);
  }
}

/* ---------- Fonts ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-mono-400.woff2") format("woff2"); }

/* ---------- Base layer: plain elements look right with no classes ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ab-bg);
  color: var(--ab-text);
  font-family: var(--ab-font-sans);
  font-size: var(--ab-text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: var(--ab-space-6) 0 var(--ab-space-3); }
h1 { font-size: var(--ab-text-2xl); margin-top: 0; }
h2 { font-size: var(--ab-text-xl); }
h3 { font-size: var(--ab-text-lg); }
h4 { font-size: var(--ab-text-md); }
p, ul, ol, pre, table, form { margin: 0 0 var(--ab-space-4); }
ul, ol { padding-left: var(--ab-space-5); }
a { color: var(--ab-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, kbd, samp, pre { font-family: var(--ab-font-mono); font-size: 0.9em; }
code { background: var(--ab-brand-soft); color: var(--ab-text); padding: 1px 5px; border-radius: 4px; }
pre { background: var(--ab-surface); border: 1px solid var(--ab-line); border-radius: var(--ab-radius); padding: var(--ab-space-3) var(--ab-space-4); overflow-x: auto; overflow-wrap: normal; }
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--ab-line); margin: var(--ab-space-5) 0; }
img, svg { max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: var(--ab-text-sm); }
th, td { text-align: left; padding: var(--ab-space-2) var(--ab-space-3); border-bottom: 1px solid var(--ab-line); vertical-align: top; }
th { font-weight: 600; color: var(--ab-muted); font-size: var(--ab-text-xs); text-transform: uppercase; letter-spacing: 0.04em; }

label { display: block; font-weight: 600; font-size: var(--ab-text-sm); margin-bottom: var(--ab-space-1); }
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--ab-text);
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius-sm);
  padding: 10px var(--ab-space-3);
  min-height: 44px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--ab-muted); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--ab-danger); }
input[type=checkbox], input[type=radio] { accent-color: var(--ab-brand); width: 18px; height: 18px; }

/* Buttons: bare buttons look like the primary ab-btn. */
button, input[type=submit], input[type=button], .ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-space-2);
  min-height: 44px;
  padding: 0 var(--ab-space-4);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ab-on-brand);
  background: var(--ab-brand);
  border: 1px solid var(--ab-brand);
  border-radius: var(--ab-radius-sm);
  cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, transform .1s ease;
}
button:hover, input[type=submit]:hover, input[type=button]:hover, .ab-btn:hover { filter: brightness(1.08); text-decoration: none; }
button:active, .ab-btn:active { transform: translateY(1px); }
button:disabled, .ab-btn:disabled, .ab-btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; filter: none; transform: none; }

:focus-visible { outline: 2px solid var(--ab-focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--ab-focus); }

::selection { background: var(--ab-brand-soft); color: var(--ab-text); }

/* ---------- Components ---------- */
.ab-btn--secondary { color: var(--ab-text); background: var(--ab-surface); border-color: var(--ab-line); }
.ab-btn--secondary:hover { filter: none; background: var(--ab-brand-soft); }
.ab-btn--danger { color: var(--ab-surface); background: var(--ab-danger); border-color: var(--ab-danger); }
.ab-btn--link { color: var(--ab-brand); background: none; border-color: transparent; padding: 0 var(--ab-space-1); min-height: 0; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.ab-btn--link:hover { filter: none; text-decoration-thickness: 2px; }
.ab-btn--block { display: flex; width: 100%; }
.ab-btn--block + .ab-btn--block { margin-top: var(--ab-space-2); }

.ab-mark { display: block; width: 24px; height: 24px; flex: none; overflow: visible; }
.ab-mark__frame { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ab-mark__block { fill: var(--ab-brand); }

.ab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ab-space-2) var(--ab-space-4);
  padding: var(--ab-space-3) var(--ab-space-4);
  background: var(--ab-surface);
  border-bottom: 1px solid var(--ab-line);
}
.ab-brand { display: inline-flex; align-items: center; gap: var(--ab-space-2); color: var(--ab-text); text-decoration: none; font-weight: 600; font-size: var(--ab-text-lg); letter-spacing: -0.02em; }
.ab-brand:hover { text-decoration: none; }
.ab-app-name { color: var(--ab-muted); font-weight: 400; letter-spacing: 0; padding-left: var(--ab-space-2); border-left: 1px solid var(--ab-line); }
.ab-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ab-space-1) var(--ab-space-4); font-size: var(--ab-text-sm); }
.ab-nav form { margin: 0; }
.ab-nav a { color: var(--ab-muted); text-decoration: none; padding: var(--ab-space-1) 0; }
.ab-nav a:hover, .ab-nav a[aria-current=page] { color: var(--ab-text); }
.ab-nav a[aria-current=page] { box-shadow: inset 0 -2px 0 var(--ab-brand); }

.ab-page { max-width: 26rem; margin: 0 auto; padding: var(--ab-space-6) var(--ab-space-4) var(--ab-space-7); }
.ab-page--wide { max-width: 60rem; }

.ab-card { background: var(--ab-surface); border: 1px solid var(--ab-line); border-radius: var(--ab-radius); padding: var(--ab-space-5); box-shadow: var(--ab-shadow); margin-bottom: var(--ab-space-4); }
.ab-card > :last-child { margin-bottom: 0; }
.ab-card > h1:first-child, .ab-card > h2:first-child { margin-top: 0; }

.ab-field { margin-bottom: var(--ab-space-4); }
.ab-hint { color: var(--ab-muted); font-size: var(--ab-text-sm); margin: var(--ab-space-1) 0 0; }
.ab-error { color: var(--ab-danger); font-size: var(--ab-text-sm); margin: var(--ab-space-1) 0 0; }
.ab-check { display: flex; align-items: center; gap: var(--ab-space-2); font-weight: 400; margin-bottom: var(--ab-space-4); }

.ab-notice { border-radius: var(--ab-radius-sm); padding: var(--ab-space-3) var(--ab-space-4); border-left: 3px solid currentColor; color: var(--ab-text); background: var(--ab-surface); }
.ab-notice--ok { color: var(--ab-ok); background: var(--ab-ok-soft); }
.ab-notice--warn { color: var(--ab-warn); background: var(--ab-warn-soft); }
.ab-notice--danger { color: var(--ab-danger); background: var(--ab-danger-soft); }
.ab-notice--info { color: var(--ab-info); background: var(--ab-info-soft); }

.ab-pill { display: inline-flex; align-items: center; gap: var(--ab-space-1); padding: 2px 10px; border-radius: 999px; font-size: var(--ab-text-xs); font-weight: 600; line-height: 1.6; white-space: nowrap; color: var(--ab-muted); background: var(--ab-bg); border: 1px solid var(--ab-line); }
.ab-pill--ok { color: var(--ab-ok); background: var(--ab-ok-soft); border-color: transparent; }
.ab-pill--warn { color: var(--ab-warn); background: var(--ab-warn-soft); border-color: transparent; }
.ab-pill--danger { color: var(--ab-danger); background: var(--ab-danger-soft); border-color: transparent; }
.ab-pill--info { color: var(--ab-info); background: var(--ab-info-soft); border-color: transparent; }
.ab-pill--neutral { color: var(--ab-muted); }

.ab-table-wrap { overflow-x: auto; margin-bottom: var(--ab-space-4); border: 1px solid var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-surface); -webkit-overflow-scrolling: touch; }
.ab-table-wrap > table { margin: 0; }
.ab-table { overflow-wrap: normal; }
.ab-table td, .ab-table th { white-space: nowrap; }
.ab-table tbody tr:last-child td { border-bottom: 0; }
.ab-table tbody tr:hover td { background: var(--ab-bg); }

.ab-mono { font-family: var(--ab-font-mono); font-size: 0.9em; }
.ab-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ab-space-2); }
.ab-grid { display: grid; gap: var(--ab-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

.ab-footer { display: flex; flex-wrap: wrap; gap: var(--ab-space-2) var(--ab-space-4); justify-content: center; padding: var(--ab-space-5) var(--ab-space-4); color: var(--ab-muted); font-size: var(--ab-text-sm); border-top: 1px solid var(--ab-line); }
.ab-footer a { color: var(--ab-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}