/*
  Deal Network Design System  —  v0.1.0
  -------------------------------------------------------------------------
  SINGLE source of truth for every frontend component in the network:
  offer cards, intelligence widgets, leaderboards, content, forms.

  Distilled DNA:
    - Offer cards      <- Skyscanner / RetailMeNot / Honey
    - Intelligence     <- Hopper buy-wait / Google Flights price history /
                          financial dashboards (Stripe, Bloomberg)

  PRINCIPLES (apply to ALL families):
    1. Color scarcity   — green = money/savings ONLY. Everything else neutral.
    2. Semantic color   — green = action, dark = status/trust, amber = urgency.
    3. Label every number with its unit. Forecast dimmer than confirmed.
    4. Flat, lean, boring on purpose. Hierarchy via size + weight, not chrome.

  MARKUP CONTRACT
    Wrap any component in a `.ds` element. Compose from these primitives:
      ds-card (--hero)         ds-val (--best)        ds-badge
      ds-btn (--go / --block)  ds-code                ds-chip (--ship / --urgent)
      ds-stat                  ds-signal (--buy / --wait / --watch)
      ds-spark / ds-spark__bar (--fc)                 ds-section
    Layout helpers: ds-feed, ds-stack, ds-row-top, ds-row-act, ds-row-meta,
                    ds-stats-3, ds-cta-row
  -------------------------------------------------------------------------
*/

/* NB: Plus Jakarta Sans + JetBrains Mono are loaded via wp_enqueue_style('ds-fonts') in
   deal-design-system.php (a real <link> with display=swap + preconnect) — NOT a render-blocking @import. */

:root{
  /* money / action (green) — AA contrast on white */
  --ds-money-ink:#0F766E;
  --ds-money-solid:#0F766E;
  --ds-money-solid-hover:#0B5C55;
  --ds-money-fill:#E6F7F1;
  --ds-money-bright:#2DD4BF;      /* bright teal — money green on DARK surfaces (e.g. card heroes) */

  /* status / trust (dark charcoal) */
  --ds-status-ink:#1A2332;
  --ds-status-fill:#EEF1F5;

  /* urgency (amber) — AA contrast on white */
  --ds-urgent-ink:#B45309;
  --ds-urgent-fill:#FEF3C7;

  /* neutrals */
  --ds-ink:#1A2332;        /* primary text          */
  --ds-muted:#5C6A7F;      /* secondary text (AA)    */
  --ds-faint:#8A94A6;      /* hints / tertiary       */
  --ds-line:#E6E9EF;       /* borders / dividers     */
  --ds-surface:#FFFFFF;    /* card background        */
  --ds-surface-2:#F5F7F9;  /* tiles / code wells     */
  --ds-page:#F2F4F7;       /* page background        */

  /* typography */
  --ds-font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ds-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* radius */
  --ds-r-sm:8px;
  --ds-r:12px;
  --ds-r-lg:16px;
  --ds-r-pill:999px;

  /* elevation — single, flat step */
  --ds-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.05);

  --ds-t:160ms ease;
}

@media (prefers-color-scheme:dark){
  :root{
    --ds-money-ink:#5EEAD4;
    --ds-money-solid:#0F766E;
    --ds-money-solid-hover:#15938A;
    --ds-money-fill:#0E2A28;
    --ds-money-bright:#5EEAD4;

    --ds-status-ink:#E6E9EF;
    --ds-status-fill:#222B38;

    --ds-urgent-ink:#FBBF24;
    --ds-urgent-fill:#3A2E12;

    --ds-ink:#E6E9EF;
    --ds-muted:#9AA6B8;
    --ds-faint:#6B7689;
    --ds-line:#2A3342;
    --ds-surface:#161C26;
    --ds-surface-2:#1C2430;
    --ds-page:#0F141B;

    --ds-shadow:0 1px 2px rgba(0,0,0,.30),0 4px 12px rgba(0,0,0,.35);
  }
}

/* --- wrapper reset: survive theme + Tailwind preflight ------------------ */
.ds,.ds *{box-sizing:border-box;}
.ds{font-family:var(--ds-font);color:var(--ds-ink);line-height:1.5;-webkit-font-smoothing:antialiased;}
.ds a{color:inherit;text-decoration:none;}
.ds p{margin:0;}

/* --- card -------------------------------------------------------------- */
.ds-card{
  background:var(--ds-surface);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg);
  box-shadow:var(--ds-shadow);
  padding:14px 16px;
}
.ds-card--hero{border:2px solid var(--ds-money-solid);}

