/* ============================================================
   Recycler.IQ — Design Tokens (self-contained)
   ============================================================
   Single source of truth for the Recycler.IQ product UI. This
   file is flat: no parent-system import, no external variable
   prefixes. Every value the prototypes use is defined here.

   Type:  Poppins (display) + Inter (body/UI) + IBM Plex Mono
          (numeric columns / ledger rows).
   Color: product teal #1FA89C, brand green #2DB24A, brand blue
          #184096, brand navy #0B1F33.
   Charts: series palette (metric-keyed) + denomination palette
          (\$-value-keyed, same color for a denomination on every
          chart of a page).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ---- 1. Brand palette ---------------------------------- */
  --riq-deep-navy:   #0B1F33;  /* app bar / brand floor */
  --riq-slate:       #5A6B78;
  --riq-soft-white:  #F4F7F9;  /* never pure #FFF */
  --riq-light-teal:  #6FE3DB;
  --riq-teal-brand:  #2EC4B6;  /* marketing-voice teal */

  /* ---- 2. Typography ------------------------------------- */
  --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;

  --riq-weight-headline: 600;  /* @kind font */
  --riq-weight-subhead:  500;  /* @kind font */
  --riq-weight-body:     400;  /* @kind font */

  --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;   /* @kind font */
  --lh-snug:      1.25;  /* @kind font */
  --lh-normal:    1.45;  /* @kind font */
  --lh-relaxed:   1.6;   /* @kind font */

  --tracking-overline: 0.14em;  /* @kind font */
  --tracking-tight:    -0.01em; /* @kind font */

  /* ---- 3. 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;

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

  /* ---- 5. Elevation (navy-tinted, never pure black) ------ */
  --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);

  /* ---- 6. Motion ----------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-decel:    cubic-bezier(0, 0, 0.2, 1);   /* @kind other */
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1);   /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ---- 7. Product accent — Recycler.IQ teal -------------- */
  --riq-teal:         #1FA89C;  /* operator-console voice */
  --riq-teal-hover:   #178D83;
  --riq-teal-50:      #E7F7F5;
  --riq-teal-100:     #C8ECE7;
  --riq-teal-200:     #92D9D0;
  --riq-teal-light:   #6FE3DB;

  /* ---- 8. Brand green — money in motion ------------------ */
  --riq-green:             #2DB24A;
  --riq-green-hover:       #259B40;
  --riq-green-50:          #E8F6EB;
  --riq-green-100:         #C5E8CC;
  --riq-green-200:         #8FD49E;
  --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);

  /* ---- 9. Brand blue (gradient endpoint) ----------------- */
  --riq-blue:        #184096;
  --riq-blue-hover:  #143985;
  --riq-blue-50:     #E8EDF6;
  --riq-blue-100:    #C2CFE8;
  --riq-blue-200:    #8FA6D2;
  --riq-logo-blue:       #184096;
  --riq-logo-blue-hover: #143985;

  /* ---- 10. Brand gradients ------------------------------- */
  --riq-gradient-logo:       linear-gradient(90deg, #2DB24A 0%, #184096 100%);  /* @kind color */
  --riq-gradient-logo-diag:  linear-gradient(135deg, #2DB24A 0%, #184096 100%); /* @kind color */
  --riq-gradient-brand:      linear-gradient(90deg, #2DB24A 0%, #184096 100%);  /* @kind color */
  --riq-gradient-brand-diag: linear-gradient(135deg, #2DB24A 0%, #184096 100%); /* @kind color */
  --riq-card-accent:        linear-gradient(90deg, #2DB24A 0%, #184096 100%);   /* @kind color */
  --riq-card-accent-height: 3px;

  /* ---- 11. Neutrals — layered surfaces (light) ----------- */
  --riq-fg-1:         #0B1F33;
  --riq-fg-2:         #2A3B4A;
  --riq-fg-3:         #5A6B78;
  --riq-fg-4:         #8A99A6;
  --riq-fg-disabled:  #C1CAD2;

  --riq-bg-app:       #DCE6EC;  /* sunken page */
  --riq-bg-card:      #F3F7FA;  /* mid card surface */
  --riq-bg-elevated:  #FFFFFF;  /* input wells / brightest */
  --riq-bg-sunken:    #C8D5DD;  /* group / sidebar */
  --riq-bg-hover:     #C5D2DC;

  --riq-border-1:     #BFCDD7;  /* hairline */
  --riq-border-2:     #C5D0D8;
  --riq-border-strong:#8A99A6;

  /* ---- 12. Chart series palette (metric-keyed) ----------- */
  --riq-chart-1: #2DB24A;  /* primary metric   */
  --riq-chart-2: #1FA89C;  /* secondary metric */
  --riq-chart-3: #5A6B78;  /* comparison/prior */
  --riq-chart-4: #0B1F33;  /* totals/accents   */
  --riq-chart-5: #6FE3DB;  /* tertiary         */
  --riq-chart-6: #C28A0E;  /* warning/flagged  */

  /* ---- 13. Denomination palette (value-keyed, "Money emphasis") ---- */
  --riq-denom-1:   #8A99A6;
  --riq-denom-5:   #C8ECE7;
  --riq-denom-10:  #6FE3DB;
  --riq-denom-20:  #1FA89C;
  --riq-denom-50:  #2DB24A;
  --riq-denom-100: #C28A0E;
  /* text-safe ink per denomination (AA on cards) */
  --riq-denom-1-ink: #5A6B78;
  --riq-denom-5-ink: #2E7F77;
  --riq-denom-10-ink: #178D83;
  --riq-denom-20-ink: #0F6F67;
  --riq-denom-50-ink: #1E8A37;
  --riq-denom-100-ink: #8F6608;

  /* ---- 14. Legacy aliases -------------------------------- */
  --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: #6FE3DB;
  --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:   #6FE3DB;
  --riq-pale-blue:    var(--riq-teal-light);

  /* ---- 15. Semantic colors ------------------------------- */
  --riq-success: var(--riq-green);
  --riq-warning: #C28A0E;
  --riq-warning-ink: #6B4E00;  /* warning as TEXT: AA on warn-surface (6.9:1); --riq-warning is 2.7:1 */
  --riq-danger:  #C03A3A;
  --riq-info:    var(--riq-teal);

  /* Alert/banner surface tints (not in the token ramps). */
  --riq-warn-surface:         #FBF1DC;
  --riq-warn-surface-border:  #ECCB86;
  --riq-danger-surface:       #FBEAEA;
  --riq-danger-surface-border:#E8AFAF;

  --focus-ring: 0 0 0 3px rgba(31, 168, 156, 0.35);

  /* ---- 15b. App bar (always navy, same in both themes) ---- */
  --riq-appbar-bg:          var(--riq-deep-navy);
  --riq-appbar-fg:          #C6D3DE;  /* icons, secondary text */
  --riq-appbar-fg-strong:   #F4F7F9;  /* names, wordmark */
  --riq-appbar-fg-muted:    #8CA0B2;  /* role line */
  --riq-appbar-fg-subtle:   #9FB2C2;  /* pill label */
  --riq-appbar-hover:       rgba(255, 255, 255, 0.08);
  --riq-appbar-pill:        rgba(255, 255, 255, 0.06);
  --riq-appbar-pill-active: rgba(255, 255, 255, 0.14);
  --riq-appbar-border:      rgba(255, 255, 255, 0.16);
  --riq-appbar-divider:     rgba(255, 255, 255, 0.14);
  --riq-gradient-wordmark-on-dark: linear-gradient(180deg, #2DB24A 0%, #5AA9E6 100%); /* @kind color */

  /* ---- 15c. Utility ---------------------------------------- */
  --riq-on-accent: #FFFFFF;             /* text/icons on teal, green, gradient fills */
  --riq-scrim:     rgba(11, 31, 51, 0.5); /* dialog backdrop */
}

/* ============================================================
   16. DARK MODE — neutrals invert, brand accents lift for AA
   ============================================================ */
[data-theme="dark"] {
  --riq-fg-1:         #F4F7F9;
  --riq-fg-2:         #D7E0E8;
  --riq-fg-3:         #A8B5C0;
  --riq-fg-4:         #6F8090;
  --riq-fg-disabled:  #3D4E5C;

  --riq-bg-app:       #07172A;
  --riq-bg-card:      #142A3D;
  --riq-bg-elevated:  #1B344A;
  --riq-bg-sunken:    #0B1F33;
  --riq-bg-hover:     #1B344A;

  --riq-border-1:     #1F3950;
  --riq-border-2:     #2E4862;
  --riq-border-strong:#506B85;

  --riq-teal:         #3FD0BF;
  --riq-teal-hover:   #5DDDCE;
  --riq-teal-50:      #18324A;
  --riq-teal-100:     #1F3F58;
  --riq-teal-200:     #2E6C63;

  --riq-green:        #4FCB6B;
  --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-warning-ink: #E0A535;
  --riq-danger:  #D85A5A;
  --riq-info:    var(--riq-teal);

  --riq-warn-surface:         #2A2207;
  --riq-warn-surface-border:  #574611;
  --riq-danger-surface:       #2C1313;
  --riq-danger-surface-border:#5A2727;

  --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);

  --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:   #C8ECE7;
  --riq-denom-10:  #6FE3DB;
  --riq-denom-20:  #3FD0BF;
  --riq-denom-50:  #4FCB6B;
  --riq-denom-100: #E0A535;
  --riq-denom-1-ink: var(--riq-denom-1);
  --riq-denom-5-ink: var(--riq-denom-5);
  --riq-denom-10-ink: var(--riq-denom-10);
  --riq-denom-20-ink: var(--riq-denom-20);
  --riq-denom-50-ink: var(--riq-denom-50);
  --riq-denom-100-ink: var(--riq-denom-100);
}

/* ============================================================
   17. TYPE CLASSES — .riq-*
   ============================================================ */
.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); }

/* ============================================================
   18. WORDMARK — Recycler.IQ
   ============================================================
     "Recycler" — Poppins SemiBold, brand navy
     ".IQ"      — Poppins SemiBold, brand gradient (green → blue)
   Tagline: "WHERE HARDWARE MEETS INTELLIGENCE" — HARDWARE takes
   the gradient, the rest stays body color.
   ============================================================ */
.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); }
.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); }
.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; }