/* =============================================================================
   Madar Design System — Tokens
   Architecture · Orbit

   Import this file first. It declares:
     1. @font-face rules (Pointart, Almarai, Poppins)
     2. :root CSS custom properties (colors, type, spacing, radii, shadows, motion)
     3. Base element resets and typographic defaults
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Webfonts
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Pointart';
  src: url('../fonts/pointart-sans-serif-bold.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarai';
  src: url('../fonts/Almarai-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Almarai';
  src: url('../fonts/Almarai-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Almarai';
  src: url('../fonts/Almarai-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Almarai';
  src: url('../fonts/Almarai-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. Design Tokens
   --------------------------------------------------------------------------- */

:root {

  /* --- Brand palette -------------------------------------------------------- */
  --madar-green:  #232d22;   /* deep architectural green — primary brand         */
  --madar-yellow: #d6c79e;   /* warm sand / desert gold — accent                 */
  --madar-white:  #f9f9f9;   /* soft off-white surface — never pure #fff         */
  --madar-black:  #0f110f;   /* near-black, faint green tint                     */
  --madar-text:   #293428;   /* body copy — green-leaning charcoal               */
  --madar-border: #eef2ee;   /* hairline borders and dividers                    */

  /* --- Green tonal scale --------------------------------------------------- */
  --green-900: #161d15;
  --green-800: #1c241b;
  --green-700: #232d22;   /* = --madar-green */
  --green-600: #2d3a2c;
  --green-500: #3d4d3b;
  --green-300: #8a988a;
  --green-200: #c2cbc2;
  --green-100: #e3e8e3;
  --green-50:  #f1f4f1;

  /* --- Yellow tonal scale -------------------------------------------------- */
  --yellow-700: #ad9e74;
  --yellow-600: #c0b287;
  --yellow-500: #d6c79e;   /* = --madar-yellow */
  --yellow-400: #e0d4b1;
  --yellow-300: #ebe2c7;
  --yellow-200: #f3eeda;
  --yellow-100: #faf6ec;

  /* --- Semantic surfaces --------------------------------------------------- */
  --bg:           var(--madar-white);
  --bg-alt:       #f3f3f1;
  --bg-inverse:   var(--madar-green);
  --bg-accent:    var(--madar-yellow);
  --surface:      #ffffff;
  --surface-2:    var(--green-50);
  --surface-3:    #ecefea;

  /* --- Foregrounds --------------------------------------------------------- */
  --fg:           var(--madar-text);
  --fg-strong:    var(--madar-black);
  --fg-muted:     #5a6659;
  --fg-subtle:    #8a988a;
  --fg-on-dark:   var(--madar-white);
  --fg-on-accent: var(--madar-green);

  /* --- Borders / dividers -------------------------------------------------- */
  --border:         var(--madar-border);
  --border-strong:  #d8ded8;
  --border-dark:    rgba(255, 255, 255, 0.12);

  /* --- Brand shortcuts ----------------------------------------------------- */
  --brand:     var(--madar-green);
  --brand-fg:  var(--madar-white);
  --accent:    var(--madar-yellow);
  --accent-fg: var(--madar-green);

  /* --- Type families ------------------------------------------------------- */
  --font-display: 'Pointart', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-body-ar: 'Almarai', 'Tajawal', system-ui, sans-serif;
  --font-body-en: 'Poppins', 'Almarai', system-ui, sans-serif;
  --font-body:    var(--font-body-ar);   /* RTL default; overridden per [dir] */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Type scale ---------------------------------------------------------- */
  --fs-hero:  clamp(56px, 9vw, 140px);
  --fs-h1:    clamp(40px, 5.5vw, 80px);
  --fs-h2:    clamp(32px, 3.8vw, 56px);
  --fs-h3:    clamp(24px, 2.4vw, 36px);
  --fs-h4:    20px;
  --fs-lead:  20px;
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-tiny:  12px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.65;

  --tracking-display: -0.01em;
  --tracking-eyebrow:  0.22em;

  /* --- Spacing scale (4px base) -------------------------------------------- */
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Radii --------------------------------------------------------------- */
  --r-none: 0px;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* --- Shadows — restrained, architectural --------------------------------- */
  --shadow-1: 0 1px 2px rgba(15,17,15,0.04), 0 1px 1px rgba(15,17,15,0.03);
  --shadow-2: 0 6px 16px rgba(15,17,15,0.06), 0 2px 4px rgba(15,17,15,0.04);
  --shadow-3: 0 24px 48px rgba(15,17,15,0.10), 0 8px 16px rgba(15,17,15,0.05);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* --- Motion — slow, orbital, arc-eased ----------------------------------- */
  --ease-orbit: cubic-bezier(0.65, 0, 0.15, 1);
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;
  --dur-orbit:  18s;

  /* --- Layout -------------------------------------------------------------- */
  --container:    1280px;
  --container-xl: 1440px;
  --gutter:       clamp(16px, 4vw, 64px);
}

/* ---------------------------------------------------------------------------
   3. Base resets & typographic defaults
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Font family switching per language */
[lang|=ar], [lang|=ar] body { font-family: var(--font-body-ar); }
[lang|=en], [lang|=en] body { font-family: var(--font-body-en); }

/* Headings — Pointart display, all-caps, tight */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  margin: 0;
  font-weight: 800;
}

h1 { font-size: var(--fs-h1); text-transform: uppercase; }
h2 { font-size: var(--fs-h2); text-transform: uppercase; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; text-transform: none; }

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover:not(.btn):not(.m-cta-pill):not(.m-brand):not(.m-nav-links a) { opacity: 0.65; }

/* Focus-visible styles for accessibility */
*:focus-visible {
  outline: 3px solid var(--madar-yellow);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--madar-yellow);
  outline-offset: 2px;
}

img { display: block; max-width: 100%; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
}

::selection {
  background: var(--madar-yellow);
  color: var(--madar-green);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}