/* ============================================================
   Recycler.IQ — Design Tokens (tokens.css — design-system V2)
   ============================================================
   RCLIENT-385: renamed from colors_and_type.css to match the
   recycleriq-design-v2 kit canonical filename. Single source of
   truth for design tokens — standalone. Flattens the Lewers Logic
   parent spine + Recycler.IQ child overrides into one --riq-prefixed
   file so consuming repos can copy this one stylesheet with no
   parent import. Now also carries the V2 chart palettes (Section I:
   --riq-chart-* series + --riq-denom-* denomination).

   Brand sheet v2 (May 2026, artist-confirmed):
   - Type: Poppins (display) + Inter (body). IBM Plex Mono retained
     for numeric / ledger columns.
   - Green: brand-green #2DB24A (logo-derived) replaces the old
     money green #2F8F4F. --riq-money-green is now an alias.
   - Brand Blue: #184096 — third hue, marketing / gradient only.
   - Gradient: #2DB24A → #184096 (logo green → brand blue).
   - Layered light surfaces (Variant D): sunken page → mid card →
     bright input wells.

   All tokens use the --riq- prefix. The plugin does NOT ship
   --ll-* parent tokens; parent spine values are resolved to
   literal hexes below. Dark mode lives under [data-theme="dark"].
   ============================================================ */

