/* BUG-F0-86 -- BACsync FE design-token foundation.
 *
 * This is the single canonical source of truth for the design tokens
 * every operator surface consumes. It is pulled in first by the
 * `@import` hub at the top of `shell/shell.css` (the one stylesheet
 * loaded by both `shell.html` and every page), and pages additionally
 * `<link>` it directly after shell.css. Because the dark overrides in
 * `shell/dark-mode.css` use the higher-specificity `:root[data-theme=
 * "dark"]` selector, that double load is idempotent and never clobbers
 * dark mode.
 *
 * Bias: neutrals do the heavy lifting; the brand colour is an accent
 * only. Every foreground/background pair meets WCAG 2.1 AA in both
 * light and dark (see docs/DESIGN-SYSTEM.md for the verified matrix and
 * tests/unit/test_bug_f0_86_design_tokens.py for the assertion).
 *
 * Token-name contract (BUG-F0-86 acceptance #1): every name that
 * existed before this refresh is preserved so the 30+ page bundles and
 * the in-flight F0-87 / F0-88 sweeps keep resolving. New names are
 * additive: `--gray-*`, `--fs-2xs`, `--fs-display`, `--fw-*`, `--lh-*`,
 * `--motion-ease-out-quart`, `--motion-ease-in-out`. None renamed.
 *
 * Mode-invariant tokens (spacing, type, radius, motion durations, font
 * stacks) live only here under `:root`; only colour tokens are paired
 * with a dark override in dark-mode.css. Elevation tokens live in
 * `_widgets/elevation.css`.
 */

:root {
  color-scheme: light;

  /* ---- Font stacks ------------------------------------------------
   * System-font stack by default: zero network weight (Principle 6
   * Sleek) and consistent rendering across machines. We do not bundle
   * a webfont, so we do not name one we cannot guarantee is installed.
   */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Neutral gray ramp (cool slate) -----------------------------
   * The spine of the palette. 0 = white, 1000 = near-black. The light
   * semantic surfaces + ink derive their values from this ramp; the
   * dark surfaces use a parallel OLED-friendly ramp in dark-mode.css.
   */
  --gray-0:    #ffffff;
  --gray-50:   #f6f8fb;
  --gray-100:  #eef1f6;
  --gray-200:  #e3e8f1;
  --gray-300:  #cfd6e3;
  --gray-400:  #9aa5b8;
  --gray-500:  #64748b;
  --gray-600:  #51607a;
  --gray-700:  #3a4659;
  --gray-800:  #283346;
  --gray-900:  #1c2636;
  --gray-950:  #0b1220;
  --gray-1000: #05080f;

  /* ---- Surfaces (light) ------------------------------------------- */
  --bg-page:    #eaeef4;            /* app canvas (softened, less glare) */
  --bg-surface: #fbfcfe;            /* cards, sheets (off-white, calmer) */
  --bg-sunken:  #e3e8f0;            /* table head, wells                 */
  --bg-hover:   #dde4ee;            /* row / control hover               */
  --bg-overlay: rgba(15, 23, 42, 0.42);   /* modal scrim                */
  --bg-glass:   rgba(248, 250, 253, 0.82); /* frosted topbar            */

  /* ---- Ink (light) ------------------------------------------------ */
  --fg-strong:  #0b1220;            /* gray-950 -- headings, KPI values  */
  --fg-default: #1c2636;            /* gray-900 -- body                  */
  --fg-muted:   #51607a;            /* gray-600 -- secondary text        */
  --fg-faint:   #5f6d86;            /* tertiary text (AA-passing)        */
  --fg-inverse: #ffffff;            /* text on a brand / danger fill     */

  /* ---- Borders (light) -------------------------------------------- */
  --border-light:  #d3dbe6;         /* hairline dividers (more visible)  */
  --border-medium: #bcc6d4;         /* control borders                   */
  --border-strong: #94a1b5;         /* emphasised / hover borders        */

  /* ---- Brand + accent (light) ------------------------------------- */
  --brand:       #2a5fd6;           /* primary action, links             */
  --brand-hover: #1f4fc0;           /* hovered brand                     */
  --brand-soft:  #e6edfc;           /* brand tint: active nav, chips     */
  --brand-fg:    #ffffff;           /* text on a brand fill              */
  --accent:      #7c3aed;           /* secondary accent (gradients)      */

  /* ---- Semantic (light) -- ink deep enough for AA on its own chip - */
  --danger:       #cf2222;
  --danger-soft:  #fdecec;
  --warning:      #9a5b08;
  --warning-soft: #fbf0d6;
  --success:      #1f7a43;
  --success-soft: #e4f4ea;
  --info:         #0d6e88;
  --info-soft:    #e6f3f8;

  /* Pulse (live-data flash). Brief tint behind a value on update. */
  --pulse-bg: #fdf0c8;

  /* ---- Spacing -- 8px grid (shell + components) ------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- Spacing -- 4pt grid (brand / login / splash surfaces) ----- */
  --sp-q1:  4px;
  --sp-q2:  8px;
  --sp-q3:  12px;
  --sp-q4:  16px;
  --sp-q5:  20px;
  --sp-q6:  24px;
  --sp-q7:  28px;
  --sp-q8:  32px;
  --sp-q10: 40px;
  --sp-q12: 48px;
  --sp-q16: 64px;
  --sp-q20: 80px;
  --sp-q24: 96px;

  /* ---- Type ramp --------------------------------------------------
   * Named scale: 2xs / xs / sm / (13) / md / lg / xl / 2xl / 3xl / 4xl
   * / display. `--fs-2xs` + `--fs-display` are new; the rest preserve
   * their pre-refresh names + values. `--fs-md` (14px) is the base.
   */
  --fs-2xs:  10px;   /* NEW: dense uppercase micro-labels              */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-13:   13px;
  --fs-md:   14px;   /* base body                                     */
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-4xl:  40px;
  --fs-display: 48px; /* NEW: hero / splash headline                  */

  /* 1.125-ratio modular ramp anchored at 14px, for brand-mark
   * surfaces that need finer steps than the 8px type ramp. Preserved. */
  --bt-step--2: 11.06px;
  --bt-step--1: 12.44px;
  --bt-step-0:  14px;
  --bt-step-1:  15.75px;
  --bt-step-2:  17.72px;
  --bt-step-3:  19.93px;
  --bt-step-4:  22.43px;
  --bt-step-5:  25.23px;
  --bt-step-6:  28.39px;
  --bt-step-7:  31.94px;
  --bt-step-8:  35.93px;

  /* ---- Font weights (NEW) ----------------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Line heights (NEW) ----------------------------------------- */
  --lh-tight:   1.2;   /* headings, KPI values  */
  --lh-snug:    1.35;  /* compact UI            */
  --lh-normal:  1.5;   /* body                  */
  --lh-relaxed: 1.65;  /* long-form help copy   */

  /* ---- Radius ----------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-pill: 999px;

  /* ---- Motion ----------------------------------------------------
   * Durations sit in the calm 120-320ms band; the default easing is a
   * gentle easeOutQuart so panels settle rather than snap. The
   * `--motion-ease-out` name is preserved (its value is upgraded from
   * the previous sharper expo curve); the two easing aliases are new.
   */
  --motion-fast: 120ms;
  --motion-med:  200ms;
  --motion-slow: 320ms;
  --motion-ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1);  /* NEW */
  --motion-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);  /* NEW */

  /* ---- Brand-mark gradient + hero surfaces (light) ---------------- */
  --brand-grad-from: #2a5fd6;
  --brand-grad-to:   #7c3aed;
  --hero-surface:    #ffffff;
  --hero-ink:        #0b1220;
  --hero-soft-ring:  rgba(42, 95, 214, 0.16);
}

