/* فناساخت — design tokens. Every page imports this file first.
   Documented in DESIGN_SYSTEM.md. Change values here, not in components. */

@font-face {
  font-family: "Estedad";
  src: url("../fonts/Estedad-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Estedad";
  src: url("../fonts/Estedad-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Brand */
  --navy: #0B1F33;
  --navy-2: #102A44;
  --navy-3: #1A3A5A;
  --blue: #1677FF;
  --blue-deep: #0A4FD1;
  --blue-light: #5AA2FF;        /* blue on navy backgrounds */
  --blue-tint: #EAF2FF;

  /* Cool grays */
  --ink: #0B1F33;
  --text: #3B4B5D;
  --muted: #6E7C8C;
  --faint: #A5B0BC;
  --line: #E4E9EF;
  --line-strong: #CCD5DF;
  --bg: #FFFFFF;
  --bg-alt: #F5F7F9;

  /* On dark */
  --d-text: #C3CFDC;
  --d-muted: #7F93A8;
  --d-line: rgba(255, 255, 255, 0.10);
  --d-line-strong: rgba(255, 255, 255, 0.20);

  /* Type */
  --font: "Estedad", system-ui, sans-serif;

  --fs-display: clamp(2.4rem, 1.1rem + 4.9vw, 5.4rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.72rem;

  --lh-tight: 1.25;
  --lh-body: 1.95;

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --section: clamp(88px, 6vw + 60px, 168px);

  /* Grid */
  --max: 1240px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Shape */
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --t-fast: 180ms;
  --t-base: 420ms;
  --t-slow: 900ms;
}