/* Myhna Vistara | base.css — Variables, reset, typography, utilities
   Do not edit selectors — only values */

  /* -------- AVENIR LT PRO (self-hosted) — same files index.html loads -------- */
  @font-face{ font-family:'Avenir LT Pro'; src:url('../fonts/avenir-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Avenir LT Pro'; src:url('../fonts/avenir-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Avenir LT Pro'; src:url('../fonts/avenir-400i.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
  @font-face{ font-family:'Avenir LT Pro'; src:url('../fonts/avenir-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Avenir LT Pro'; src:url('../fonts/avenir-700.woff2') format('woff2'); font-weight:600 700; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Avenir LT Pro'; src:url('../fonts/avenir-900.woff2') format('woff2'); font-weight:800 900; font-style:normal; font-display:swap; }

  /* -------- CANELA (Commercial Type) — ⚠️ TRIAL/EVALUATION FILES, LOCAL PREVIEW ONLY --------
     Same files + same warning as index.html's copy of this block. These .otf came from
     *-Trial builds: the embedded EULA restricts use to evaluation, and the glyph set is cut
     down to ~75 chars (no em-dash, &, +, %, … — common in our headings). DO NOT deploy these
     files or ship this build live. Buy the real web license from Commercial Type first, then
     swap these six files for the licensed ones (same @font-face names/paths — no other change
     needed). Playfair Display stays loaded as the network fallback so missing Canela glyphs
     still render instead of tofu. */
  @font-face{ font-family:'Canela Trial'; src:url('../fonts/canela-trial/canela-trial-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Canela Trial'; src:url('../fonts/canela-trial/canela-trial-400i.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
  @font-face{ font-family:'Canela Trial'; src:url('../fonts/canela-trial/canela-trial-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Canela Trial'; src:url('../fonts/canela-trial/canela-trial-500i.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; }
  @font-face{ font-family:'Canela Trial'; src:url('../fonts/canela-trial/canela-trial-700.woff2') format('woff2'); font-weight:600 700; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Canela Trial'; src:url('../fonts/canela-trial/canela-trial-700i.woff2') format('woff2'); font-weight:600 700; font-style:italic; font-display:swap; }

  /* -------- TOKENS -------- */
  /*
   * DESIGN TOKENS — Myhna Vistara
   * ─────────────────────────────────────────────
   * All brand values are defined here as CSS variables.
   * To change a colour, font, or button style globally:
   *   1. Find the token in this :root block
   *   2. Change the value here only
   *   3. Every element using that token updates automatically
   *
   * Never hardcode a colour, button size, or font value
   * directly in any CSS file. Always use var(--token-name).
   * ─────────────────────────────────────────────
   */
  :root{
    /* ── Brand Colours ──────────────────────────── */
    /* "--navy" is a misnomer kept only so existing selectors below don't
       need renaming (per this file's own "values only" rule) — the site
       has no literal navy blue anywhere; every --navy-* token is a gold
       alias, matching the current index.html design system exactly. */
    --navy:             #AF812E;
    --navy-deep:        #8A6420;
    --navy-dark:        #8A6420;              /* darkest navy — sticky bar, popup heading */
    --gold:             #D2AB67;
    --gold-dark:        #AF812E;
    --gold-accent:      #C9A84C;              /* primary CTA gold — buttons, borders, icons */
    --gold-hover:       #d4b25a;              /* gold hover / elevated state */
    --gold-grad:        linear-gradient(100deg, #AF812E 0%, #D2AB67 25%, #F0D9A0 50%, #D2AB67 75%, #AF812E 100%);
    --gold-shimmer-speed: 6s;
    --cream:            #F4F1E8;
    --cream-soft:       #FDFAF4;
    --charcoal:         #2D2E2D;
    --white:            #FFFFFF;
    --rule:             rgba(175, 129, 46, 0.20);
    --rule-mid:         rgba(175, 129, 46, 0.30); /* section-level divider borders */
    --rule-light:       rgba(175, 129, 46, 0.15); /* subtle item / card borders */
    --rule-faint:       rgba(175, 129, 46, 0.18); /* slightly stronger subtle borders */
    --gold-border:      rgba(210, 171, 103, 0.45);/* trust-pill, nav-call border */
    --color-error:      #C0392B;              /* form validation error */
    --color-wa:         #25D366;              /* WhatsApp brand green */
    --color-wa-dark:    #128C4A;              /* WhatsApp dark hover green */
    --form-card-bg:     rgba(250,247,242,0.97);   /* hero / locality / price-list form card */
    --form-card-border: rgba(197,163,89,0.30);    /* form card perimeter border */

    /* ── Typography ─────────────────────────────── */
    /* Matches index.html's font stack exactly, including Canela Trial —
       confirmed with the client (2026-08-06) despite the eval-license risk
       on those files (see the @font-face comment above); Playfair Display
       stays as the network fallback for glyphs Canela can't render. */
    --display: 'Canela Trial', 'Playfair Display', 'Times New Roman', Georgia, serif;
    --body:    'Avenir LT Pro', 'Avenir Next', 'Avenir', system-ui, -apple-system, sans-serif;
    --text-faint: #555;   /* long-form body text */
    --text-muted: #666;   /* secondary / muted body text */
    --text-mid:   #6A6A6A; /* mid-tone muted text — pb-sub */
    --text-pale:  #777;   /* subtle labels */
    --text-dim:   #888;   /* dim labels, consent */
    --text-ghost: #999;   /* very faint text */
    --text-airy:  #aaa;   /* inactive tabs, italic notes */

    /* ── Type scale ─────────────────────────────────────────────────────
       Loaded by every INTERIOR page (bhk-locality.css and, through it, all
       23 subpages). NOT loaded by index.php — the homepage is a single
       self-contained file with its own inline <style> block and its own
       :root, entirely separate from this one. That is a real architectural
       split, not an oversight to paper over: index.php references none of
       these custom properties, so this file cannot be "the shared system"
       for the homepage's own rules the way it is for every interior page.

       These values are copied FROM the homepage's own type rules — mainly
       its "UNIFIED TYPE SCALE" comment block (search index.php) which already
       governs .vision-h/.faq-h/.am-h/.fp-h/etc site-wide on the homepage —
       and .faq-qt / .overview-body for the rest. Interior pages read them
       from here so they render the same sizes without restating them.

       This one-directional relationship must stay one-directional: pointing
       an index.php rule at var(--fs-*) does NOT work — the variable is
       undefined in that file's scope, and for an inherited property like
       font-size an invalid var() silently falls back to whatever the parent
       element's size is, not to any visible error. That exact mistake
       previously shipped: .faq-qt was rewired to var(--fs-faq-q) and quietly
       collapsed from 24px to an inherited 16px on the live homepage, with no
       console warning to catch it. If index.php's own numbers ever need to
       change, edit them in index.php directly, then update the matching
       token here to keep the two in sync — never the other way around.

       Still duplicated as literals: the ~360 other inline font-size
       declarations in index.php and ~115 in pages/home.css that aren't part
       of the four rules named above. Those were not touched by this system
       and carry no drift risk from it. */
    --fs-h1:        clamp(40px, 5vw, 64px);
    --lh-h1:        1.08;
    --fs-h2:        clamp(34px, 4.2vw, 54px);  /* = homepage's "UNIFIED TYPE SCALE" rule (index.php) governing .vision-h/.faq-h/.am-h/etc — the true source, not a guess */
    --lh-h2:        1.12;  /* matches the same homepage rule */
    --fs-h3:        clamp(18px, 1.5vw, 20px);
    --lh-h3:        1.4;
    --fs-body:      clamp(17px, 1.4vw, 19px);  /* long-form paragraph copy */
    --lh-body:      1.8;
    --fs-body-sm:   16px;                      /* FAQ answers, notes, captions */
    --fs-faq-q:     clamp(20px, 2vw, 24px);
    --lh-faq-q:     1.3;
    --fs-eyebrow:   12px;                      /* uppercase tracked labels */
    --lh-eyebrow:   1.8;

    /* ── Button Tokens ──────────────────────────── */
    --btn-padding-y:    14px;
    --btn-padding-x:    32px;
    --btn-radius:       6px;
    --btn-border-width: 1.5px;
    --radius-md:        14px;             /* matches index.html — .btn-gold-primary radius */

    /* ── Neutral / UI Tones ─────────────────────── */
    --color-placeholder: #b6b3aa;  /* input placeholder text */
    --color-icon:        #BBBBBB;  /* SVG icons, select arrows */
    --trust-bar-bg:      #F8F8F8;  /* trust bar background stripe */
    --progress-bg:       #E8E2D4;  /* location tab progress track */
    --plan-fp-bg:        #d8d3c4;  /* floor-plan image wrapper bg */
    --popup-card-bg:     #FAF6EE;  /* popup modal card background */
    --navy-mid:          #8A6420;  /* pb-cta hover state */
    --gold-muted:        #b8923e;  /* btn-unlock hover */
    --badge-border:      #C6F6D5;  /* live badge border */
    --badge-text:        #276749;  /* live badge text */
    --badge-pulse:       #22C55E;  /* live badge pulse dot */

    /* ── Transitions ────────────────────────────── */
    --transition-base: .2s ease;
    --transition-med:  .25s ease;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    font-family: var(--body);
    color: var(--charcoal);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
  }
  img{ display:block; max-width:100%; }
  button{ font-family: inherit; cursor:pointer; border:none; background:none; }
  a{ color:inherit; text-decoration:none; }

  /* -------- Gold shimmer utilities (matches index.html) -------- */
  @keyframes goldFlow{ 0%{ background-position: 0% 50%; } 100%{ background-position: 200% 50%; } }
  .gold-shimmer-text{
    background: var(--gold-grad); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: goldFlow var(--gold-shimmer-speed) linear infinite;
    will-change: background-position;
  }
  .gold-shimmer-fill{
    background: var(--gold-grad); background-size: 200% auto;
    animation: goldFlow var(--gold-shimmer-speed) linear infinite;
    will-change: background-position;
  }
  .gold-shimmer-border{
    position: relative; border: 1.5px solid transparent;
    background: linear-gradient(var(--section-bg, #F4F1E8), var(--section-bg, #F4F1E8)) padding-box,
                var(--gold-grad) border-box;
    background-size: 200% auto, 200% auto;
    animation: goldFlow var(--gold-shimmer-speed) linear infinite;
    will-change: background-position;
  }
  .shimmer-paused{ animation-play-state: paused !important; }
  @media (prefers-reduced-motion: reduce){
    .gold-shimmer-text, .gold-shimmer-fill, .gold-shimmer-border{ animation: none !important; }
  }