/* --- layout helpers ---------------------------------------------------- */
.ds-feed{display:flex;flex-direction:column;gap:10px;}
.ds-stack{display:flex;flex-direction:column;gap:9px;}
.ds-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.ds-row-act{display:flex;gap:8px;align-items:stretch;}
.ds-row-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--ds-faint);}
.ds-stats-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}

/* --- section label ----------------------------------------------------- */
.ds-section{font-size:13px;font-weight:700;color:var(--ds-muted);letter-spacing:.02em;margin:0 0 8px;}

/* --- discount anchor value (the headline number) ----------------------- */
.ds-val{font-size:21px;font-weight:800;color:var(--ds-ink);white-space:nowrap;font-variant-numeric:tabular-nums;}
.ds-val--best{color:var(--ds-money-ink);}     /* color scarcity: best deal only */

/* --- brand name -------------------------------------------------------- */
.ds-brand{font-size:15px;font-weight:700;color:var(--ds-ink);}

/* --- supporting copy --------------------------------------------------- */
.ds-desc{font-size:13px;color:var(--ds-muted);}

/* --- badge (money) ----------------------------------------------------- */
.ds-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--ds-r-sm);background:var(--ds-money-fill);color:var(--ds-money-ink);}

/* --- chips ------------------------------------------------------------- */
.ds-chip{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:var(--ds-r-sm);}
.ds-chip--ship{background:var(--ds-status-fill);color:var(--ds-status-ink);}
.ds-chip--urgent{background:var(--ds-urgent-fill);color:var(--ds-urgent-ink);}
.ds-chip i{vertical-align:-2px;margin-right:4px;}

/* --- code well (masked until reveal) ----------------------------------- */
.ds-code{display:inline-flex;align-items:center;font-family:var(--ds-mono);font-size:14px;font-weight:700;letter-spacing:2px;color:var(--ds-muted);background:var(--ds-surface-2);border-radius:var(--ds-r-sm);padding:9px 12px;}

/* --- buttons ----------------------------------------------------------- */
/* Rule 1: no border+radius (browser clips); fake the border with inset shadow.
   Rule 2: inline-block for text buttons (inline-flex clips descenders). */
.ds-btn{
  display:inline-block;
  font:inherit;font-weight:700;font-size:14px;line-height:1.2;text-align:center;
  padding:12px 16px;min-height:44px;
  border:none;border-radius:var(--ds-r-sm);
  background:transparent;color:var(--ds-ink);
  box-shadow:inset 0 0 0 1px var(--ds-line);
  cursor:pointer;transition:box-shadow var(--ds-t),background var(--ds-t);
}
.ds-btn i{vertical-align:-2px;margin-left:5px;}
.ds-btn:hover{box-shadow:inset 0 0 0 1px var(--ds-muted);}
.ds-btn:focus-visible{outline:2px solid var(--ds-money-solid);outline-offset:2px;}
.ds-btn--go{background:var(--ds-money-solid);color:#fff;box-shadow:none;}
.ds-btn--go:hover{background:var(--ds-money-solid-hover);box-shadow:none;}
.ds-btn--block{display:block;width:100%;}

/* --- stat tile (intelligence) ------------------------------------------ */
.ds-stat{background:var(--ds-surface-2);border-radius:var(--ds-r);padding:10px 12px;}
.ds-stat__label{font-size:12px;color:var(--ds-muted);margin:0 0 3px;}
.ds-stat__num{font-size:22px;font-weight:800;color:var(--ds-ink);margin:0;font-variant-numeric:tabular-nums;}

/* --- signal / verdict pill (the intelligence anchor) ------------------- */
.ds-signal{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:5px 11px;border-radius:var(--ds-r-sm);white-space:nowrap;}
.ds-signal--buy{background:var(--ds-money-fill);color:var(--ds-money-ink);}
.ds-signal--wait{background:var(--ds-urgent-fill);color:var(--ds-urgent-ink);}
.ds-signal--watch{background:var(--ds-status-fill);color:var(--ds-status-ink);}
.ds-signal i{font-size:15px;}

/* --- sparkline (confirmed vs forecast) --------------------------------- */
.ds-spark{display:flex;align-items:flex-end;gap:5px;height:62px;}
.ds-spark__bar{flex:1;background:var(--ds-faint);border-radius:2px 2px 0 0;min-height:3px;}
.ds-spark__bar--fc{opacity:.3;}            /* forecast: dimmer than confirmed */

/* --- mobile ------------------------------------------------------------ */
@media (max-width:480px){
  .ds-cta-row{flex-direction:column;}
  .ds-cta-row .ds-btn{width:100%;}
  .ds-stats-3{grid-template-columns:repeat(3,1fr);gap:8px;}
}

/* --- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ds-btn{transition:none;}
}