/* ═══════════════════════════════════════════════════════════════════════════
   TULAM DESIGN SYSTEM
   One stylesheet, loaded by every page. This exists because Compare and Style
   were built separately and drifted into looking like two different websites:
   the product card, the platform row and the buy panel were each implemented
   twice, differently, with inline styles inside JS template literals — which is
   also why past theme changes physically could not reach them.

   Precedence: this file defines TOKENS + SHARED COMPONENTS. Page-specific
   layout (hero, marketing sections, chat) stays in the page.

   The `natural` palette is locked (CLAUDE.md §11). These are the same values,
   named once instead of five times.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────────────────── */
:root{
  /* ground + surfaces */
  --t-paper:#F5F0E5;
  --t-surface:#FFFFFF;
  --t-surface-2:#F2EEE9;

  /* ink + text */
  --t-ink:#23201B;
  --t-text:#23201B;
  --t-text-2:#6E675C;
  --t-text-3:#9A9184;

  /* hairlines */
  --t-line:rgba(35,32,27,0.11);
  --t-line-2:rgba(35,32,27,0.18);

  /* natural-dye accents */
  --t-terra:#C2542D;   /* primary */
  --t-terra-d:#A2431F;
  --t-olive:#7A8450;
  --t-indigo:#3A4A6B;
  --t-ochre:#C98A2E;
  --t-forest:#2E6B45;  /* savings / positive */

  /* type */
  --t-font:'Urbanist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --t-fs-xs:11px; --t-fs-sm:12.5px; --t-fs-md:14px; --t-fs-lg:16px;
  --t-fs-xl:20px; --t-fs-2xl:26px;

  /* spacing — 4px base */
  --t-1:4px; --t-2:8px; --t-3:12px; --t-4:16px; --t-5:20px; --t-6:26px; --t-8:34px;

  /* radii + elevation */
  --t-r-sm:10px; --t-r:14px; --t-r-lg:18px; --t-r-pill:100px;
  --t-shadow-btn:4px 4px 0 var(--t-ink);
  --t-shadow-card:0 1px 2px rgba(35,32,27,.05), 0 10px 28px rgba(35,32,27,.06);

  /* motion */
  --t-fast:.14s ease; --t-slow:.22s ease;
}

/* Platform brand colours — these identify real merchants and are never themed. */
:root{
  --t-myntra:#FF3F6C; --t-ajio:#2C4152;  --t-flipkart:#2874F0;
  --t-amazon:#FF9900; --t-nykaa:#E80071; --t-meesho:#9922BB; --t-tatacliq:#1D2D6B;
}

@media (prefers-reduced-motion: reduce){
  :root{ --t-fast:0s; --t-slow:0s; }
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────────
   The one loud element in the system: ink outline + a real offset shadow that
   physically presses. Type stays Urbanist so labels remain readable — an
   earlier bitmap-font version was rejected for exactly that reason.          */
.t-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--t-2);
  font-family:var(--t-font); font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.05em; text-decoration:none;
  border:2.5px solid var(--t-ink); border-radius:var(--t-r-sm);
  box-shadow:var(--t-shadow-btn); cursor:pointer;
  padding:11px 20px; min-height:44px;
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.t-btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--t-ink); }
.t-btn:active{ transform:translate(2px,2px);  box-shadow:1px 1px 0 var(--t-ink); }
.t-btn:focus-visible{ outline:3px solid var(--t-indigo); outline-offset:3px; }

