/* =========================================================
   Chara (چارة) — shared design tokens
   Source: Chara-Visual-Identity.pdf §19 (CSS) + §20 (JSON).
   Imported by site, admin, finance and work. Apps must NOT
   redefine brand colors locally; add a token here instead.
   Owner rule: no pink / purple / blue gradients.
   ========================================================= */

/* ---- Fonts: self-hosted subsets (Arabic + Latin basic) ---- */
@font-face {
  font-family: 'Alexandria';
  src: url('./fonts/alexandria-var.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('./fonts/plex-arabic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('./fonts/plex-arabic-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('./fonts/plex-arabic-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Core palette (the only brand colors) ---- */
  --bg: #050907;
  --bg-2: #0A1310;
  --surface: #121A16;
  --ink: #07110C;
  --fg: #F3F6F2;
  --fg-2: #B6C3BB;
  --fg-3: #7F8D85;
  --white: #FFFFFF;
  --lime: #E4F79E;
  --green: #2FD383;
  --green-d: #0E6B47;
  --orange: #FF8F4A;
  --red: #F2391E;
  --peach: #FFD9BF;
  --warn-text: #FFB49C;
  --warn: var(--warn-text);          /* alias used by finance/workspace prototypes */

  /* ---- RGB triplets for alpha mixes ---- */
  --lime-rgb: 228, 247, 158;
  --green-rgb: 47, 211, 131;
  --red-rgb: 242, 57, 30;
  --orange-rgb: 255, 143, 74;
  --bg-rgb: 5, 9, 7;

  /* ---- Glass + lines ---- */
  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .085);
  --glass-3: rgba(255, 255, 255, .14);
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .20);
  --grid: rgba(255, 255, 255, .07);
  --card: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));

  /* ---- Tints derived from the palette (used by the apps) ---- */
  --lime-a: rgba(var(--lime-rgb), .12);
  --lime-b: rgba(var(--lime-rgb), .38);
  --green-a: rgba(var(--green-rgb), .14);
  --orange-a: rgba(var(--orange-rgb), .14);
  --red-a: rgba(var(--red-rgb), .16);
  --scrim: rgba(2, 5, 4, .62);
  --scrim-strong: rgba(2, 4, 3, .72);

  /* ---- Gradients (brand mark only) ---- */
  --iri: #E4F79E, #2FD383, #0B6E4A, #F2391E, #FF8F4A, #FFE7C7, #E4F79E;
  --glow-cool: radial-gradient(rgba(52, 206, 128, .85) 0, rgba(24, 130, 82, .35) 45%, transparent 75%);
  --glow-warm: radial-gradient(#FFE7D6 0, rgba(255, 143, 74, .75) 20%, rgba(242, 57, 30, .55) 42%, transparent 75%);

  /* ---- Type ---- */
  --f-display: 'Alexandria', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Alexandria', 'Segoe UI', Tahoma, sans-serif;
  --fs-h1: clamp(56px, 7.6vw, 112px);
  --fs-h2: clamp(32px, 4.4vw, 58px);
  --fs-h3: clamp(21px, 2vw, 32px);
  --fs-numeral: clamp(44px, 5vw, 64px);
  --fs-lead: clamp(17px, 1.5vw, 20px);
  --fs-body: 17px;
  --fs-caption: 12.5px;

  /* ---- Radius (site scale; apps may use their own scale, never their own colors) ---- */
  --r-xl: 36px;
  --r-lg: 28px;
  --r-md: 20px;
  --r-btn: 16px;
  --r-sm: 14px;
  --r-full: 999px;

  /* ---- Space ---- */
  --container: 1240px;
  --gutter: 24px;
  --gap: 16px;

  /* ---- Shadow ---- */
  --shadow-card: 0 20px 40px rgba(0, 0, 0, .35);
  --shadow-modal: 0 60px 160px rgba(0, 0, 0, .7);
  --glow-btn: 0 14px 40px rgba(var(--lime-rgb), .22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-hover: 250ms;
  --t-enter: 600ms;

  color-scheme: dark;
}

@media (max-width: 600px) {
  :root { --gutter: 16px; }
}

/* Numbers are always Western digits (owner rule); keep them LTR-stable inside RTL text */
.num, bdi.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}