/*!
 * LBIC Design System v1 — canonical token + component layer.
 * ONE source of truth for the whole Trade platform. Load this first, everywhere.
 * Rule after freeze: no new arbitrary hex in individual tool CSS — use these tokens.
 *
 * Brand direction: premium, calm, trade-tech. Newsreader display, Manrope body,
 * soft white + ink blue + ONE restrained blue accent. Green = success only,
 * amber = attention/action, red = blockers/destructive only.
 */

:root {
  /* ---- neutrals (blue-biased, not pure grey) ---- */
  --lbic-ground:      #f4f7fb;   /* app canvas */
  --lbic-surface:     #ffffff;   /* cards, bars */
  --lbic-surface-2:   #eef3f9;   /* subtle raised / hover */
  --lbic-ink:         #14304a;   /* ink blue — headings & primary text */
  --lbic-ink-soft:    #526679;   /* secondary text */
  --lbic-ink-faint:   #5e7081;   /* labels, meta — AA: 4.5:1+ on white/tints (Slice 6) */
  --lbic-line:        #e3eaf2;   /* hairline borders */
  --lbic-line-strong: #cfdae6;   /* input borders */

  /* ---- one accent ---- */
  --lbic-primary:     #2563d8;
  --lbic-primary-ink: #1a49a8;   /* hover / active */
  --lbic-primary-soft:#e9f1fd;   /* tint surface */

  /* ---- semantic (status only, never decoration) ---- */
  --lbic-good:#197b49;  --lbic-good-bg:#e8f5ee;  --lbic-good-line:#bfe3cf;
  --lbic-warn:#a15f09;  --lbic-warn-bg:#fbf1df;  --lbic-warn-line:#f0d9ad;
  --lbic-crit:#bd3a2e;  --lbic-crit-bg:#fbe9e7;  --lbic-crit-line:#f3c9c3;
  --lbic-info:#2563d8;  --lbic-info-bg:#e9f1fd;  --lbic-info-line:#c9dcf7;
  --lbic-blush:#c98a8f; --lbic-blush-bg:#f8eef0;

  /* ---- spacing scale: 4/8/12/16/24/32/48/64 ---- */
  --lbic-s1:4px; --lbic-s2:8px; --lbic-s3:12px; --lbic-s4:16px;
  --lbic-s5:24px; --lbic-s6:32px; --lbic-s7:48px; --lbic-s8:64px;

  /* ---- radii ---- */
  --lbic-r-sm:8px; --lbic-r:12px; --lbic-r-lg:16px; --lbic-r-pill:999px;

  /* ---- elevation (restrained; hairlines do most of the work) ---- */
  --lbic-shadow:    0 1px 2px rgba(20,48,74,.05), 0 6px 18px rgba(20,48,74,.06);
  --lbic-shadow-lg: 0 2px 6px rgba(20,48,74,.06), 0 18px 44px rgba(20,48,74,.10);

  /* ---- type ---- */
  --lbic-serif:"Newsreader", Georgia, "Times New Roman", serif;
  --lbic-sans:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- layout ---- */
  --lbic-maxw:1120px;
  --lbic-focus: 0 0 0 3px rgba(37,99,216,.35);
}

/* ============================ base ============================ */
.lbic-ds, .lbic-ds *, .lbic-ds *::before, .lbic-ds *::after { box-sizing:border-box; }
.lbic-ds { font-family:var(--lbic-sans); color:var(--lbic-ink); font-size:16px; line-height:1.55; }
.lbic-ds h1,.lbic-ds h2,.lbic-ds h3,.lbic-ds h4 { font-family:var(--lbic-serif); font-weight:500; line-height:1.15; color:var(--lbic-ink); margin:0; text-wrap:balance; }
.lbic-ds p { margin:0; }
/* link styling must NOT bleed into anchor-buttons (a.lbic-btn) — scope it out,
 * otherwise `.lbic-ds a` (specificity 0,1,1) overrides `.lbic-btn--primary` (0,1,0). */
.lbic-ds a:not(.lbic-btn) { color:var(--lbic-primary); text-decoration:none; }
.lbic-ds a:not(.lbic-btn):hover { text-decoration:underline; }
.lbic-eyebrow { font-family:var(--lbic-sans); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--lbic-primary); }
.lbic-mono { font-variant-numeric:tabular-nums; }

/* focus — one accessible ring on every interactive control */
.lbic-ds :focus-visible { outline:none; box-shadow:var(--lbic-focus); border-radius:var(--lbic-r-sm); }