.t-btn--primary{ background:var(--t-terra); color:#FFF; }
.t-btn--secondary{ background:var(--t-surface); color:var(--t-ink); }
.t-btn--block{ width:100%; }

/* ── CARD ────────────────────────────────────────────────────────────────── */
.t-card{
  background:var(--t-surface); border:1px solid var(--t-line);
  border-radius:var(--t-r-lg); box-shadow:var(--t-shadow-card);
  padding:var(--t-4);
}

/* ── PRODUCT CARD ────────────────────────────────────────────────────────────
   Shared by Compare and Style. Previously written twice with different markup,
   which is the single biggest reason the two pages read as different sites.  */
.t-product{ display:flex; flex-direction:column; gap:0; }
.t-product__head{ display:flex; gap:var(--t-3); align-items:flex-start; margin-bottom:var(--t-3); }
.t-product__img{
  width:62px; height:62px; min-width:62px; overflow:hidden;
  border-radius:13px; background:var(--t-surface-2);
  display:grid; place-items:center; font-size:26px;
}
.t-product__img img{ width:100%; height:100%; object-fit:cover; }
.t-product__body{ flex:1; min-width:0; }
.t-product__brand{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--t-text-3); margin-bottom:3px;
}
.t-product__name{
  font-size:13.5px; font-weight:600; line-height:1.35; color:var(--t-text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.t-product__colour{ font-weight:600; color:var(--t-text-3); }
.t-product__meta{ display:flex; align-items:center; gap:var(--t-2); margin-top:6px; flex-wrap:wrap; }
.t-product__price{
  font-size:17px; font-weight:800; color:var(--t-text); font-variant-numeric:tabular-nums;
}

/* ── PLATFORM ROW ────────────────────────────────────────────────────────── */
.t-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 11px; border-radius:var(--t-r-sm); margin-bottom:7px;
  text-decoration:none; border:1px solid var(--t-line);
  background:var(--t-surface); transition:border-color var(--t-slow);
  min-height:44px;
}
.t-row:hover{ border-color:var(--t-line-2); }
.t-row--best{ border-color:rgba(194,84,45,.35); background:rgba(194,84,45,.07); }
.t-row__left{ display:flex; align-items:center; gap:9px; min-width:0; }
.t-row__dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.t-row__name{ font-size:12.5px; font-weight:600; color:var(--t-text-2); white-space:nowrap; }
.t-row__right{ display:flex; align-items:baseline; gap:7px; flex-shrink:0; margin-left:10px; }
.t-row__price{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--t-text); }
.t-row--best .t-row__price{ color:var(--t-terra); }
.t-row__mrp{ font-size:11px; color:var(--t-text-3); text-decoration:line-through; }
.t-row__off{ font-size:11px; font-weight:700; color:var(--t-forest); }

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.t-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:var(--t-r-pill); white-space:nowrap;
}
.t-badge--best{ background:var(--t-terra); color:#FFF; }
.t-badge--save{ background:rgba(46,107,69,.12); color:var(--t-forest); }
.t-badge--muted{ background:var(--t-surface-2); color:var(--t-text-3); }

/* ── FRESHNESS ───────────────────────────────────────────────────────────────
   Prices are scraped, not live. Every card states its own age; past 7 days it
   says so plainly rather than dressing it up.                                */
.t-fresh{
  display:flex; align-items:center; gap:5px;
  font-size:10.5px; color:var(--t-text-3); margin-top:7px;
}
.t-fresh__dot{ width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.t-fresh--stale{ color:var(--t-ochre); }

/* ── PRICE ALERT ─────────────────────────────────────────────────────────────
   The retention loop: a comparison is a one-shot interaction unless something
   brings the user back, and an alert is a reason they asked for.            */
.t-alert{ margin-top:8px; }
.t-alert__toggle{
  display:flex; align-items:center; gap:6px; width:100%;
  background:none; border:none; cursor:pointer; padding:6px 2px;
  font-family:var(--t-font); font-size:12px; font-weight:700; color:var(--t-text-3);
  min-height:36px;
}
.t-alert__toggle:hover{ color:var(--t-terra); }
.t-alert__form{ display:none; gap:6px; margin-top:4px; }
.t-alert__form.open{ display:flex; }
.t-alert__form input{
  flex:1; min-width:0; font-family:var(--t-font); font-size:13px;
  padding:9px 11px; min-height:40px;
  border:1.5px solid var(--t-line-2); border-radius:var(--t-r-sm);
  background:var(--t-surface); color:var(--t-text);
}
.t-alert__form input:focus-visible{ outline:2px solid var(--t-indigo); outline-offset:1px; }
.t-alert__form button{
  flex:none; font-family:var(--t-font); font-weight:800; font-size:12px; text-transform:uppercase;
  padding:9px 14px; min-height:40px; cursor:pointer; color:#FFF; background:var(--t-terra);
  border:2px solid var(--t-ink); border-radius:var(--t-r-sm);
}
.t-alert__msg{ font-size:12px; font-weight:700; color:var(--t-forest); padding:6px 2px; }

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.t-empty{
  text-align:center; padding:var(--t-8) var(--t-4);
  color:var(--t-text-2); font-size:var(--t-fs-md);
}
.t-empty__title{ font-size:var(--t-fs-xl); font-weight:800; color:var(--t-text); margin-bottom:var(--t-2); }

/* ── UTILITIES ───────────────────────────────────────────────────────────── */
.t-muted{ color:var(--t-text-3); }
.t-nums{ font-variant-numeric:tabular-nums; }
.t-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Nothing in the system may push the page sideways. */
html,body{ max-width:100%; overflow-x:hidden; }