/* فرصة تك · Forsa Tech — design tokens (from the Claude Design system,
   Cairo promoted to primary per BRAND_GUIDE.md). */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Navy — primary brand, headers, dark surfaces */
  --navy-900: #061425;
  --navy-800: #0B1F3A;
  --navy-700: #142a4a;
  --navy-600: #1f3a63;
  --navy-500: #355688;
  --navy-100: #e7ecf4;
  --navy-50:  #f4f6fb;

  /* Gold — accent, primary CTA */
  --gold-600: #F0B800;
  --gold-500: #FFCA28;
  --gold-400: #FFD54F;
  --gold-200: #FFE58F;
  --gold-100: #FFF3CC;
  --gold-50:  #FFFAE6;
  --gold-ink: #8A6200;

  /* Ink — cool neutral ramp */
  --ink-900: #0A1424;
  --ink-700: #2a3851;
  --ink-600: #41506b;
  --ink-500: #5a6883;
  --ink-400: #8a96ad;
  --ink-300: #b6bfd1;
  --ink-200: #d8deea;
  --ink-100: #eef1f7;
  --ink-50:  #f7f9fc;

  /* Surfaces */
  --bg: #FCFCFD;
  --surface: #FFFFFF;
  --surface-soft: #F6F7FB;

  /* Semantic */
  --success: #1F9D6E;
  --danger:  #D14343;

  /* Type — Cairo is the brand, Arabic AND English */
  --font-ar: "Cairo", "Tajawal", system-ui, -apple-system, sans-serif;
  --font-en: "Cairo", "Inter", system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Elevation — navy-tinted, never gray */
  --shadow-xs: 0 1px 2px rgba(11,31,58,0.05);
  --shadow-sm: 0 2px 6px rgba(11,31,58,0.06), 0 1px 2px rgba(11,31,58,0.04);
  --shadow-md: 0 8px 24px rgba(11,31,58,0.08), 0 2px 6px rgba(11,31,58,0.04);
  --shadow-lg: 0 24px 48px rgba(11,31,58,0.12), 0 4px 12px rgba(11,31,58,0.06);
  --glow-navy: 0 6px 16px rgba(11,31,58,0.25);
  --glow-gold: 0 6px 16px rgba(255,202,40,0.35);

  /* Motion */
  --ease: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic */
  --dur: 240ms;
}

/* ─── Base ─── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-ar);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Headings inherit — hero bands set white, body sections set navy inline.
   (A forced navy here rendered navy-on-navy in the legal-page heroes.) */
h1, h2 { color: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold-ink); }
img { display: block; max-width: 100%; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* Tool-card subtitle (opposite-language name) always carries an inline
   text-align:start resolved against ITS OWN direction (.ltr on /, dir=rtl on /en/),
   which is the opposite of the card's direction — stranding it on the far side.
   text-align:end resolves to the same physical side as the title above it. */
.tool-sub { text-align: end !important; }

/* ─── Buttons ─── */
.ft-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-family: var(--font-ar); font-weight: 700; font-size: 15px;
  border-radius: var(--r-pill); padding: 12px 22px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              filter var(--dur) var(--ease);
  will-change: transform;
}
.ft-btn:hover { transform: translateY(-2px); }
.ft-btn:active { transform: translateY(0) scale(0.97); transition-duration: 90ms; }
.ft-btn-primary { background: var(--navy-800); color: #fff; box-shadow: var(--glow-navy); }
.ft-btn-primary:hover { box-shadow: 0 10px 24px rgba(11,31,58,0.35); color: #fff; }
.ft-btn-gold { background: var(--gold-500); color: var(--navy-900); box-shadow: var(--glow-gold); }
.ft-btn-gold:hover { box-shadow: 0 10px 24px rgba(255,202,40,0.5); color: var(--navy-900); }
.ft-btn-ghost { background: transparent; color: var(--navy-800); border-color: var(--ink-200); }
.ft-btn-sm { padding: 8px 14px; font-size: 13px; }
.ft-btn-lg { padding: 16px 28px; font-size: 16px; }

/* ─── Cards / chips / inputs ─── */
.ft-card {
  background: var(--surface); border: 1px solid var(--ink-100);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.ft-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--ink-50); color: var(--ink-700);
  font-size: 12.5px; font-weight: 500; border: 1px solid var(--ink-100);
}
.ft-input {
  font-family: var(--font-ar); font-size: 15px; background: var(--surface);
  border: 1px solid var(--ink-200); border-radius: var(--r-md);
  padding: 12px 16px; width: 100%; color: var(--ink-900); outline: none;
}
.ft-input:focus { border-color: var(--navy-500); }

/* Node-network background pattern — brand's signature texture */
.ft-nodes-bg {
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,193,7,0.10) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 14%, rgba(11,31,58,0.10) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 70%, rgba(11,31,58,0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 78%, rgba(255,193,7,0.10) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 40%, rgba(11,31,58,0.06) 0 1.5px, transparent 2.5px);
  background-size: 100% 100%;
}

/* ─── Scroll reveal (js/main.js adds .rv-in) ─── */
.rv { opacity: 0; transform: translateY(18px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.rv-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .ft-btn, .ft-btn:hover, .ft-btn:active { transform: none; transition: none; }
}