/* ============================================
   HADER هدير — Design Tokens
   Real estate marketing, KSA
   ============================================ */

/* Fonts via Google Fonts (Cairo + Almarai + Poppins) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;600;800;900&family=Almarai:wght@400;700;800&family=Poppins:wght@100;300;400;500;600;700&display=swap');

:root {
  /* ---------- PRIMARY COLORS ---------- */
  --hader-ocean-blue: #036EB2;    /* main brand color, CTAs */
  --hader-sky-blue:   #7DDBFD;    /* accents, gradients, hover */
  --hader-deep-navy:  #12183C;    /* headings, dark backgrounds */
  --hader-mist-gray:  #D9E0E2;    /* subtle backgrounds, dividers */

  /* ---------- SECONDARY COLORS ---------- */
  --hader-emerald:    #3A654A;
  --hader-clay:       #BD6C3D;
  --hader-sky-foam:   #CCEFFA;
  --hader-golden-sand:#E8DFC0;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg-1: #FFFFFF;                 /* canvas */
  --bg-2: #F6F8F9;                 /* subtle card */
  --bg-3: var(--hader-mist-gray);  /* section break */
  --bg-inverse: var(--hader-deep-navy);
  --bg-gradient: linear-gradient(135deg, #036EB2 0%, #7DDBFD 100%);
  --bg-gradient-soft: linear-gradient(180deg, #CCEFFA 0%, #FFFFFF 100%);

  /* ---------- SEMANTIC TEXT ---------- */
  --fg-1: var(--hader-deep-navy);        /* primary */
  --fg-2: #3A4266;                        /* secondary (navy @ 70%) */
  --fg-3: #6B7490;                        /* tertiary / meta */
  --fg-inverse: #FFFFFF;
  --fg-accent: var(--hader-ocean-blue);
  --fg-link: var(--hader-ocean-blue);

  /* ---------- BORDERS ---------- */
  --border-subtle: rgba(18, 24, 60, 0.08);
  --border-default: rgba(18, 24, 60, 0.14);
  --border-strong: rgba(18, 24, 60, 0.24);

  /* ---------- FONT FAMILIES ---------- */
  --font-display:  'Cairo', 'Almarai', system-ui, sans-serif;      /* EN headings */
  --font-display-ar:'Almarai', 'Cairo', system-ui, sans-serif;      /* AR headings */
  --font-body:     'Poppins', 'Cairo', system-ui, sans-serif;       /* EN body + sub */
  --font-body-ar:  'Almarai', 'Cairo', system-ui, sans-serif;       /* AR body + sub */

  /* ---------- TYPE SCALE (px; 1pt ≈ 1.333px) ---------- */
  --fs-display:  133px;  /* 100pt Cairo Bold — hero */
  --fs-h1:       85px;   /* 64pt Cairo Bold — section heading */
  --fs-h2:       56px;
  --fs-h3:       40px;
  --fs-sub:      37px;   /* 28pt Poppins Medium / Almarai Bold */
  --fs-lead:     24px;
  --fs-body:     24px;   /* 18pt Poppins Regular */
  --fs-small:    16px;
  --fs-micro:    13px;

  /* Mobile overrides */
  --fs-display-mobile: 75px; /* 56pt */
  --fs-h1-mobile:      53px; /* 40pt */

  /* ---------- TRACKING & LEADING ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-body:   0.01em; /* 10 units tracked in brand book */
  --tracking-wide:   0.08em;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.4;
  --leading-body:    1.6;

  /* ---------- RADII ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;   /* cards (min) */
  --radius-lg: 24px;   /* cards (max) */
  --radius-xl: 32px;   /* hero panels */
  --radius-pill: 9999px; /* buttons */

  /* ---------- SHADOWS (soft only, never behind the logo) ---------- */
  --shadow-xs: 0 1px 2px rgba(18, 24, 60, 0.04);
  --shadow-sm: 0 2px 8px rgba(18, 24, 60, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 24, 60, 0.08);
  --shadow-lg: 0 18px 48px rgba(18, 24, 60, 0.12);
  --shadow-glow: 0 20px 60px rgba(3, 110, 178, 0.28); /* ocean glow on gradient CTAs */

  /* ---------- SPACING (8-pt base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
}

/* ---------- BASE TYPE ---------- */
html, body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); }
html[dir="rtl"], html[lang="ar"] { font-family: var(--font-body-ar); }

h1, h2, h3, h4, h5, .display {
  font-family: var(--font-display);
  color: inherit;
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-tight);
  font-weight: 800;
}
body { color: var(--fg-1); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[lang="ar"] h1 { font-family: var(--font-display-ar); font-weight: 800; }

.display { font-size: var(--fs-display); line-height: var(--leading-tight); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.sub-heading, .subhead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: var(--leading-snug);
  color: var(--fg-2);
}
html[dir="rtl"] .sub-heading, html[dir="rtl"] .subhead { font-family: var(--font-display-ar); font-weight: 700; }

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg-2);
}

small, .small { font-size: var(--fs-small); letter-spacing: var(--tracking-body); color: var(--fg-3); }
.micro { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); }

/* Responsive scale on the hero */
@media (max-width: 768px) {
  .display { font-size: var(--fs-display-mobile); }
  h1 { font-size: var(--fs-h1-mobile); }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: 0.01em;
  padding: 14px 28px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--hader-ocean-blue); color: var(--fg-inverse); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: linear-gradient(135deg, #036EB2, #1E97D6); box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.btn-gradient { background: var(--bg-gradient); color: var(--fg-inverse); box-shadow: var(--shadow-sm); }
.btn-gradient:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.btn-outline-dark { background: transparent; color: var(--hader-deep-navy); border-color: var(--border-strong); }
.btn-outline-dark:hover { background: var(--bg-2); border-color: var(--hader-ocean-blue); color: var(--hader-ocean-blue); }
.btn-ghost { background: transparent; color: var(--hader-ocean-blue); }
.btn-ghost:hover { background: var(--hader-sky-foam); }

.btn:active { transform: translateY(0); }

/* Card */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Utility classes */
.bg-ocean { background: var(--hader-ocean-blue); color: #fff; }
.bg-navy  { background: var(--hader-deep-navy); color: #fff; }
.bg-gradient { background: var(--bg-gradient); color: #fff; }
.bg-foam  { background: var(--hader-sky-foam); color: var(--hader-deep-navy); }
.bg-mist  { background: var(--hader-mist-gray); }