/* StyleSathi design tokens — the single source of visual truth (DESIGN.md §3, v2 Elevated).
   Elevated but fast: confident type, real spacing rhythm, depth-not-decoration, dark theme.
   Do not hardcode colors/spacing/type elsewhere; reference these variables. */

:root {
  /* Color — light (the store surface) */
  --ink: #16233D;          /* primary text, headers (deep premium indigo) */
  --ink-soft: #38445E;     /* secondary text */
  --paper: #FFFFFF;        /* primary surface — white, no cream */
  --surface: #F5F7FA;      /* wells, inputs, chips (cool ink-biased grey) */
  --paper-dim: #F5F7FA;    /* legacy alias for the verdict tag (= surface) */
  --line: #E4E8EF;         /* hairlines, dividers */
  --muted: #667085;        /* captions, meta */
  --haldi: #E7A400;        /* brand accent: primary action, active, the scan CTA */
  --haldi-deep: #B67F00;   /* pressed, focus rings */

  /* Verdict grade colors — verdicts ONLY, never reused */
  --v-very-strong: #1E7A46;
  --v-strong: #3D9159;
  --v-good: #6FA855;
  --v-suitable: #C98A00;
  --v-weak: #8A93A3;        /* deliberately NOT red */

  /* Type — Mukta (Devanagari-first) with system fallback until the subset is bundled */
  --font-ui: "Mukta","Nirmala UI","Noto Sans Devanagari","Segoe UI",system-ui,-apple-system,sans-serif;
  --fs-hero: 34px;
  --fs-grade: 28px;
  --fs-title: 20px;
  --fs-body: 17px;         /* >= 16px accessibility floor on customer screens */
  --fs-caption: 14px;
  --fs-micro: 12px;

  /* Space (8px system) + shape + depth */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --gutter: 20px;
  --tap-min: 44px;
  --radius: 14px; --radius-ctl: 12px;
  --shadow: 0 8px 30px rgba(16,35,61,.10);
  --shadow-lift: 0 10px 34px rgba(16,35,61,.16);
  --transition: 150ms ease;
}

/* Dark theme — app chrome only; the verdict tag stays on light paper (it's a physical tag) */
@media (prefers-color-scheme: dark) {
  :root { --ink:#E7ECF4; --ink-soft:#AEB9CC; --paper:#111A2E; --surface:#18233C; --paper-dim:#18233C;
          --line:#26324A; --muted:#8B97AC; --shadow:0 10px 34px rgba(0,0,0,.45); --shadow-lift:0 12px 40px rgba(0,0,0,.55); }
}
:root[data-theme="dark"]  { --ink:#E7ECF4; --ink-soft:#AEB9CC; --paper:#111A2E; --surface:#18233C; --paper-dim:#18233C;
          --line:#26324A; --muted:#8B97AC; --shadow:0 10px 34px rgba(0,0,0,.45); --shadow-lift:0 12px 40px rgba(0,0,0,.55); }
:root[data-theme="light"] { --ink:#16233D; --ink-soft:#38445E; --paper:#FFFFFF; --surface:#F5F7FA; --paper-dim:#F5F7FA;
          --line:#E4E8EF; --muted:#667085; --shadow:0 8px 30px rgba(16,35,61,.10); --shadow-lift:0 10px 34px rgba(16,35,61,.16); }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

.screen { min-height: 100vh; min-height: 100dvh; max-width: 480px; margin-inline: auto;
  padding-inline: var(--gutter); display: flex; flex-direction: column; }

/* top bar / wordmark */
.screen__header, .topbar { display: flex; align-items: center; justify-content: space-between; padding-block: var(--s2); }
.wordmark { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.greeting { font-size: var(--fs-title); font-weight: 700; margin: 0; }

.lang-toggle {
  font-size: var(--fs-caption); font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding-block: 8px; padding-inline: 16px; min-height: var(--tap-min); cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.lang-toggle:active { background: var(--line); }
.lang-toggle:focus-visible { outline: 2px solid var(--haldi-deep); outline-offset: 2px; }

.screen__body { flex: 1; display: flex; flex-direction: column; gap: var(--s2); }

/* editorial hero */
.hero { margin-block: var(--s1) var(--s1); }
.hero__greeting { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  margin: 0; text-wrap: balance; }
.hero__invite { font-size: var(--fs-body); color: var(--muted); margin: var(--s1) 0 0; max-width: 32ch; }

/* elevated empty-state card */
.empty-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--s4) var(--s2); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s1); margin-top: var(--s1); }
.empty-card__tag { width: 76px; height: 76px; opacity: .95; }
.empty-card__invite { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--ink-soft); }

.recent { margin-top: var(--s1); }
.recent__title { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s1); }
.recent__empty { font-size: var(--fs-body); color: var(--muted); margin: 0; }
.recent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.recent__item { display: flex; align-items: center; gap: 10px; padding-block: 12px;
  border-top: 1px solid var(--line); }
.recent__item:first-child { border-top: 0; }
.recent__grade { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.recent__name { flex: 1; font-size: var(--fs-caption); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent__when { font-size: var(--fs-micro); color: var(--muted); flex: none;
  font-variant-numeric: tabular-nums; }
.store-line { font-size: var(--fs-micro); color: var(--muted); margin: var(--s2) 0 0; }
.store-line button { background: none; border: 0; color: var(--ink); font-family: var(--font-ui);
  font-size: var(--fs-micro); font-weight: 600; text-decoration: underline; cursor: pointer;
  padding: 6px; min-height: var(--tap-min); }

/* thumb-zone primary action */
.screen__footer { padding-block: var(--s2); position: sticky; bottom: 0; background: var(--paper); }
.btn-scan {
  width: 100%; min-height: 58px; border: 0; border-radius: var(--radius);
  background: var(--haldi); color: #1a1300; box-shadow: var(--shadow-lift);
  font-family: var(--font-ui); font-size: var(--fs-title); font-weight: 700; letter-spacing: .01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}
.btn-scan:active { background: var(--haldi-deep); transform: translateY(1px); }
.btn-scan:focus-visible { outline: 2px solid var(--haldi-deep); outline-offset: 3px; }

/* generic micro-label */
.label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: var(--s3) 0 var(--s1); }

/* "Your colours" palette (Dressika-inspired, rulebook-driven) */
.colours { margin-top: var(--s1); }
.swatches { display: flex; gap: 14px; overflow-x: auto; padding-block-end: 4px; scrollbar-width: none; }
.swatches::-webkit-scrollbar { display: none; }
.swatch { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.swatch__dot { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(22,35,61,.10); box-shadow: var(--shadow); }
.swatch__name { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; }

/* "Add to home screen" bar — shown once, only after a verdict (FR21) */
.install-bar { position: fixed; inset-inline: 12px; bottom: 12px; z-index: 20;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.install-bar__t { flex: 1; font-size: var(--fs-caption); min-width: 160px; }
.install-bar button { min-height: var(--tap-min); border-radius: 999px; border: 0;
  font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 600;
  padding-inline: 16px; cursor: pointer; }
.install-bar__no { background: rgba(255,255,255,.14); color: #fff; }
.install-bar__yes { background: var(--haldi); color: #1a1300; font-weight: 700; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: rise 200ms ease both; }

@media (prefers-reduced-motion: reduce) {
  *, .rise { transition: none !important; animation: none !important; }
}