/* ============================ buttons ============================ */
.lbic-btn {
  font-family:var(--lbic-sans); font-weight:700; font-size:.92rem; line-height:1.2;
  padding:10px 18px; border-radius:var(--lbic-r-sm); border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  transition:background .15s, border-color .15s, color .15s; white-space:nowrap;
}
.lbic-btn:hover { text-decoration:none; }
.lbic-btn--primary   { background:var(--lbic-primary); color:#fff; }
.lbic-btn--primary:hover { background:var(--lbic-primary-ink); color:#fff; }
.lbic-btn--secondary { background:var(--lbic-surface); color:var(--lbic-primary); border-color:var(--lbic-line-strong); }
.lbic-btn--secondary:hover { background:var(--lbic-primary-soft); border-color:var(--lbic-primary); }
.lbic-btn--ghost     { background:transparent; color:var(--lbic-ink-soft); }
.lbic-btn--ghost:hover { background:var(--lbic-surface-2); color:var(--lbic-ink); }
.lbic-btn--danger    { background:transparent; color:var(--lbic-crit); border-color:var(--lbic-crit-line); }
.lbic-btn--danger:hover { background:var(--lbic-crit-bg); }
.lbic-btn--sm { padding:6px 12px; font-size:.82rem; }
.lbic-btn--lg { padding:13px 24px; font-size:1rem; }
.lbic-btn[disabled], .lbic-btn.is-busy { opacity:.55; cursor:default; pointer-events:none; }

/* ============================ cards ============================ */
.lbic-card {
  background:var(--lbic-surface); border:1px solid var(--lbic-line);
  border-radius:var(--lbic-r); box-shadow:var(--lbic-shadow);
}
.lbic-card--pad { padding:var(--lbic-s5); }
.lbic-card--flat { box-shadow:none; }

/* ============================ status chips ============================ */
.lbic-chip {
  display:inline-flex; align-items:center; gap:6px; font-family:var(--lbic-sans);
  font-weight:700; font-size:.74rem; letter-spacing:.01em; padding:3px 10px;
  border-radius:var(--lbic-r-pill); border:1px solid var(--lbic-line-strong);
  color:var(--lbic-ink-soft); background:var(--lbic-surface-2); white-space:nowrap; line-height:1.5;
}
.lbic-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.lbic-chip--plain::before { display:none; }
.lbic-chip--ok      { color:var(--lbic-good); background:var(--lbic-good-bg); border-color:var(--lbic-good-line); }
.lbic-chip--action  { color:var(--lbic-warn); background:var(--lbic-warn-bg); border-color:var(--lbic-warn-line); }
.lbic-chip--blocked { color:var(--lbic-crit); background:var(--lbic-crit-bg); border-color:var(--lbic-crit-line); }
.lbic-chip--info    { color:var(--lbic-info); background:var(--lbic-info-bg); border-color:var(--lbic-info-line); }
.lbic-chip--wait    { color:var(--lbic-ink-faint); background:var(--lbic-surface-2); border-color:var(--lbic-line); }

/* ============================ form controls ============================ */
.lbic-field { display:flex; flex-direction:column; gap:5px; }
.lbic-field > label, .lbic-label { font-size:.8rem; font-weight:600; color:var(--lbic-ink-soft); }
.lbic-input, .lbic-field input, .lbic-field select, .lbic-field textarea {
  font-family:var(--lbic-sans); font-size:.94rem; color:var(--lbic-ink);
  padding:10px 12px; border:1px solid var(--lbic-line-strong); border-radius:var(--lbic-r-sm);
  background:var(--lbic-surface); width:100%;
}
.lbic-input::placeholder { color:var(--lbic-ink-faint); }
.lbic-field .hint { font-size:.76rem; color:var(--lbic-ink-faint); }
.lbic-field .err  { font-size:.78rem; color:var(--lbic-crit); }

/* ============================ notices ============================ */
.lbic-notice {
  border:1px solid var(--lbic-line); border-radius:var(--lbic-r-sm);
  padding:12px 14px; font-size:.9rem; color:var(--lbic-ink); background:var(--lbic-surface-2);
  display:flex; gap:10px; align-items:flex-start;
}
.lbic-notice--ok   { color:var(--lbic-good); background:var(--lbic-good-bg); border-color:var(--lbic-good-line); }
.lbic-notice--warn { color:var(--lbic-warn); background:var(--lbic-warn-bg); border-color:var(--lbic-warn-line); }
.lbic-notice--crit { color:var(--lbic-crit); background:var(--lbic-crit-bg); border-color:var(--lbic-crit-line); }
.lbic-notice--info { color:var(--lbic-info); background:var(--lbic-info-bg); border-color:var(--lbic-info-line); }

/* ============================ tabs ============================ */
.lbic-tabs { display:flex; gap:2px; border-bottom:1px solid var(--lbic-line); overflow-x:auto; }
.lbic-tab {
  font-family:var(--lbic-sans); font-weight:600; font-size:.9rem; color:var(--lbic-ink-soft);
  padding:11px 16px; border:0; background:none; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.lbic-tab:hover { color:var(--lbic-ink); }
.lbic-tab[aria-selected="true"] { color:var(--lbic-primary); border-bottom-color:var(--lbic-primary); }

/* ============================ tables ============================ */
.lbic-table-wrap { overflow-x:auto; border:1px solid var(--lbic-line); border-radius:var(--lbic-r); background:var(--lbic-surface); }
.lbic-table { border-collapse:collapse; width:100%; font-size:.88rem; }
.lbic-table th, .lbic-table td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--lbic-line); vertical-align:top; }
.lbic-table th { font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--lbic-ink-soft); background:var(--lbic-surface-2); font-weight:700; }
.lbic-table tr:last-child td { border-bottom:0; }

/* ============================ skeleton / empty / error ============================ */
.lbic-skel { background:linear-gradient(90deg,var(--lbic-surface-2) 25%,#f6f9fc 50%,var(--lbic-surface-2) 75%); background-size:200% 100%; animation:lbic-shimmer 1.3s infinite; border-radius:var(--lbic-r-sm); }
@keyframes lbic-shimmer { to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){ .lbic-skel { animation:none; } }
.lbic-empty { text-align:center; padding:var(--lbic-s7) var(--lbic-s5); color:var(--lbic-ink-soft); }
.lbic-empty h3 { margin-bottom:8px; }

.lbic-hr { height:1px; background:var(--lbic-line); border:0; margin:var(--lbic-s5) 0; }