/* RecoGood Design System v1 — "Quiet Precision" — WAVE 0 FOUNDATION.
 * The LOCKED token contract (docs/design/DESIGN_SYSTEM.md §2/§3/§5) + the shared component classes
 * (§4). WHITE-FIRST: light is the default :root; dark is the [data-theme="dark"] variation (which the
 * base.html no-flash script already sets).
 *
 * ISOLATION: the doc's token VALUES are carried on `--ds-*` names — deliberately DISJOINT from the
 * legacy `--rg-*` set that velzon/recogood-theme.css already owns (--rg-text/--rg-font-body/... ) — and
 * the component classes are `.rg-*` names that do NOT collide with the only existing `.rg-*` classes
 * (`.rg-money`, `.rg-tnum`). So Wave 0 collides with NOTHING and is INVISIBLE to existing pages until a
 * page family adopts `var(--ds-*)` + the `.rg-*` classes in waves 1-N. Self-hosted fonts only (no CDN);
 * url() paths are relative to THIS file (static/css/) -> ../fonts/. */

/* ---- Self-hosted fonts (latin subsets, variable — one file, weights 400-600). Registered under PRIVATE
 *      aliases ("RG Inter" / "RG Schibsted Grotesk") so the global @font-face can NEVER be picked up by an
 *      existing font stack (e.g. Driver.js's tour popover lists "Inter") — the isolation contract holds
 *      even at the font layer. The faces ARE Inter / Schibsted Grotesk; only the CSS family name is
 *      namespaced. Geist / Geist Mono are declared in base.html; Geist Mono is the numeric face (§1). */
@font-face { font-family: "RG Inter"; font-weight: 400 600; font-style: normal; font-display: swap;
  src: url("../fonts/inter.260c81a4759b.woff2") format("woff2"); }
@font-face { font-family: "RG Schibsted Grotesk"; font-weight: 400 600; font-style: normal; font-display: swap;
  src: url("../fonts/schibsted-grotesk.ba4038fc5cb5.woff2") format("woff2"); }

/* ---- §2 Color & Surface (theme-paired by construction). LIGHT = default. ---- */
:root {
  --ds-bg: #FAFAF9;                          /* page — warm off-white */
  --ds-surface-1: rgba(17,17,16,0.025);      /* cards */
  --ds-surface-2: rgba(17,17,16,0.055);      /* nested / hover */
  --ds-border: rgba(17,17,16,0.08);
  --ds-text: #1A1A18;  --ds-text-2: #6B6B66;  --ds-text-3: #9C9C96;
  --ds-accent: #1D4ED8;  --ds-accent-wash: rgba(29,78,216,0.08);
  --ds-accent-fg: #ffffff;   /* contrast-paired foreground for a filled accent surface: 6.70:1 on #1D4ED8 */
  --ds-pos: #067647;  --ds-pos-wash: rgba(6,118,71,0.10);
  --ds-neg: #B42318;  --ds-neg-wash: rgba(180,35,24,0.10);

  /* §3 Shape / depth */
  --ds-radius-input: 8px;                    /* inputs / chips / buttons */
  --ds-radius-card: 12px;                    /* cards / panels */
  --ds-radius-pill: 999px;                   /* pills / badges */
  --ds-overlay-shadow: 0 8px 24px rgba(0,0,0,0.12);  /* overlays ONLY (menus/modals/toasts) */

  /* §1 Type families (private aliases -> the real faces). Numbers = Geist Mono (LOCKED contract §1). */
  --ds-font-display: "RG Schibsted Grotesk", "RG Inter", system-ui, sans-serif;
  --ds-font-body: "RG Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-num: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  /* §5 Motion — "chrome moves, numbers sit still" */
  --ds-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-fast: 150ms;  --ds-base: 200ms;
}
[data-theme="dark"] {
  --ds-bg: #101012;
  --ds-surface-1: rgba(255,255,255,0.045);
  --ds-surface-2: rgba(255,255,255,0.08);
  --ds-border: rgba(255,255,255,0.09);
  --ds-text: #EDEDEA;  --ds-text-2: #A3A39D;  --ds-text-3: #6E6E68;
  --ds-accent: #6D9CFF;  --ds-accent-wash: rgba(109,156,255,0.10);
  /* The dark accent is LIGHT, so white text on it is 2.68:1 — a WCAG AA FAILURE. Dark ink is
     7.10:1. (--ds-text #EDEDEA would be 2.28:1, so the body text colour is not the answer.) */
  --ds-accent-fg: #101012;
  --ds-pos: #3DC98B;  --ds-pos-wash: rgba(61,201,139,0.12);
  --ds-neg: #F97066;  --ds-neg-wash: rgba(249,112,102,0.12);
}

