/* =============================================================
   AMC (AL-ABDAA AL-MSHREQ) — Design Tokens
   Building Contracting L.L.C · Dubai, UAE
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700&family=Amiri:wght@400;700&display=swap');

:root {
  /* -------- BRAND COLORS -------- */
  --color-brand-primary:        #172a59;   /* deep navy — headings, structural blocks */
  --color-brand-primary-deep:   #0e1c40;   /* deeper navy — footer, hover/press */
  --color-brand-accent:         #ba9b64;   /* champagne gold — CTAs, accents, dividers */
  --color-brand-accent-hover:   #a88a53;   /* gold hover */
  --color-brand-dark:           #222222;   /* near-black */
  --color-brand-light:          #f8f9fa;   /* off-white section bg */
  --color-brand-text:           #333333;   /* default body text */
  --color-white:                #ffffff;
  --color-black:                #000000;

  /* -------- SEMANTIC SURFACES -------- */
  --surface-page:        #ffffff;
  --surface-muted:       var(--color-brand-light);
  --surface-inverse:     var(--color-brand-primary);
  --surface-inverse-deep:var(--color-brand-primary-deep);

  /* -------- FOREGROUND -------- */
  --fg-1:        var(--color-brand-primary);   /* strong (headings) */
  --fg-2:        var(--color-brand-text);      /* body */
  --fg-3:        rgba(51, 51, 51, 0.75);       /* secondary */
  --fg-4:        rgba(51, 51, 51, 0.6);        /* tertiary, meta */
  --fg-accent:   var(--color-brand-accent);
  --fg-on-dark:  #ffffff;
  --fg-on-dark-2:rgba(255, 255, 255, 0.85);
  --fg-on-dark-3:rgba(255, 255, 255, 0.70);
  --fg-on-dark-4:rgba(255, 255, 255, 0.55);

  /* -------- BORDERS -------- */
  --border-subtle:  rgba(23, 42, 89, 0.10);    /* hairlines on light bg */
  --border-strong:  rgba(23, 42, 89, 0.25);
  --border-on-dark: rgba(255, 255, 255, 0.15);
  --border-accent:  var(--color-brand-accent);

  /* -------- SHADOWS -------- */
  --shadow-card:     0 12px 30px -12px rgba(0, 0, 0, 0.18);
  --shadow-elevated: 0 20px 50px -20px rgba(23, 42, 89, 0.35);
  --shadow-soft:     0 8px 30px -12px rgba(23, 42, 89, 0.18);
  --shadow-xl:       0 30px 60px -25px rgba(14, 28, 64, 0.45);

  /* -------- RADII (intentionally minimal — brand is sharp/architectural) -------- */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-pill:  999px;   /* used ONLY on language toggle, nav pills, chip filters */

  /* -------- SPACING -------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1280px;
  --container-pad-x: 48px;
  --header-height: 84px;

  /* Section vertical rhythm */
  --section-py:    96px;     /* mobile */
  --section-py-lg: 128px;    /* desktop */

  /* -------- TYPOGRAPHY — FAMILIES -------- */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-ar-display:'Amiri', 'Cairo', serif;
  --font-ar-body:  'Cairo', 'Tajawal', var(--font-body);

  /* -------- TYPOGRAPHY — SCALE (clamp for fluid) -------- */
  --fs-hero:   clamp(40px, 6.5vw, 84px);   /* hero h1 */
  --fs-h1:     clamp(36px, 4.5vw, 60px);
  --fs-h2:     clamp(32px, 3.6vw, 48px);   /* section titles */
  --fs-h3:     24px;
  --fs-h4:     20px;
  --fs-stat:   clamp(48px, 5vw, 64px);     /* the big gold numbers */
  --fs-body-lg:18px;
  --fs-body:   16px;
  --fs-sm:     14px;
  --fs-xs:     12px;
  --fs-eyebrow:12px;                       /* uppercase tracked labels */

  /* -------- LETTER SPACING -------- */
  --ls-tight:    -0.01em;   /* headings */
  --ls-eyebrow:  0.30em;    /* the signature wide tracking */
  --ls-cta:      0.18em;    /* buttons */
  --ls-meta:     0.22em;    /* role labels, addresses */

  /* -------- LINE HEIGHTS -------- */
  --lh-hero:   1.05;
  --lh-heading:1.15;
  --lh-body:   1.65;
  --lh-tight:  1.25;

  /* -------- MOTION -------- */
  --ease-standard:    cubic-bezier(0.22, 1, 0.36, 1);   /* SectionReveal easing */
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:    200ms;
  --duration-medium:  300ms;
  --duration-slow:    500ms;
  --duration-image:   700ms;   /* image scale on hover */
  --duration-reveal:  700ms;
  --duration-marquee: 35s;
  --hover-lift:       -2px;    /* translate-y on hover */
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  line-height: var(--lh-heading);
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p { margin: 0; line-height: var(--lh-body); }

a { color: inherit; text-decoration: none; transition: color var(--duration-medium); }
a:hover { color: var(--color-brand-accent); }

/* Arabic / RTL */
[lang="ar"] body, [dir="rtl"] body { font-family: var(--font-ar-body); }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: var(--font-ar-display);
}

/* =============================================================
   SEMANTIC UTILITY CLASSES (mirror the codebase's tailwind utilities)
   ============================================================= */

.amc-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brand-accent);
}

.amc-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-tight);
  color: var(--color-white);
}

.amc-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-brand-primary);
}

.amc-meta {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
}

.amc-container {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--container-pad-x);
}