/* Reduced motion: collapse the duration tokens to 0 so token-driven
 * transitions become instant while keeping structural layout intact.
 * The `.bf-motion-*` utility classes have their own no-op guard in
 * _widgets/motion.css (BUG-F0-86 acceptance #4). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-med:  0ms;
    --motion-slow: 0ms;
  }
}

/* ================================================================ */
/* Brand surfaces (consumed by login, splash, marketing-style pages) */
/* ================================================================ */

.brand-surface {
  background: var(--hero-surface);
  color: var(--hero-ink);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-3);
  padding: var(--sp-q8) var(--sp-q8);
  border: 1px solid var(--border-light);
}

.brand-eyebrow {
  font-size: var(--bt-step--1);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.brand-title {
  font-size: var(--bt-step-6);
  letter-spacing: -0.025em;
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  margin: 0;
}
.brand-subtitle {
  font-size: var(--bt-step-1);
  color: var(--fg-muted);
  margin: var(--sp-q2) 0 0 0;
  font-weight: var(--fw-regular);
}

/* The inline logo SVG mounts inside any element with .bf-logo */
.bf-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-q2);
  vertical-align: middle;
}
.bf-logo-mark {
  display: inline-block;
  width: 32px;
  height: 32px;
}
.bf-logo-mark-sm { width: 24px; height: 24px; }
.bf-logo-mark-lg { width: 56px; height: 56px; }
.bf-logo-mark-hero { width: 88px; height: 88px; }
.bf-logo-text {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}
.bf-logo-text-suffix {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  margin-left: var(--sp-q1);
}

/* ---------------------------------------------------------------- */
/* Empty state with illustration (consumed by bf.emptyState)        */
/* ---------------------------------------------------------------- */

.bf-empty-state-rich {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-q12) var(--sp-q6);
  background: var(--bg-surface);
  border: 1px dashed var(--border-medium);
  border-radius: var(--r-xl);
  color: var(--fg-muted);
}
.bf-empty-state-illustration {
  width: 200px;
  height: 140px;
  margin-bottom: var(--sp-q5);
  color: var(--brand);
}
.bf-empty-state-rich-title {
  font-size: var(--bt-step-2);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  margin-bottom: var(--sp-q2);
}
.bf-empty-state-rich-body {
  font-size: var(--fs-13);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-q5);
  max-width: 420px;
  line-height: var(--lh-normal);
}
.bf-empty-state-rich-actions {
  display: inline-flex;
  gap: var(--sp-q2);
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------------------------------------------------------------- */
/* Splash                                                            */
/* ---------------------------------------------------------------- */

.bf-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-q6);
  background: var(--bg-page);
  z-index: 99999;
  animation: bf-splash-in 280ms var(--motion-ease-out);
}
.bf-splash[data-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--motion-ease-out);
}
.bf-splash-mark {
  width: 96px;
  height: 96px;
}
.bf-splash-tagline {
  font-size: var(--bt-step-1);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.bf-splash-progress {
  width: 160px;
  height: 3px;
  background: var(--bg-sunken);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.bf-splash-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-grad-from), var(--brand-grad-to));
  transform: translateX(-100%);
  animation: bf-splash-bar 1200ms var(--motion-ease-out) infinite;
}
@keyframes bf-splash-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bf-splash-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .bf-splash { animation: none; }
  .bf-splash-progress::after { animation: none; }
}