/* ============================================================
   Vijayalakshmi Matrimony — shared design tokens & base components
   Elite matrimony style: deep kumkum red + warm gold, cream paper
   background, restrained corners, soft shadows, trust-forward.
   Palette drawn from the brand logo (crimson V, gold flourish).
   Shared by landing / login / app.
   NOTE: token names keep the original --navy* keys so every page
   restyles from this one file; they now hold the brand red.
   ============================================================ */
:root{
  --bg:#fdf9f0;
  --bg2:#f8f1e0;
  --surface:#ffffff;
  --ink:#2a1418;
  --muted:#7a6468;
  --mutedSoft:#a8969a;
  --line:#eee0c8;
  --lineSoft:#f4ebd8;

  --navy:#8e1220;
  --navyDeep:#5c0a13;
  --navySoft:#a72a38;
  --navyTint:#fbeeee;

  --gold:#c9a227;
  --goldDeep:#a3801a;
  --goldLight:#e6c65c;
  --goldSoft:#f8edc9;

  --good:#1f7a4d;
  --goodSoft:#e5f5ec;
  --bad:#b3273f;
  --badSoft:#fbe6ea;

  --grad:linear-gradient(135deg,var(--navy) 0%,var(--navyDeep) 100%);
  --gradGold:linear-gradient(135deg,#e6c65c 0%,var(--gold) 55%,var(--goldDeep) 100%);
  --gradSoft:linear-gradient(135deg,#f8edc9 0%,#fbeeee 100%);
  --gradOverlay:linear-gradient(120deg,rgba(70,8,16,.94) 0%,rgba(142,18,32,.82) 55%,rgba(142,18,32,.55) 100%);

  --shadow:0 30px 60px -30px rgba(70,10,18,.28);
  --shadowSm:0 12px 28px -16px rgba(70,10,18,.18);
  --shadowBtn:0 10px 22px -8px rgba(163,128,26,.5);

  --radius:20px;
  --radiusLg:26px;
  --radiusSm:12px;
  --radiusPill:999px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* 'Anek Tamil' trails the Latin faces so Tamil script (the porutham
   limb names, the footer mantra) renders in a real Tamil face rather than an
   arbitrary OS fallback. Latin glyphs still come from Nunito Sans/Lora. */
body{font-family:'Nunito Sans','Anek Tamil',sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Lora','Arima',sans-serif;font-weight:700;letter-spacing:-.01em}
a{color:inherit}
.grad-text{color:var(--goldDeep)}

/* ---- language ----------------------------------------------------------
   Latin faces carry no Tamil glyphs, so a browser already falls through to
   Noto per glyph wherever the chain above lists it. These rules cover the two
   gaps: controls that name only Latin faces with no Tamil fallback, and
   whole-page Tamil, where Noto should LEAD so the line-height and letterforms
   are Tamil-first rather than Latin metrics with substituted glyphs. */
button,input,select,textarea{font-family:'Nunito Sans','Anek Tamil',sans-serif}
html[lang="ta"] body,
html[lang="ta"] button,
html[lang="ta"] input,
html[lang="ta"] select,
html[lang="ta"] textarea{font-family:'Anek Tamil','Nunito Sans',sans-serif}
html[lang="ta"] h1,html[lang="ta"] h2,html[lang="ta"] h3,html[lang="ta"] h4{
  font-family:'Arima','Lora',sans-serif;letter-spacing:0}
/* No Tamil-only line-height: it changed paragraph and header heights between
   the two languages. Headings just drop the Latin letter-spacing (above). */
/* Tamil and English share every layout metric — no page-level zoom or glyph
   scaling (both were tried: zoom shifts fixed boxes, font-size-adjust fights
   the Tamil fonts' metrics). Where a Tamil string genuinely needs a different
   size, the page carries a targeted html[lang="ta"] override for just that
   element (hero headline, nav links), so positions stay identical. */


.lang-toggle{height:40px;display:inline-flex;align-items:center;line-height:1;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);
  background:transparent;color:var(--ink);font-size:13.5px;font-weight:700;
  cursor:pointer;letter-spacing:.2px;white-space:nowrap}
.lang-toggle:hover{border-color:var(--gold);color:var(--goldDeep)}

.wrap{max-width:1460px;margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--goldDeep);background:var(--goldSoft);border:1px solid #eddca0;padding:7px 16px 7px 14px;border-radius:var(--radiusPill)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none;border-radius:var(--radiusPill);
  padding:14px 26px;font-weight:700;font-size:15px;cursor:pointer;border:0;font-family:'Nunito Sans','Anek Tamil',sans-serif;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;white-space:nowrap}
.btn.solid,.btn.gold,.btn.kumkum{background:var(--gradGold);color:var(--navyDeep);box-shadow:var(--shadowBtn)}
.btn.solid:hover:not(:disabled),.btn.gold:hover:not(:disabled),.btn.kumkum:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(163,128,26,.6)}
.btn.line,.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn.line:hover:not(:disabled),.btn.ghost:hover:not(:disabled){border-color:var(--gold);color:var(--goldDeep);transform:translateY(-2px)}
/* fixed control height so Tamil and Latin labels give identical buttons */
.btn.small,.btn.sm{height:40px;padding:0 18px;font-size:13.5px;line-height:1}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}

/* ---- shared surfaces ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadowSm)}

.chip{background:var(--navyTint);border-radius:var(--radiusSm);padding:8px 12px;font-size:12.5px;font-weight:700;
  letter-spacing:.2px;color:var(--navy);text-align:center;flex:1}

.pill{padding:6px 14px;border-radius:var(--radiusPill);font-size:12px;letter-spacing:.3px;text-transform:uppercase;font-weight:700;border:0}
.pill.pending{background:var(--goldSoft);color:var(--goldDeep)}
.pill.accepted{background:var(--goodSoft);color:var(--good)}
.pill.declined{background:var(--badSoft);color:var(--bad)}

.badge{background:var(--gradGold);color:var(--navyDeep);border-radius:var(--radiusPill);font-size:11.5px;padding:2px 7px;font-weight:700}

.avatar{width:52px;height:52px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:20px;color:#fff;background:var(--grad);font-family:'Lora',serif;overflow:hidden;box-shadow:0 6px 14px -6px rgba(16,20,40,.4);border:2px solid var(--gold)}
.avatar img{width:100%;height:100%;object-fit:cover}