/* RCLIENT-279 / RCLIENT-352 — fonts bundled locally (no Google CDN dependency).
   Latin subset only. The plugin source uses an @import to Google Fonts; we
   substitute local @font-face blocks so the demo terminal runs without internet
   AND so the branded loader / splash render Poppins from a local face on first
   paint instead of a network round-trip.
   v3.2.0 swap: Montserrat → Poppins (display), IBM Plex Sans → Inter (body).
   IBM Plex Mono retained for numerics. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}
/* Inter ships as a single variable woff2 covering the full weight axis. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

:root {
  /* ===== Brand spine (inherited from Lewers Logic, resolved) ===== */
  --riq-deep-navy:    #0B1F33;  /* primary dark — chrome, headlines, app bar */
  --riq-slate-gray:   #5A6B78;  /* supporting neutral */
  --riq-soft-white:   #F4F7F9;  /* on-dark text / spine page tint */
  --riq-light-teal:   #6FE3DB;  /* supporting accent, chart tertiary */

  /* ===== Recycler.IQ product accent — Teal ===== */
  /* The operator-console voice — buttons, links, active states.
     #1FA89C is intentionally deeper than the corporate teal
     (#2EC4B6) for dense data UI legibility. */
  --riq-teal:         #1FA89C;  /* product accent — buttons, links, active */
  --riq-teal-hover:   #178D83;  /* hover / pressed */
  --riq-teal-50:      #E7F7F5;  /* sunken / hover-bg tint */
  --riq-teal-100:     #C8ECE7;  /* selected-row tint */
  --riq-teal-200:     #92D9D0;  /* light accent */
  --riq-teal-light:   #6FE3DB;  /* = light-teal */
  --riq-teal-brand:   #2EC4B6;  /* brand-sheet teal — marketing / lockups */

  /* ===== Brand Green — logo-derived, replaces money green ===== */
  /* Brand sheet v2 standardized on #2DB24A — the green endpoint of
     the Recycler.IQ logo gradient. Used for money-in-motion:
     positive deltas, deposits, cash-collected KPIs, reconciliation
     OK. Doubles as semantic success — the system speaks one green. */
  --riq-green:        #2DB24A;  /* brand green — primary money/positive */
  --riq-green-hover:  #259B40;  /* hover / pressed */
  --riq-green-50:     #E8F6EB;  /* tint — sunken surfaces */
  --riq-green-100:    #C5E8CC;  /* tint — selected rows */
  --riq-green-200:    #8FD49E;  /* light accents */

  /* Legacy alias — old code referenced --riq-money-green. Keep it
     resolving to the new brand green so nothing breaks. */
  --riq-money-green:       var(--riq-green);
  --riq-money-green-hover: var(--riq-green-hover);
  --riq-money-green-50:    var(--riq-green-50);
  --riq-money-green-100:   var(--riq-green-100);
  --riq-money-green-200:   var(--riq-green-200);

  /* ===== Brand Blue — third hue (brand sheet v2) ===== */
  /* Artist-confirmed #184096 (May 2026). Brand / marketing accent
     and the gradient ENDPOINT (green → blue). NOT an in-product
     semantic color — info still uses teal in product UI. */
  --riq-blue:         #184096;  /* artist-confirmed brand blue */
  --riq-blue-hover:   #143985;
  --riq-blue-50:      #E8EDF6;
  --riq-blue-100:     #C2CFE8;
  --riq-blue-200:     #8FA6D2;
  --riq-logo-blue:        #184096;  /* sampled from the wordmark gradient */
  --riq-logo-blue-hover:  #143985;

  /* ===== Brand gradients ===== */
  /* --riq-gradient-logo : type / mark strokes that echo the logo
        (the .IQ glyph, the "Intelligence" accent).
     --riq-gradient-brand: hero blocks / splash / marketing surfaces.
     Per brand sheet v2 both run green → brand blue. NEVER apply a
     gradient to an operator-UI surface — flat only. */
  --riq-gradient-logo:       linear-gradient(90deg, #2DB24A 0%, #184096 100%);
  --riq-gradient-logo-diag:  linear-gradient(135deg, #2DB24A 0%, #184096 100%);
  --riq-gradient-brand:      linear-gradient(90deg, #2DB24A 0%, #184096 100%);
  --riq-gradient-brand-diag: linear-gradient(135deg, #2DB24A 0%, #184096 100%);

  /* ===== Neutrals — derived from Deep Navy / Slate Gray ===== */
  --riq-fg-1:         #0B1F33;  /* primary text — Deep Navy */
  --riq-fg-2:         #2A3B4A;  /* body — navy/slate blend */
  --riq-fg-3:         #5A6B78;  /* secondary — Slate Gray */
  --riq-fg-4:         #8A99A6;  /* tertiary / muted */
  --riq-fg-disabled:  #C1CAD2;

  /* ===== Light-mode surfaces — Variant D (layered) =====
     Adopted May 2026 after Cash Collection screenshot review.
     Three distinct surface levels: sunken page → mid card →
     bright input wells, instead of a near-pure-white plane. */
  --riq-bg-app:       #DCE6EC;  /* sunken page */
  --riq-bg-card:      #F3F7FA;  /* mid card surface */
  --riq-bg-elevated:  #FFFFFF;  /* input wells / brightest surface */
  --riq-bg-sunken:    #C8D5DD;  /* group / sidebar / deeper sunken */
  --riq-bg-hover:     #C5D2DC;  /* between sunken and mid */
  --riq-border-1:     #BFCDD7;  /* hairline, retuned for D's bluer ground */
  --riq-border-2:     #C5D0D8;
  --riq-border-strong:#8A99A6;

  /* Card-top accent strip — primary cards get a 3px brand-gradient
     bar at the top for depth without raising saturation. Apply via
     a ::before with this gradient + height. */
  --riq-card-accent:        linear-gradient(90deg, #2DB24A 0%, #184096 100%);
  --riq-card-accent-height: 3px;

  /* ===== Backwards-compat aliases =====
     BREAKING in v3.0.0: the v1.x/v2.0 --riq-blue-* ramp WAS a teal
     ramp. It has been renamed to --riq-teal-ramp-* (below) so the
     --riq-blue-* names are now free for the new brand blue (above).
     If v1.x/v2.0 CSS referenced --riq-blue-500 expecting teal,
     migrate it to --riq-teal-ramp-500 (or the canonical --riq-teal). */
  --riq-medium-blue:   var(--riq-teal);
  --riq-teal-ramp-50:  var(--riq-teal-50);
  --riq-teal-ramp-100: var(--riq-teal-100);
  --riq-teal-ramp-200: var(--riq-teal-200);
  --riq-teal-ramp-300: var(--riq-teal-light);
  --riq-teal-ramp-400: var(--riq-light-teal);
  --riq-teal-ramp-500: var(--riq-teal);
  --riq-teal-ramp-600: var(--riq-teal-hover);
  --riq-teal-ramp-700: var(--riq-deep-navy);
  --riq-dark-blue:    var(--riq-deep-navy);
  --riq-light-blue:   var(--riq-light-teal);
  --riq-pale-blue:    var(--riq-teal-100);

  /* ===== Semantic ===== */
  --riq-success:      var(--riq-green);  /* unified with brand green */
  --riq-warning:      #C28A0E;
  --riq-danger:       #C03A3A;
  --riq-info:         var(--riq-teal);

  /* ===== Component chrome (RCLIENT-413) — operator-shell surfaces =====
     Screen-role aliases the Cash Collection operator shell (app bar, nav
     drawer, status bar, work-zone panel + nested card) consumes so chrome
     surfaces resolve from one place. Light values here; dark overrides in
     the [data-theme="dark"] block. Mirrors the design handoff's "proposed
     DS additions" note in Cash Collection Operator Screen.html. */
  --riq-appbar-bg:     var(--riq-deep-navy);    /* app bar — navy in BOTH themes (brand chrome) */
  --riq-drawer-bg:     #FFFFFF;                 /* nav drawer surface */
  --riq-statusbar-bg:  var(--riq-deep-navy);    /* status bar — always dark */
  --riq-surface-panel: var(--riq-bg-card);      /* work-zone panel */
  --riq-surface-card:  var(--riq-bg-elevated);  /* nested cards / input wells */
  --riq-teal-fg:       #FFFFFF;                 /* text / icon on a teal fill */
  --riq-danger-50:     rgba(192,58,58,0.10);    /* danger tint background */

  /* ===== Chart palettes (RCLIENT-385 — design V2 kit tokens.css Section I) =====
     Two schemas; pick by what color ENCODES.
     I-a SERIES — color = the METRIC. Green leads, teal supports, slate compares.
         Default for ordinary 1–3 series charts. Mirrors RiqTheme.BarChartOptions. */
  --riq-chart-1: #2DB24A;  /* primary metric   — Brand Green */
  --riq-chart-2: #1FA89C;  /* secondary metric — Product Teal */
  --riq-chart-3: #5A6B78;  /* comparison/prior — Slate */
  --riq-chart-4: #0B1F33;  /* totals/accents   — Deep Navy */
  --riq-chart-5: #6FE3DB;  /* tertiary         — Light Teal */
  --riq-chart-6: #C28A0E;  /* warning/flagged  — Amber */

  /* I-b DENOMINATION — color = the BILL VALUE, fixed $1→$100 across every chart.
     Mirrors RiqTheme.DenominationColor. */
  --riq-denom-1:   #5A6B78;  /* $1   — Slate */
  --riq-denom-5:   #6FE3DB;  /* $5   — Light Teal */
  --riq-denom-10:  #1FA89C;  /* $10  — Product Teal */
  --riq-denom-20:  #0B1F33;  /* $20  — Deep Navy */
  --riq-denom-50:  #2DB24A;  /* $50  — Brand Green */
  --riq-denom-100: #C28A0E;  /* $100 — Warning Amber */

  /* ===== Typography — brand sheet v2 ===== */
  /* Poppins (display) + Inter (body). IBM Plex Mono retained for
     numeric columns / ledger rows — operator muscle memory. */
  --font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter",   system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Weight mapping per brand sheet:
       Headlines (display/h1/h2) → Poppins SemiBold (600)
       Subheads  (h3/h4)         → Poppins Medium  (500)
       Body                      → Inter Regular   (400) */
  --riq-weight-headline: 600;
  --riq-weight-subhead:  500;
  --riq-weight-body:     400;

  --fs-display:   56px;
  --fs-h1:        40px;
  --fs-h2:        32px;
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-h5:        16px;
  --fs-body-lg:   17px;
  --fs-body:      15px;
  --fs-body-sm:   13px;
  --fs-caption:   12px;
  --fs-overline:  11px;

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-normal:    1.45;
  --lh-relaxed:   1.6;

  --tracking-overline: 0.14em;
  --tracking-tight:    -0.01em;

  /* ===== Spacing (4px base) ===== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ===== Radius ===== */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ===== Elevation — navy-tinted ===== */
  --shadow-1: 0 1px 2px rgba(11, 31, 51, 0.06), 0 1px 1px rgba(11, 31, 51, 0.04);
  --shadow-2: 0 2px 6px rgba(11, 31, 51, 0.08), 0 1px 2px rgba(11, 31, 51, 0.05);
  --shadow-3: 0 6px 16px rgba(11, 31, 51, 0.12), 0 2px 4px rgba(11, 31, 51, 0.06);
  --shadow-4: 0 16px 40px rgba(11, 31, 51, 0.18), 0 4px 8px rgba(11, 31, 51, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --focus-ring: 0 0 0 3px rgba(31, 168, 156, 0.35);

  /* ===== Motion ===== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel:    cubic-bezier(0, 0, 0.2, 1);
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ============================================================
   Dark mode — only neutrals invert. Brand accents keep their
   name with a small lightness bump for AA contrast on dark navy.
   Teal tints are pushed toward navy (away from green) so the
   system never reads as "dark green". Brand green is reserved
   for KPIs / numeric deltas only — never a hover/selected
   surface. Toggle by setting `data-theme="dark"` on <html>.
   ============================================================ */
[data-theme="dark"] {
  --riq-fg-1:         #F4F7F9;  /* primary text — Soft White */
  --riq-fg-2:         #D7E0E8;
  --riq-fg-3:         #A8B5C0;  /* secondary */
  --riq-fg-4:         #6F8090;  /* tertiary / muted */
  --riq-fg-disabled:  #3D4E5C;

  --riq-bg-app:       #07172A;  /* deeper than spine navy */
  --riq-bg-card:      #142A3D;  /* surface (lifts from app) */
  --riq-bg-elevated:  #1B344A;  /* input wells / brightest */
  --riq-bg-sunken:    #0B1F33;  /* group bg = spine navy */
  --riq-bg-hover:     #1B344A;
  --riq-border-1:     #1F3950;  /* hairlines */
  --riq-border-2:     #2E4862;
  --riq-border-strong:#506B85;

  --riq-teal:         #3FD0BF;
  --riq-teal-hover:   #5DDDCE;
  --riq-teal-50:      #18324A;  /* navy-leaning hover bg */
  --riq-teal-100:     #1F3F58;  /* navy-leaning selected rows */
  --riq-teal-200:     #2E6C63;

  --riq-green:        #4FCB6B;  /* KPI / numeric deltas only in dark mode */
  --riq-green-hover:  #6BD884;
  --riq-green-50:     #122A18;
  --riq-green-100:    #1D4128;
  --riq-green-200:    #2F6B44;

  --riq-blue:         #5C82E0;
  --riq-blue-hover:   #7A9AE8;
  --riq-blue-50:      #15203A;
  --riq-blue-100:     #1F3060;
  --riq-blue-200:     #324E92;

  --riq-success: var(--riq-green);
  --riq-warning: #E0A535;
  --riq-danger:  #D85A5A;
  --riq-info:    var(--riq-teal);

  /* Component chrome (RCLIENT-413) — dark overrides. --riq-appbar-bg stays
     Deep Navy (constant), so it carries over from :root with no re-declare. */
  --riq-drawer-bg:     var(--riq-bg-sunken);    /* #0B1F33 */
  --riq-statusbar-bg:  #030E1B;                 /* deeper than spine navy */
  --riq-surface-panel: var(--riq-bg-sunken);    /* #0B1F33 */
  --riq-surface-card:  var(--riq-bg-card);      /* #142A3D */
  --riq-teal-fg:       #04111E;                 /* dark ink on a teal fill */
  --riq-danger-50:     rgba(216,90,90,0.14);

  /* Chart palettes — dark swaps (green/teal brighten, navy → soft white so it
     doesn't vanish on the dark app bg, slate lifts for contrast, amber warms). */
  --riq-chart-1: #4FCB6B;
  --riq-chart-2: #3FD0BF;
  --riq-chart-3: #A8B5C0;
  --riq-chart-4: #E2E8F0;
  --riq-chart-5: #6FE3DB;
  --riq-chart-6: #E0A535;
  --riq-denom-1:   #A8B5C0;
  --riq-denom-5:   #6FE3DB;
  --riq-denom-10:  #3FD0BF;
  --riq-denom-20:  #E2E8F0;
  --riq-denom-50:  #4FCB6B;
  --riq-denom-100: #E0A535;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 6px 16px rgba(0, 0, 0, 0.55);
  --shadow-4: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --focus-ring: 0 0 0 3px rgba(63, 208, 191, 0.4);
}

/* ============================================================
   Product type classes — .riq-*
   ────────────────────────────────────────────────────────────
   Resolve to Poppins (display) + Inter (body) via the --font-*
   tokens. Weight mapping per brand sheet v2:
     Headlines (display/h1/h2) → Poppins SemiBold (600)
     Subheads  (h3/h4)         → Poppins Medium  (500)
     Body                      → Inter Regular   (400)
   IBM Plex Mono is retained for .riq-mono — numeric columns.
   ============================================================ */
.riq-display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--riq-fg-1); }
.riq-h1      { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1);      line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--riq-fg-1); }
.riq-h2      { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2);      line-height: var(--lh-snug);   color: var(--riq-fg-1); }
.riq-h3      { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3);      line-height: var(--lh-snug);   color: var(--riq-fg-1); }
.riq-h4      { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4);      line-height: var(--lh-snug);   color: var(--riq-fg-1); }
.riq-h5      { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h5);      line-height: var(--lh-normal); color: var(--riq-fg-1); }
.riq-body    { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-body);    line-height: var(--lh-normal); color: var(--riq-fg-2); }
.riq-body-lg { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--riq-fg-2); }
.riq-body-sm { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--riq-fg-3); }
.riq-caption { font-family: var(--font-body);    font-weight: 500; font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--riq-fg-3); }
.riq-overline{ font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-overline); line-height: var(--lh-normal); text-transform: uppercase; letter-spacing: var(--tracking-overline); color: var(--riq-fg-3); }
.riq-mono    { font-family: var(--font-mono);    font-size: var(--fs-body-sm); color: var(--riq-fg-2); }

