/* =========================================================================
   SAOUR DESIGN SYSTEM — Colors & Type
   ========================================================================= */

/* ---- FONTS — Thmanyah family (Arabic-first, supports Latin) ------------- */

@font-face {
  font-family: "Thmanyah Serif Text";
  src: url("./fonts/thmanyahseriftext-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Text";
  src: url("./fonts/thmanyahseriftext-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Text";
  src: url("./fonts/thmanyahseriftext-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Text";
  src: url("./fonts/thmanyahseriftext-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Text";
  src: url("./fonts/thmanyahseriftext-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Serif Display — used for UI "chrome" (labels, buttons, inputs, meta, nav). */
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("./fonts/thmanyahserifdisplay-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("./fonts/thmanyahserifdisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("./fonts/thmanyahserifdisplay-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("./fonts/thmanyahserifdisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("./fonts/thmanyahserifdisplay-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* (Thmanyah Sans is unused — files relocated to fonts/_unused/.) */

/* ---- TOKENS ------------------------------------------------------------- */

:root {
  /* — Brand palette ——————————————————————————————————————————————— */
  /* Saour leaf — primary brand color, used for display headlines and the
     orbit ring. Vivid, optimistic mid-green; signature of the brand. */
  --saour-leaf: rgb(79, 194, 126);            /* #4FC27E */
  --saour-leaf-soft: rgb(115, 228, 160);      /* #73E4A0 — orbit outline */
  --saour-leaf-deep: rgb(125, 184, 123);      /* #7DB87B — secondary dot  */

  /* Saour blush — emotional accent (chat bubbles, hover CTAs, "تحدث").     */
  --saour-blush: rgb(255, 87, 119);           /* #FF5777 — chat bubble    */
  --saour-blush-soft: rgb(255, 126, 136);     /* #FF7E88 — link text      */
  --saour-blush-shadow: rgba(130, 29, 29, 0.25);

  /* Saour sun — warm accent (button hover, large yellow disc).             */
  --saour-sun: rgb(255, 194, 71);             /* #FFC247               */
  --saour-sun-soft: rgb(255, 170, 133);       /* #FFAA85 — orbit dot   */

  /* — Surfaces ——————————————————————————————————————————————————— */
  --bg-page-top: rgb(230, 239, 238);          /* #E6EFEE — mint        */
  --bg-page-bot: rgb(226, 233, 223);          /* #E2E9DF — sage        */
  --bg-page: linear-gradient(180deg, var(--bg-page-top) 0%, var(--bg-page-bot) 100%);
  --bg-page-edge: rgb(209, 218, 219);         /* outer letterbox       */
  --bg-card: rgb(241, 246, 246);              /* card fill             */
  --bg-card-edge: rgb(249, 254, 254);         /* card stroke (almost-white) */
  --bg-stage: rgb(21, 22, 21);                /* dark "stage" disc     */
  --bg-stage-deep: rgb(9, 38, 41);            /* fixed dock bar        */
  --bg-deep-navy: rgb(13, 37, 71);            /* avatar fallback       */

  /* — Foreground ————————————————————————————————————————————————— */
  --fg-1: rgb(32, 32, 32);                    /* primary text          */
  --fg-2: rgb(84, 84, 84);                    /* hairline/secondary    */
  --fg-3: rgb(153, 153, 153);                 /* meta / captions       */
  --fg-inverse: rgb(255, 255, 255);           /* on-dark               */
  --fg-leaf: var(--saour-leaf);
  --fg-blush: var(--saour-blush);
  --fg-blush-soft: var(--saour-blush-soft);

  /* — Strokes ————————————————————————————————————————————————————— */
  --stroke-hairline: rgba(0, 0, 0, 0.05);     /* button hairline       */
  --stroke-card: rgb(255, 255, 255);          /* white edge on card    */
  --stroke-orbit: var(--saour-leaf-soft);     /* large green orbit ring */
  --stroke-comet: rgb(84, 84, 84);            /* hand-drawn squiggle   */

  /* — Shadows ————————————————————————————————————————————————————— */
  --shadow-card: 0 20px 50px 0 rgba(94, 119, 97, 0.10);
  --shadow-glass: 10px 90px 50px -32px rgba(32, 32, 32, 0.40);
  --shadow-blush: 0 55px 60px -30px var(--saour-blush);    /* color-bleed glow */

  /* — Radii ———————————————————————————————————————————————————————— */
  --radius-page: 20px;                        /* outer stage radius    */
  --radius-card: 30px;                        /* glass / customer card */
  --radius-pill: 36px;                        /* small action pill     */
  --radius-button: 34px;                      /* CTA capsule           */
  --radius-dock: 40px;                        /* fixed bottom dock     */
  --radius-circle: 9999px;

  /* — Spacing ————————————————————————————————————————————————————— */
  --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;

  /* — Type families —————————————————————————————————————————————————
       CONTENT (titles, headlines, h1, body copy) → Thmanyah Serif Text.
       CHROME  (labels, buttons, inputs, meta, nav, footer links) → Serif Display.
       display/text both map to Serif Text because nearly all of those refs are
       content; the few chrome elements are switched to --font-chrome in CSS. */
  --font-display: "Thmanyah Serif Text", "Tajawal", "Amiri", serif;     /* content */
  --font-text:    "Thmanyah Serif Text", "Tajawal", "Amiri", serif;     /* content */
  --font-chrome:  "Thmanyah Serif Display", "Tajawal", "Amiri", serif;  /* UI chrome */
  --font-sans:    "Thmanyah Serif Display", "Tajawal", system-ui, -apple-system, sans-serif;

  /* — Type scale — display ———————————————————————————————————————— */
  /* 128 / 64 / 60 — the three large display sizes in the homepage */
  --t-hero:     128px;   /* hero headline (غـيرنا مفهـوم...)        */
  --t-wordmark:  64px;   /* logo "سعور"                              */
  --t-shout:     60px;   /* chat bubble "هلا"                        */

  /* — Type scale — text ——————————————————————————————————————————— */
  --t-title-1:   40px;
  --t-title-2:   28px;
  --t-title-3:   24px;
  --t-body-l:    20px;   /* CTA button label                          */
  --t-body:      16px;   /* nav items / paragraph                     */
  --t-body-s:    14px;
  --t-meta:      12px;   /* role line "اخصائية خدمة عملاء"            */

  /* — Line-heights — the Saour rule is "100%" for headlines & UI;
       only paragraph copy gets a little air. ——————————————————————— */
  --lh-tight: 100%;      /* headlines, UI, single-line                */
  --lh-snug: 120%;
  --lh-body: 140%;
  --lh-loose: 167px;     /* very specific to the hero block           */

  /* — Motion ————————————————————————————————————————————————————— */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
}

/* ---- Base + RTL —————————————————————————————————————————————————— */

html { direction: rtl; }
html[lang="en"], [data-dir="ltr"] { direction: ltr; }

body {
  font-family: var(--font-text);
  font-weight: 900;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* All text is Black (900) per brand — overrides per-element + inline weights. */
body, body * { font-weight: 900 !important; }

/* ---- Semantic type ——————————————————————————————————————————————— */

.h-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  color: var(--fg-leaf);
  letter-spacing: 0;
}
.h-1 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-title-1); line-height: var(--lh-tight); }
.h-2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-title-2); line-height: var(--lh-tight); }
.h-3 { font-family: var(--font-text);    font-weight: 700; font-size: var(--t-title-3); line-height: var(--lh-tight); }

.t-body-l { font-family: var(--font-text); font-weight: 500; font-size: var(--t-body-l); line-height: var(--lh-tight); }
.t-body   { font-family: var(--font-text); font-weight: 400; font-size: var(--t-body);   line-height: var(--lh-tight); }
.t-meta   { font-family: var(--font-chrome); font-weight: 900; font-size: var(--t-meta);   color: var(--fg-3); line-height: var(--lh-tight); }

.t-shout  { font-family: var(--font-display); font-weight: 700; font-size: var(--t-shout); color: var(--fg-inverse); line-height: var(--lh-tight); }
.t-wordmark { font-family: var(--font-display); font-weight: 900; font-size: var(--t-wordmark); color: var(--fg-1); line-height: var(--lh-tight); }