/* ==========================================================================
   REMAX Hinterland — Colors & Type
   Source of truth for brand foundations. Import this file wherever the
   design system is consumed.
   ========================================================================== */

/* ---- Brand fonts (self-hosted) ---------------------------------------
   Gotham is the REMAX AU body/UI family (per brand guidelines).
   "Breathing" is the REMAX editorial display/script face supplied by the
   brand team — used for one-word softeners ("welcome", "thankyou") and
   large editorial moments. No Google Fonts fallback; this IS the brand.
   ----------------------------------------------------------------------- */

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Light.ttf') format('truetype'),
       url('fonts/Gotham-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Book.ttf') format('truetype'),
       url('fonts/Gotham-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Medium.ttf') format('truetype'),
       url('fonts/Gotham-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Bold.ttf') format('truetype'),
       url('fonts/Gotham-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham_Ultra.ttf') format('truetype'),
       url('fonts/Gotham_Ultra.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* REMAX "Breathing" — editorial display face (source: 3197-font.ttf) */
  font-family: 'Breathing';
  src: url('fonts/3197-font.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =========================================================
     COLOR — primary palette (REMAX 2025 Brand Evolution)
     ========================================================= */
  --remax-red:          #ff1200;   /* Pantone 185 C   */
  --remax-blue:         #0043ff;   /* Pantone 286 C   */
  --remax-dark-red:     #660000;   /* Pantone 188 C   */
  --remax-dark-blue:    #000e35;   /* Pantone 295 C   */
  --remax-cream:        #f7f5ee;   /* Pantone Warm Grey 1 C */
  --remax-black:        #000000;   /* Pantone Black 6 */
  --remax-white:        #ffffff;

  /* =========================================================
     COLOR — semantic surface & ink
     Hinterland leans on DARK BLUE (not red) as its flagship
     surface. Red is an accent/identifier, not a field.
     ========================================================= */
  --bg:                 var(--remax-cream);         /* default page     */
  --bg-inverse:         var(--remax-dark-blue);     /* hero, footer     */
  --bg-elevated:        #ffffff;                    /* cards on cream   */
  --bg-subtle:          #eceae3;                    /* cream -1 step    */
  --bg-subtle-2:        #e2dfd4;                    /* cream -2 step    */

  --fg:                 var(--remax-dark-blue);     /* body on light    */
  --fg-muted:           #4a547a;                    /* meta, labels     */
  --fg-subtle:          #7a839f;                    /* hints, disabled  */
  --fg-inverse:         var(--remax-cream);         /* body on dark     */
  --fg-inverse-muted:   #a8afc4;                    /* muted on dark    */

  --accent:             var(--remax-red);           /* CTAs, highlights */
  --accent-pressed:     var(--remax-dark-red);      /* pressed / hover  */

  --border:             #d9d5c6;                    /* subtle divider   */
  --border-strong:      #b0a98f;
  --border-inverse:     #1c2549;                    /* divider on dark  */

  --success:            #1f7a4c;
  --warning:            #b87000;
  --danger:             var(--remax-red);

  /* =========================================================
     TYPE — families
     ========================================================= */
  --font-display:       'Gotham', 'Arial Black', system-ui, sans-serif;
                                                     /* heavy UI headlines / numerics */
  --font-sans:          'Gotham', 'Helvetica Neue', Arial, system-ui, sans-serif;
                                                     /* body / UI                     */
  --font-editorial:     'Breathing', 'Gotham', 'Times New Roman', Georgia, serif;
                                                     /* REMAX "breathing" script face */
  --font-serif:         var(--font-editorial);       /* legacy alias — prefer --font-editorial */
  --font-mono:          ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* =========================================================
     TYPE — scale (rem = 16px base)
     ========================================================= */
  --fs-12: 0.75rem;   --lh-12: 1.05rem;
  --fs-13: 0.8125rem; --lh-13: 1.15rem;
  --fs-14: 0.875rem;  --lh-14: 1.25rem;
  --fs-16: 1rem;      --lh-16: 1.5rem;
  --fs-18: 1.125rem;  --lh-18: 1.65rem;
  --fs-20: 1.25rem;   --lh-20: 1.75rem;
  --fs-24: 1.5rem;    --lh-24: 2rem;
  --fs-32: 2rem;      --lh-32: 2.35rem;
  --fs-40: 2.5rem;    --lh-40: 2.8rem;
  --fs-56: 3.5rem;    --lh-56: 3.7rem;
  --fs-80: 5rem;      --lh-80: 5rem;

  /* =========================================================
     TYPE — weights
     ========================================================= */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* =========================================================
     TYPE — tracking (letter-spacing)
     ========================================================= */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;   /* small caps labels, eyebrows     */
  --tracking-x-wide:  0.22em;   /* "LICENSED REAL ESTATE AGENT"    */

  /* =========================================================
     SPACING — 4pt grid
     ========================================================= */
  --sp-1:  0.25rem;    --sp-2:  0.5rem;    --sp-3:  0.75rem;
  --sp-4:  1rem;       --sp-5:  1.25rem;   --sp-6:  1.5rem;
  --sp-8:  2rem;       --sp-10: 2.5rem;    --sp-12: 3rem;
  --sp-16: 4rem;       --sp-20: 5rem;      --sp-24: 6rem;
  --sp-32: 8rem;

  /* =========================================================
     RADII — nearly square; REMAX brand reads clean + bold
     ========================================================= */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;    /* buttons, inputs            */
  --radius-md:   6px;    /* cards                      */
  --radius-lg:   12px;   /* feature tiles              */
  --radius-pill: 999px;  /* agent tag, status          */

  /* =========================================================
     ELEVATION / SHADOW
     Tight, conservative. Real-estate brands lean on sharp
     photography, not soft UI shadows.
     ========================================================= */
  --shadow-xs: 0 1px 1px rgba(0, 14, 53, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 14, 53, 0.06), 0 1px 1px rgba(0,14,53,0.04);
  --shadow-md: 0 8px 20px -8px rgba(0, 14, 53, 0.18);
  --shadow-lg: 0 24px 48px -16px rgba(0, 14, 53, 0.22);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.08);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:      120ms;
  --dur-normal:    220ms;
  --dur-slow:      420ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1280px;
  --container-max:    1440px;
}

/* ==========================================================================
   SEMANTIC TEXT STYLES
   Use these as your default type presets.
   ========================================================================== */

.t-display {   /* giant hero, rare  */
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, var(--fs-80));
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-transform: none;
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 4vw, var(--fs-56));
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-40);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--fg);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: 1.3;
  color: var(--fg);
}

.t-editorial {   /* "welcome" / "happy clients" — REMAX Breathing */
  font-family: var(--font-editorial);
  font-style: normal;
  font-weight: var(--fw-regular);
  font-size: clamp(2rem, 4vw, var(--fs-56));
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
}

.t-eyebrow {     /* "LICENSED REAL ESTATE AGENT" */
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tracking-x-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-label {       /* small caps label, field label */
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--fg);
  text-wrap: pretty;
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  color: var(--fg);
  text-wrap: pretty;
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--fg);
}

.t-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-13);
  line-height: 1.4;
  color: var(--fg-muted);
}

.t-price {       /* $2,850,000 — key real-estate figure */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-40);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
}