/*
 * Dulawat Finserve — single source of design truth.
 * Load FIRST, before styles.css, on every shell (public, client portal, admin).
 *
 * styles.css used to declare --navy twice with different values and --gold
 * three times, across separate bare / --client-* / --framework-* families,
 * so the same brand colour rendered differently on different pages. This
 * file defines each value once and aliases every legacy name to it.
 */

:root {
  /* ---- BRAND -------------------------------------------------- */
  --navy: #0A1931;              /* primary surface, headings        */
  --navy-deep: #08152A;         /* footer                           */
  --navy-mid: #102A43;          /* secondary dark surface           */

  --gold: #C5A059;              /* accent: CTA, eyebrow, rule       */
  --gold-warm: #D8B56D;         /* hover on dark                    */
  --gold-deep: #8A6D2F;         /* gold TEXT on light — AA safe     */
  --gold-tint: #FBF6EC;         /* gold tint surface                */
  --gold-tint-line: #EBDCBE;

  /* ---- NEUTRALS ----------------------------------------------- */
  --off-white: #F8F9FB;         /* page background                  */
  --soft-grey: #EEF1F5;         /* inset surface                    */
  --white: #FFFFFF;
  --border: #E4E8EF;            /* primary border                   */
  --border-soft: #F1F3F7;       /* table row divider                */
  --ink: #1F2937;               /* body text                        */
  --slate: #4B5563;             /* secondary text                   */
  --slate-light: #6B7280;
  --mute: #8A93A2;              /* meta, captions, axis labels      */
  --mute-light: #B6BECB;        /* disabled                         */

  /* ---- SEMANTIC ----------------------------------------------- */
  --success: #177245;           /* restrained financial green       */
  --success-bg: #F1F7F3;
  --success-line: #D8E9DE;
  --success-deep: #1F6142;

  --warning: #8A5A18;
  --warning-text: #7A5E1F;      /* on warning-bg                    */
  --warning-bg: #FFF9EC;
  --warning-line: #F0E0BD;

  --error: #A32E2E;
  --error-bg: #FDECEC;
  --error-line: #F3D6D6;

  --info: #1E4A73;
  --info-bg: #EAF0F6;

  /* ---- CHART PALETTE (use in this order) ---------------------- */
  --chart-1: #102A43;
  --chart-2: #3E6C97;
  --chart-3: #C5A059;
  --chart-4: #D9C7A0;
  --chart-5: #7A93AE;
  --chart-6: #C7CDD8;

  /* ---- TYPE -----------------------------------------------------
   * Playfair Display carries marketing headings — the established brand
   * voice, closer to private wealth than a geometric sans. Inter carries
   * all product UI (portal, admin, calculators) and every number.
   * ----------------------------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(28px, 3.2vw, 42px);
  --fs-h2: clamp(27px, 3.1vw, 38px);
  --fs-h3: 21px;
  --fs-h4: 18px;
  --fs-body: 15px;
  --fs-body-lg: 16px;
  --fs-small: 13px;
  --fs-meta: 11.5px;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  --ls-display: -0.028em;       /* on h1/h2                         */
  --ls-heading: -0.02em;
  --ls-eyebrow: 0.16em;         /* uppercase gold eyebrow           */

  /* ---- SPACING ------------------------------------------------ */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --section-y: 80px;            /* vertical section rhythm          */
  --container: 1320px;          /* public site                      */
  --container-portal: 1400px;   /* client portal                    */
  --container-admin: 1560px;    /* admin console                    */

  /* ---- RADIUS ------------------------------------------------- */
  --radius-card: 16px;
  --radius: 14px;
  --radius-sm: 11px;
  --radius-inset: 10px;
  --radius-btn: 10px;
  --radius-pill: 99px;

  /* ---- ELEVATION ------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(10, 25, 49, .06);
  --shadow-md: 0 10px 26px rgba(10, 25, 49, .09);
  --shadow-lg: 0 24px 44px -34px rgba(10, 25, 49, .5);
  --shadow-drawer: -24px 0 60px -30px rgba(10, 25, 49, .5);

  /* ---- MOTION ------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 300ms;

  /* ---- BREAKPOINTS (reference — CSS can't use vars in @media) --
   * 360 390 430 768 1024 1280 1440 1600
   * public site nav:   >=1080 mega-nav / <1080 drawer / <760 bottom bar
   * client portal nav: >=1080 tab strip / <1080 section picker
   * admin console:     >=1180 sidebar / <1180 collapsed
   * Ranges must be contiguous — never a width where a nav item is
   * unreachable behind an overflow-x scroll strip.
   * ------------------------------------------------------------- */

  /* ==============================================================
   * LEGACY ALIASES — keep existing selectors in styles.css working.
   * Remove an alias only after its last consumer is migrated.
   * ============================================================== */
  --line: var(--border);
  --soft: var(--off-white);
  --muted: var(--mute);
  --danger: var(--error);
  --danger-bg: var(--error-bg);

  --client-navy: var(--navy);
  --client-navy-2: var(--navy-mid);
  --client-gold: var(--gold);
  --client-amber: var(--gold-warm);
  --client-bg: var(--off-white);
  --client-muted: var(--mute);
  --client-green: var(--success);
  --client-red: var(--error);

  --framework-navy: var(--navy);
  --framework-navy-2: var(--navy-mid);
  --framework-emerald: var(--success);
  --framework-gold: var(--gold);
  --framework-azure: var(--chart-2);

  /* bare legacy names from the old top-of-file :root */
  --navy-2: var(--navy-mid);
  --gold-2: var(--gold-warm);
}

/* Every rupee and percentage figure, everywhere, without exception. */
.num,
[data-num],
td.num,
.metric-value,
.stat-value {
  font-variant-numeric: tabular-nums;
}

/* Gold on white fails AA below ~4.5:1 — use --gold-deep for TEXT and
   reserve --gold for fills, rules and dark-surface text. */
.text-gold { color: var(--gold-deep); }

/* Uppercase gold eyebrow above section headings. */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Demo-data badge. Must appear on any figure not from live data, and
   must be impossible to ship silently — gated behind the DEMO_DATA
   config flag (see app/config.php). */
.demo-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--gold-tint);
  border: 1px solid var(--gold-tint-line);
  border-radius: 6px;
  padding: 4px 7px;
}

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