/* ==========================================================================
   GROWLAND MARKETING — Design System
   Derived from the Growland logo: orange "G + roof" monogram on a black field,
   white "GROWLAND" wordmark, orange "MARKETING" wordmark, warm gold underglow.
   ========================================================================== */

:root {
  /* --- PRIMARY — Growland Orange ------------------------------------------
     Sampled from the monogram and the "MARKETING" wordmark. This is the only
     colour permitted to carry a call to action. */
  --gl-orange-50:  #fff4ed;
  --gl-orange-100: #ffe6d5;
  --gl-orange-200: #ffc9aa;
  --gl-orange-300: #ffa474;
  --gl-orange-400: #ff7a3d;
  --gl-orange-500: #f26b21; /* ← brand primary */
  --gl-orange-600: #e35411;
  --gl-orange-700: #bc3e0e;
  --gl-orange-800: #953314;
  --gl-orange-900: #782d13;
  --gl-orange-950: #411307;

  --gl-primary:       var(--gl-orange-500);
  --gl-primary-hover: var(--gl-orange-600);
  --gl-primary-press: var(--gl-orange-700);

  /* --- SECONDARY — Ink -----------------------------------------------------
     The logo's field. Unlike a typical property portal we treat black as a
     *surface*, not just text — dark sections are the brand's signature. */
  --gl-ink-950: #050506;
  --gl-ink-900: #0a0a0c; /* ← brand secondary / logo field */
  --gl-ink-850: #121214;
  --gl-ink-800: #1a1a1e;
  --gl-ink-700: #26262b;
  --gl-ink-600: #3a3a41;
  --gl-ink-500: #55555e;
  --gl-ink-400: #7a7a85;
  --gl-ink-300: #a6a6af;
  --gl-ink-200: #cfcfd5;
  --gl-ink-100: #e8e8ec;
  --gl-ink-50:  #f5f5f7;

  --gl-secondary: var(--gl-ink-900);

  /* --- ACCENT — Ember gold -------------------------------------------------
     The warm glow beneath the "MARKETING" wordmark. Highlights, gradients,
     rating stars, premium badges. Never a primary CTA. */
  --gl-ember-300: #ffd9a0;
  --gl-ember-400: #ffc46b;
  --gl-ember-500: #ffa53d; /* ← brand accent */
  --gl-ember-600: #f08a1c;

  --gl-accent: var(--gl-ember-500);

  /* --- CAMPAIGN — Azaadi green ---------------------------------------------
     Pakistan-flag green, for the Independence Day offer only: the hero
     highlight and its single CTA. Deliberately outside the brand palette, so
     retiring the campaign is a matter of removing the two --azaadi rules
     rather than untangling it from the orange. Kept dark enough to clear
     WCAG AA against white text. */
  --gl-azaadi-500: #0b6e3c; /* ← campaign base */
  --gl-azaadi-600: #095c32;
  --gl-azaadi-700: #074a28;
  --gl-shadow-azaadi: 0 6px 20px -6px rgba(11, 110, 60, .55);

  /* Signature gradients pulled straight from the logo's underglow */
  --gl-grad-ember: linear-gradient(90deg,
      transparent 0%, var(--gl-orange-500) 20%,
      var(--gl-ember-400) 50%, var(--gl-orange-500) 80%, transparent 100%);
  --gl-grad-primary: linear-gradient(135deg, var(--gl-orange-500) 0%, var(--gl-ember-500) 100%);
  --gl-grad-ink: linear-gradient(180deg, var(--gl-ink-900) 0%, var(--gl-ink-850) 100%);
  --gl-grad-scrim: linear-gradient(180deg,
      rgba(5,5,6,0) 0%, rgba(5,5,6,.55) 55%, rgba(5,5,6,.92) 100%);

  /* --- SEMANTIC — availability states -------------------------------------- */
  --gl-available: #16a34a;
  --gl-available-bg: #ecfdf3;
  --gl-reserved:  #d97706;
  --gl-reserved-bg: #fffaeb;
  --gl-sold:      #dc2626;
  --gl-sold-bg:   #fef3f2;
  --gl-info:      #2563eb;
  --gl-info-bg:   #eff6ff;

  /* --- SURFACES ------------------------------------------------------------ */
  --gl-bg:            #ffffff;
  --gl-bg-subtle:     var(--gl-ink-50);
  --gl-bg-inverse:    var(--gl-ink-900);
  --gl-border:        #e6e6ea;
  --gl-border-strong: var(--gl-ink-200);
  --gl-text:          var(--gl-ink-900);
  --gl-text-muted:    var(--gl-ink-500);
  --gl-text-inverse:  #ffffff;
  --gl-text-inverse-muted: rgba(255, 255, 255, .64);

  /* --- TYPOGRAPHY ----------------------------------------------------------
     Manrope — geometric-humanist, holds up under the tight tracking this
     sector's premium developers use. Headings sit at 500–600, never 800:
     restraint reads as confidence. */
  --gl-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gl-font-num: "Manrope", ui-sans-serif, system-ui, sans-serif;

  /* Fluid display scale — clamp(min, preferred, max) */
  --gl-fs-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.6875rem); /* 40 → 75px */
  --gl-fs-h1:      clamp(2.125rem, 1.2rem + 3.7vw, 4rem);     /* 34 → 64px */
  --gl-fs-h2:      clamp(1.75rem, 1.15rem + 2.4vw, 3rem);     /* 28 → 48px */
  --gl-fs-h3:      clamp(1.375rem, 1.05rem + 1.3vw, 1.75rem); /* 22 → 28px */
  --gl-fs-h4:      clamp(1.125rem, 1rem + .5vw, 1.375rem);    /* 18 → 22px */
  --gl-fs-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);   /* 17 → 20px */
  --gl-fs-body:    1rem;
  --gl-fs-sm:      .875rem;
  --gl-fs-xs:      .75rem;
  --gl-fs-eyebrow: .8125rem;

  /* Negative tracking is the single most brand-defining type decision here */
  --gl-track-display: -.045em;
  --gl-track-heading: -.035em;
  --gl-track-body:    -.011em;
  --gl-track-eyebrow: .14em;

  --gl-lh-display: 1.02;
  --gl-lh-heading: 1.12;
  --gl-lh-body:    1.65;

  /* --- SPACING — 4px base -------------------------------------------------- */
  --gl-sp-1: .25rem;  --gl-sp-2: .5rem;   --gl-sp-3: .75rem;  --gl-sp-4: 1rem;
  --gl-sp-5: 1.25rem; --gl-sp-6: 1.5rem;  --gl-sp-8: 2rem;    --gl-sp-10: 2.5rem;
  --gl-sp-12: 3rem;   --gl-sp-16: 4rem;   --gl-sp-20: 5rem;   --gl-sp-24: 6rem;

  /* Section rhythm — deliberately roomier than the reference site's flat 60px */
  --gl-section-y:    clamp(4rem, 2.5rem + 6vw, 8rem);
  --gl-section-y-sm: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  --gl-container:    1240px;
  --gl-container-wide: 1440px;
  --gl-gutter:       clamp(1rem, .55rem + 1.9vw, 2.5rem);

  /* --- RADII --------------------------------------------------------------- */
  --gl-r-sm: 6px;  --gl-r-md: 10px; --gl-r-lg: 16px;
  --gl-r-xl: 24px; --gl-r-2xl: 32px; --gl-r-pill: 999px;

  /* --- ELEVATION — warm-tinted, never neutral grey ------------------------- */
  --gl-shadow-xs: 0 1px 2px rgba(10, 10, 12, .06);
  --gl-shadow-sm: 0 2px 8px rgba(10, 10, 12, .07);
  --gl-shadow-md: 0 8px 24px rgba(10, 10, 12, .09);
  --gl-shadow-lg: 0 18px 48px rgba(10, 10, 12, .13);
  --gl-shadow-xl: 0 32px 72px rgba(10, 10, 12, .18);
  --gl-shadow-primary: 0 10px 30px rgba(242, 107, 33, .32);
  --gl-ring: 0 0 0 3px rgba(242, 107, 33, .38);

  /* --- MOTION -------------------------------------------------------------- */
  --gl-ease: cubic-bezier(.22, 1, .36, 1);
  --gl-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --gl-dur-fast: 140ms;
  --gl-dur: 240ms;
  --gl-dur-slow: 520ms;

  --gl-header-h: 76px;
  --gl-z-header: 100;
  --gl-z-drawer: 200;
  --gl-z-modal: 300;
}

/* Dark sections opt in by class; the whole palette flips coherently. */
.gl-dark {
  --gl-bg: var(--gl-ink-900);
  --gl-bg-subtle: var(--gl-ink-850);
  --gl-border: rgba(255, 255, 255, .1);
  --gl-border-strong: rgba(255, 255, 255, .2);
  --gl-text: #ffffff;
  --gl-text-muted: rgba(255, 255, 255, .64);
  color-scheme: dark;
}