/* ══════════════════════════════════════════════════
   पैशाचं झाड — Shared design tokens & base styles
   One font / color / base-component library for the
   public site, admin panel and internal tools.
   Palette + type match the Investment Proposal template:
   warm sage-green on cream, Google Sans Flex / Hind body,
   Source Serif 4 for display accents.
   ══════════════════════════════════════════════════ */

@import url('../fonts/fonts.css');
@import url('../fonts/material-symbols.css');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:         #FBF9F3;   /* warm paper */
  --bg2:        #F3EFE4;   /* warm cream — alt sections / inset */
  --text:       #23211C;   /* warm ink */
  --muted:      #6B655B;   /* warm muted */
  --border:     #E6E2D6;   /* warm hairline */
  --accent:     #517A4B;   /* sage green */
  --accent-bg:  #EFF3EC;   /* green tint */
  --accent-text:#3E5F39;   /* deeper sage — text on tint / white */
  --beige:      #F1EBDD;   /* warm beige accent */
  --meta:       #6B655B;
  --focus:      #3E5F39;   /* sage focus ring */
  --focus-on-dark: #8BBF7F; /* lighter sage — focus ring on --text-colour grounds; 7.55:1 vs #23211C */
  --err-bg:     #FBEEEC;
  --err-border: #F0D3CE;
  --err-text:   #B0472E;

  /* ── SECONDARY / TERTIARY ACCENTS — 2026-08-04 palette review. Gold was
     already live on the Kundali quiz; formalized here as the site's real
     secondary instead of leaving it stranded on one page. Terracotta is
     the one genuinely new hue, for "loan/debt" without borrowing alarm-red.
     Both tint/text pairs measured 5.8–6.6:1, comfortably AA. ── */
  --gold:          #E0B84C;
  --gold-rgb:      224,184,76;   /* alpha-blended uses of --gold (Kundali chart/report illustration) */
  --gold-bg:       #FBF3DE;
  --gold-text:     #7A5610;
  --gold-deep:     #8A6217;      /* darker gold for text-on-light where --gold-text is too light */
  --gold-on-dark:  #F4D36B;      /* readable gold on the Kundali report's night-purple card */
  --terracotta:        #8B4A2B;
  --terracotta-bg:      #F6EDE7;
  --terracotta-text:    #8B4A2B;

  /* Kundali report's "money planet" card background — was two hand-typed
     hex pairs (checkup.css and checkup2.css) that happened to match. */
  --night-1: #221E33;
  --night-2: #3A3157;

  /* one shadow color everywhere, at varying alpha, instead of three
     near-identical hand-written darks (rgba(0,0,0,…), rgba(40,36,28,…)
     and var(--text) re-typed as rgba(35,33,28,…)) */
  --shadow-rgb: 35,33,28;

  /* ── RADIUS SCALE — replaces 18 unrelated values audited across the
     public CSS. --r stays as the pre-existing "lg" step so nothing that
     already referenced it needs to change. ── */
  --radius-sm:   6px;   /* badges, tags, small chips */
  --radius-md:  10px;   /* inputs, compact cards */
  --r:          14px;   /* lg — cards (unchanged token, most common size) */
  --radius-xl:  20px;   /* feature cards, large panels */
  --radius-pill: 999px; /* fully-rounded buttons/badges */

  --font-mr:    'Hind', 'Noto Sans Devanagari', sans-serif;      /* body / Devanagari-capable */
  --font-en:    'Google Sans Flex', 'Hind', sans-serif;           /* Latin body */
  --font-serif: 'Source Serif 4', 'Noto Sans Devanagari', Georgia, serif; /* display accents — Source Serif 4 ships no Devanagari, so it falls through cleanly to a font this site already loads instead of an unpredictable system serif */

  /* ── SPACING SCALE — 9 steps, replaces ~24 ad-hoc px values that had
     grown across the CSS with no shared logic (audited 2026-08-03: half
     weren't even multiples of 4). Pick the nearest step instead of a new
     number; a 2-4px difference from an old value is invisible. ── */
  --space-1: 4px;   /* hairline gaps, icon-to-text spacing */
  --space-2: 8px;   /* tight — small button padding, compact gaps */
  --space-3: 12px;  /* compact — form-field gaps, chip padding */
  --space-4: 16px;  /* base — standard card padding, the default gap */
  --space-5: 24px;  /* comfortable — card padding, sub-section gaps */
  --space-6: 32px;  /* roomy — component-to-component separation */
  --space-7: 48px;  /* section sub-spacing */
  --space-8: 64px;  /* section padding */
  --space-9: 96px;  /* large hero / top-level section padding */

  /* ── TYPE SCALE — 9 steps, replaces 63 ad-hoc font-size values (34 of
     them literal px, several below any legibility floor: 7/8/8.5/9/9.5px).
     Same rule as spacing: pick the nearest step, don't invent a new number.
     The five body/UI steps (2xs–lg) cover the 7–18px range where almost
     all of the sprawl lived — labels, captions, buttons, body copy. The
     upper three are for real headings only; standalone decorative/emoji
     art (hero icons, prize-door glyphs, etc.) is intentionally NOT on this
     scale — those get their own sizing when the icon system replaces them. ── */
  --text-2xs:    11px;   /* floor — nothing smaller ships. micro-labels, table captions */
  --text-xs:     12.5px; /* small labels, meta text, chips */
  --text-sm:     14px;   /* secondary body / UI text — the most common size on the site */
  --text-base:   16px;   /* primary reading size */
  --text-lg:     18px;   /* emphasized body, small subheadings */
  --text-xl:     22px;   /* card/section headings */
  --text-2xl:    26px;   /* page-section headings */
  --text-3xl:    32px;   /* large headings */
  --text-display: clamp(28px, 5vw, 46px); /* cover/hero headings */

  /* ── LEADING PER SCRIPT — Devanagari needs more line-height than Latin
     at the same size (matras and the shirorekha need the room, or joined
     letters visually collide between lines). Bind with :lang(), not a
     one-off line-height per element. ── */
  --leading-mr: 1.75;
  --leading-en: 1.55;
}

/* bound to html/body only, not a bare :lang() selector — a bare :lang()
   matches every element directly (same 0,1,0 specificity as most of this
   codebase's own line-height rules) and would fight source order instead
   of losing cleanly to inheritance. This way it sets the root default and
   everything without its own line-height inherits it; anything that
   already declares one keeps winning, same as before. */
html:lang(mr), body:lang(mr) { line-height: var(--leading-mr); }
html:lang(en), body:lang(en) { line-height: var(--leading-en); }

body   { font-family:var(--font-mr); background:var(--bg); color:var(--text); }
a      { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; }
input, textarea, select { font-family:inherit; }
input:focus, textarea:focus, select:focus { border-color:var(--accent); }

/* ── FOCUS / A11Y — same standard everywhere ────── */
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ── SHARED COMPONENTS ──────────────────────────── */
.card {
  background:#fff; border:1px solid var(--border); border-radius:16px;
}
.login-card { max-width:400px; }
.err {
  background:var(--err-bg); border:1px solid var(--err-border); color:var(--err-text);
  font-size:var(--text-xs); padding:10px 14px; border-radius:10px; margin-bottom:16px;
}

/* ── A11Y UTILITIES ──────────────────────────────── */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:12px; top:-48px; z-index:2000;
  background:var(--text); color:#fff; font-size:var(--text-xs); font-weight:700;
  padding:10px 16px; border-radius:8px; transition:top .18s ease;
}
.skip-link:focus { top:12px; }