/* ---- §1 Universal numeric class — tabular Geist Mono. The single change that reads "financial instrument". */
.rg-num { font-family: var(--ds-font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---- §4 Eyebrow / kicker — mono uppercase kicker above a heading (§1: Geist Mono). */
.rg-eyebrow {
  font-family: var(--ds-font-num); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-3);
}

/* ---- §4 Buttons — exactly three weights (36px standard / 30px compact). No gradients, no size zoo. */
.rg-btn {
  font-family: var(--ds-font-body); font-size: 13px; font-weight: 600; line-height: 1;
  border-radius: var(--ds-radius-input); padding: 9px 17px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}
.rg-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.rg-btn-compact { height: 30px; padding: 6px 13px; font-size: 12.5px; }
.rg-btn-primary { background: var(--ds-accent); color: var(--ds-accent-fg); }  /* one per view */
.rg-btn-primary:hover { filter: brightness(0.94); }
.rg-btn-secondary { background: var(--ds-surface-1); border-color: var(--ds-border); color: var(--ds-text); }
.rg-btn-secondary:hover { background: var(--ds-surface-2); }
.rg-btn-ghost { background: transparent; color: var(--ds-text-2); }
.rg-btn-ghost:hover { background: var(--ds-surface-1); color: var(--ds-text); }
.rg-btn-danger { background: var(--ds-surface-1); border-color: var(--ds-border); color: var(--ds-neg); }  /* destructive = secondary shape in --neg */
.rg-btn-danger:hover { background: var(--ds-neg-wash); }

/* ---- §2/§4 Money delta chips — value semantics, wash fill, never loud filled cells. */
.rg-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ds-font-num); font-size: 10.5px; font-weight: 600;
  border-radius: var(--ds-radius-pill); padding: 3px 9px; white-space: nowrap;
}
.rg-chip-pos { color: var(--ds-pos); background: var(--ds-pos-wash); }
.rg-chip-neg { color: var(--ds-neg); background: var(--ds-neg-wash); }
.rg-chip-neutral { color: var(--ds-text-2); background: var(--ds-surface-2); }

/* ---- §6 Confidence / grade badges — mono uppercase chip with wash, a first-class citizen. */
.rg-badge {
  font-family: var(--ds-font-num); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: var(--ds-radius-pill); padding: 3px 9px; white-space: nowrap;
}
.rg-badge-claim { color: var(--ds-accent); background: var(--ds-accent-wash); }       /* claim-grade */
.rg-badge-advisory { color: var(--ds-text-2); background: var(--ds-surface-2); }      /* advisory */
.rg-badge-review { color: var(--ds-neg); background: var(--ds-neg-wash); }            /* operator-review */

/* ---- §4 Status pill — dot + label (a calm connection/health affordance). */
.rg-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ds-font-body); font-size: 11.5px; font-weight: 600;
  border-radius: var(--ds-radius-pill); padding: 3.5px 10px;
  background: var(--ds-surface-1); color: var(--ds-text-2);
}
.rg-status .rg-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ds-text-3); }
.rg-status-ok .rg-dot { background: var(--ds-pos); }
.rg-status-warn .rg-dot { background: var(--ds-neg); }

/* ---- §4 Pill switcher — 999px track + ONE sliding indicator moved by transform (JS in the partial). */
.rg-pill-track {
  position: relative; display: inline-flex; background: var(--ds-surface-1);
  border-radius: var(--ds-radius-pill); padding: 3.5px;
}
.rg-pill-item {
  position: relative; z-index: 1; border: none; background: none; cursor: pointer;
  font-family: var(--ds-font-body); font-size: 12.5px; font-weight: 600; color: var(--ds-text-2);
  padding: 7px 17px; border-radius: var(--ds-radius-pill);
  transition: color var(--ds-base) var(--ds-ease);
}
.rg-pill-item[aria-selected="true"] { color: #fff; }
[data-theme="dark"] .rg-pill-item[aria-selected="true"] { color: var(--ds-text); }
.rg-pill-slider {
  position: absolute; top: 3.5px; bottom: 3.5px; left: 0; width: 0;
  border-radius: var(--ds-radius-pill); background: var(--ds-text); z-index: 0;
  transition: transform var(--ds-base) var(--ds-ease), width var(--ds-base) var(--ds-ease);
}
[data-theme="dark"] .rg-pill-slider { background: var(--ds-surface-2); border: 1px solid var(--ds-border); }

/* ---- §4 Collapsible chevron — rotates 200ms, never a text glyph. */
.rg-chevron { display: inline-block; transition: transform var(--ds-base) var(--ds-ease); flex: none; }
[aria-expanded="true"] > .rg-chevron,
details[open] > summary .rg-chevron { transform: rotate(90deg); }

/* ---- §4 Empty state — ONE pattern app-wide (markup in shell/_rg_empty.html). */
.rg-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 24px; }
.rg-empty-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--ds-surface-2);
  display: grid; place-items: center; color: var(--ds-text-3); margin-bottom: 4px;
}
.rg-empty-title { font-family: var(--ds-font-display); font-size: 15px; font-weight: 500; color: var(--ds-text); letter-spacing: -0.01em; }
.rg-empty-body { font-family: var(--ds-font-body); font-size: 13px; color: var(--ds-text-2); max-width: 42ch; }

/* ---- §Loading — skeleton shimmer for tables/tiles on slow loads. A --surface-1 block with a
 *      --surface-2 highlight sweeping left→right (DESIGN_SYSTEM §Loading: "skeleton shimmer
 *      (--surface-1→2)"). The successor placeholder to a blank container while client-rendered content
 *      (charts, gridjs, async tiles) is still loading; the shipped _loading_overlay.html covers the
 *      whole-page nav/submit case. Markup helper: shell/_rg_skeleton.html. */
.rg-skeleton {
  position: relative; overflow: hidden; background: var(--ds-surface-1);
  border-radius: var(--ds-radius-input);
}
.rg-skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--ds-surface-2), transparent);
  animation: rg-shimmer 1.4s var(--ds-ease) infinite;
}
.rg-skeleton-text { height: 12px; margin: 7px 0; }        /* a text/row line */
.rg-skeleton-tile { height: 72px; border-radius: var(--ds-radius-card); }  /* a KPI tile / card */
@keyframes rg-shimmer { 100% { transform: translateX(100%); } }

/* ---- Reduced motion — numbers never move; chrome respects the user. */
@media (prefers-reduced-motion: reduce) {
  .rg-btn, .rg-pill-item, .rg-pill-slider, .rg-chevron { transition-duration: 0.01ms; }
  .rg-skeleton::after { animation: none; }
}