/* ============================================================
   Product wordmark — Recycler.IQ (brand sheet v2)
   ────────────────────────────────────────────────────────────
   "Recycler"  — Poppins SemiBold (600), Deep Navy
   ".IQ"       — Poppins SemiBold (600), brand gradient (green → blue)
   Tagline: "WHERE HARDWARE MEETS INTELLIGENCE"
     WHERE / MEETS / INTELLIGENCE — overline tracking, body color
     HARDWARE                     — brand gradient (same endpoints)
   ============================================================ */
.riq-wordmark          { font-family: var(--font-display); font-weight: 600; color: var(--riq-fg-1); letter-spacing: -0.01em; }
.riq-wordmark-recycler { color: var(--riq-deep-navy); }
/* Brand gradient on the .IQ glyphs via background-clip:text.
   Direction is VERTICAL (top → bottom) on the wordmark, matching
   the artist's brand sheet. */
.riq-wordmark-iq {
  background: linear-gradient(180deg, #2DB24A 0%, #184096 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.riq-tagline { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--tracking-overline); color: var(--riq-fg-1); }
/* Brand gradient on HARDWARE only — flows HORIZONTAL (left → right).
   INTELLIGENCE stays body color per the brand sheet. The
   .riq-tagline-accent alias is kept for backwards-compat. */
.riq-tagline-hardware {
  background: linear-gradient(90deg, #2DB24A 0%, #184096 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.riq-tagline-intelligence,
.riq-tagline-accent { color: inherit; }