/* ============================================================
   ARAZI DESIGN SYSTEM — Colors + Type
   Premium blue & white. Coastal, editorial, precise — built for
   Karachi's waterfront real estate. Deep marine, crisp white,
   a sparing champagne-gold for premium moments.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------- COLORS ---------- */
  --paper:       #FCFDFE;
  --paper-soft:  #F1F6FB;
  --paper-deep:  #E4EDF5;
  --line:        #D5E0EC;
  --line-soft:   #E8F0F7;

  --ink:         #0C2236;
  --ink-2:       #2B4A66;
  --ink-3:       #5E7991;
  --ink-4:       #9BB1C6;

  --marine:      #103E64;
  --marine-ink:  #0A2B47;
  --marine-soft: #E3EDF5;
  --marine-line: #C2D5E6;

  --azure:       #2E86C9;
  --azure-soft:  #DCEBF7;

  --gold:        #BE9A4E;
  --gold-ink:    #9C7C36;
  --gold-soft:   #F3EAD3;

  --sea-deep:    #103E64;
  --sea:         #2E86C9;
  --sea-light:   #9CC4E2;
  --sky:         #CFE3F2;
  --sand:        #E9DEC6;
  --foam:        #EAF3FA;

  --success:     #2E8B6F;
  --warn:        #C2922F;
  --danger:      #B5462F;
  --info:        #2E86C9;

  --ink-dark:    #081726;
  --ink-dark-2:  #0C2236;

  /* Legacy aliases */
  --pine: var(--marine); --pine-ink: var(--marine-ink); --pine-soft: var(--marine-soft); --pine-line: var(--marine-line);
  --clay: var(--gold); --clay-ink: var(--gold-ink); --clay-soft: var(--gold-soft);
  --land: var(--sea-light); --water: var(--sea); --water-deep: var(--sea-deep); --contour: var(--marine-line); --road: var(--gold);

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif:  'Spectral', 'Hoefler Text', Georgia, serif;
  --font-sans:   'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'Space Mono', 'SF Mono', ui-monospace, monospace;

  /* Sizes */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-36: 36px;
  --fs-48: 48px; --fs-64: 64px; --fs-84: 84px;

  /* Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Leading */
  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* Tracking */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal: 0em;
  --tr-wide:   0.04em;
  --tr-caps:   0.16em;

  /* ---------- SPACING (4px base) ---------- */
  --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; --sp-24: 96px; --sp-32: 128px;

  /* ---------- RADII ---------- */
  --radius-xs:  2px;  --radius-sm:  4px;  --radius-md:  6px;
  --radius-lg:  10px; --radius-xl:  14px; --radius-2xl: 20px;
  --radius-full: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 0 rgba(12,34,54,0.04), 0 1px 2px rgba(12,34,54,0.05);
  --shadow-sm: 0 1px 2px rgba(12,34,54,0.06), 0 2px 6px rgba(12,34,54,0.05);
  --shadow-md: 0 2px 4px rgba(12,34,54,0.07), 0 8px 18px rgba(12,34,54,0.08);
  --shadow-lg: 0 12px 34px rgba(12,34,54,0.14), 0 2px 6px rgba(12,34,54,0.06);
  --ring-focus: 0 0 0 3px rgba(46,134,201,0.28);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ============================================================
   BASE + SEMANTIC TYPE CLASSES
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h-display {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(48px, 7vw, var(--fs-84));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.h-display em { font-style: italic; font-weight: var(--fw-regular); }

.h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-48);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.h1 em { font-style: italic; font-weight: var(--fw-regular); }

.h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

.h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

.h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--ink-3);
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}

.body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--ink-2);
}

.meta {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--ink-3);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: 0;
  color: var(--ink-2);
}
.coord {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.pull-quote {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--ink);
}