/* CloudyERP prototype — design tokens */
:root {
  /* Surfaces: near-black → deep navy */
  --bg-0: #03050b;
  --bg-1: #060a15;
  --bg-2: #0a1122;
  --surface-1: #0c1530;
  --surface-2: #111c3b;
  --surface-3: #18264c;
  --surface-glass: rgb(14 24 52 / 0.78);

  /* Lines */
  --line-1: rgb(150 172 224 / 0.10);
  --line-2: rgb(150 172 224 / 0.18);
  --line-3: rgb(150 172 224 / 0.30);

  /* Text */
  --text-1: #eef2fb;
  --text-2: #b0bcd9;
  --text-3: #8391b4;
  --text-inv: #050914;

  /* Electric blue */
  --blue-600: #1f63e8;
  --blue-500: #2f7bff;
  --blue-400: #5294ff;
  --blue-300: #8cb8ff;
  --blue-200: #c4dbff;
  --blue-tint: rgb(47 123 255 / 0.12);
  --blue-tint-2: rgb(47 123 255 / 0.22);

  /* Signals (used sparingly) */
  --ok: #3fd69c;
  --ok-tint: rgb(63 214 156 / 0.12);
  --warn: #f2bb55;
  --warn-tint: rgb(242 187 85 / 0.12);
  --bad: #ff7b7b;

  /* Type */
  --font-display: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-num: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;

  /* W10 type scale: display / h1 / h2 / h3 / lead / body / meta. Arabic glyphs sit lower and carry
     marks above and below the line, so headings never go below 1.3 and running text stays at 1.75–1.95.
     Nothing customers read is set below --fs-micro (12px). */
  --fs-hero: clamp(2.75rem, 1.2rem + 5.2vw, 6rem);
  --fs-h1: clamp(1.85rem, 1.3rem + 2.3vw, 3.2rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.1vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.75vw, 1.7rem);
  --fs-lead: clamp(1.06rem, 0.99rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.875rem;
  --fs-meta: 0.8125rem;
  --fs-tag: 0.78rem;
  --fs-micro: 0.75rem;
  --fs-xs: var(--fs-tag);

  --lh-display: 1.3;
  --lh-h1: 1.35;
  --lh-h2: 1.4;
  --lh-h3: 1.5;
  --lh-lead: 1.9;
  --lh-body: 1.85;
  --lh-meta: 1.65;
  /* Readable line length. «ch» is the width of «0», wider than an average Arabic letter,
     so 50ch ≈ 70–75 Arabic characters per line. */
  --measure: 50ch;
  --measure-wide: 58ch;

  /* Space & shape */
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --maxw: 1320px;
  --section-y: clamp(5rem, 3rem + 7vw, 9.5rem);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* Elevation */
  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 10px 30px -12px rgb(0 0 0 / 0.6);
  --shadow-2: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 30px 80px -30px rgb(0 0 0 / 0.85), 0 0 0 1px var(--line-2);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 180ms;
  --dur-2: 420ms;
  --dur-3: 900ms;

  --focus: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--blue-300);
  /* W10: focus is drawn with outline so component box-shadows (primary buttons, search box) can't hide it */
  --focus-ring: #8cb8ff;
  --tap: 44px;
  --header-h: 68px;
}