/* =========================================================
   Sawtihyat (صوتي حياة) — Design Tokens
   Colors, type, spacing, radii, shadows
   Direction: RTL · Language: Arabic
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---------- Backgrounds (deep green gradient) ---------- */
  --bg-deepest:  #051410;  /* page outer / footer */
  --bg-primary:  #0A1F1A;  /* main canvas */
  --bg-surface:  #103028;  /* surfaces, sections */
  --bg-elevated: #174538;  /* cards, panels */
  --bg-accent:   #1F5A48;  /* hover surfaces, raised CTA bg */

  /* ---------- Borders ---------- */
  --border-subtle: #1F4A3D;
  --border-strong: #2A6654;

  /* ---------- Text ---------- */
  --text-primary:   #ECF2EF;  /* near-white, dim */
  --text-secondary: #A8BEB6;  /* greenish gray */
  --text-muted:     #6B8179;  /* meta, micro labels */

  /* ---------- Brand green (primary action) ---------- */
  --green-bright: #5DD3B0;  /* buttons, links, emphasis */
  --green-glow:   #7FE5C5;  /* hover */
  --green-soft:   #2A8F76;  /* deeper accent */
  --green-tint:   rgba(93, 211, 176, 0.12);
  --green-tint-strong: rgba(93, 211, 176, 0.22);

  /* ---------- Gold (rare, highlights only) ---------- */
  --gold:         #E8C07E;
  --gold-tint:    rgba(232, 192, 126, 0.15);

  /* ---------- Type ---------- */
  --font-arabic: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* Type scale (Arabic — slightly larger optical sizes) */
  --fs-display: clamp(48px, 7vw, 96px);   /* hero word marks */
  --fs-h1:      clamp(36px, 4vw, 48px);
  --fs-h2:      clamp(28px, 3vw, 36px);
  --fs-h3:      clamp(20px, 2vw, 24px);
  --fs-body:    16px;
  --fs-body-sm: 15px;
  --fs-small:   14px;
  --fs-xs:      13px;

  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-body:    1.7;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  /* ---------- Radii ---------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ---------- Spacing scale (8pt 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;

  /* ---------- Shadows / Glows ---------- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.30);
  --shadow-card:  0 6px 24px rgba(0,0,0,0.35);
  --shadow-pop:   0 18px 60px rgba(0,0,0,0.55);
  --glow-green:   0 0 0 6px var(--green-tint), 0 8px 32px rgba(93,211,176,0.25);
  --glow-soft:    0 0 40px rgba(93,211,176,0.12);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.6,.0,.2,1);
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    520ms;
}

/* ---------- Semantic element styles ---------- */
html { direction: rtl; }
body {
  font-family: var(--font-arabic);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold);     line-height: var(--lh-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);     line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
p  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }
small { font-size: var(--fs-small); color: var(--text-muted); }

a {
  color: var(--green-bright);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--green-glow); }

/* ---------- Reusable utility classes ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--green-bright);
  background: var(--green-tint);
  border: 1px solid var(--border-subtle);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green-bright);
}

.gold-text { color: var(--gold); }
.bright-text { color: var(--green-bright); }
.muted { color: var(--text-muted); }

/* Subtle reveal-on-scroll baseline */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }