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

  /* -------- 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:             #304C86;
    --navy-deep:        #213765;
    --navy-dark:        #0A1F44;              /* 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 */
    --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 ─────────────────────────────── */
    --display: 'Crimson Pro', 'Times New Roman', serif;
    --body:    'Lato', 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 */

    /* ── Button Tokens ──────────────────────────── */
    --btn-padding-y:    14px;
    --btn-padding-x:    32px;
    --btn-radius:       6px;
    --btn-border-width: 1.5px;

    /* ── 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:          #122e62;  /* 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; }