/* atheal-tokens.css
 * Canonical Atheal design system tokens. Use these on any marketing
 * surface that wants to match the app brand.
 */

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

:root {
  /* ---- Main palette ---- */
  --ink:           rgb(25, 25, 16);
  --ink-2:         rgb(35, 37, 37);
  --ink-3:         rgb(78, 80, 79);
  --text:          rgb(25, 25, 16);
  --text-muted:    rgb(101, 101, 93);
  --text-soft:     rgb(142, 142, 130);
  --text-subtle:   rgb(164, 164, 150);

  --bg:            rgb(247, 247, 242);
  --bg-alt:        rgb(237, 237, 227);
  --surface:       rgb(255, 255, 255);
  --surface-2:     rgb(247, 247, 248);

  --line:          rgb(208, 208, 194);
  --line-2:        rgb(191, 191, 176);

  --brand-green:   rgb(4, 76, 64);
  --brand-green-2: rgb(4, 64, 42);
  --accent-teal:   rgb(21, 154, 132);
  --accent-teal-2: rgb(55, 159, 141);
  --accent-teal-3: rgb(68, 197, 175);
  --accent-sage:   rgb(134, 193, 169);
  --accent-sage-2: rgb(196, 227, 193);

  /* ---- Extended (sparing use) ---- */
  --coral:         rgb(254, 137, 87);
  --coral-deep:    rgb(193, 88, 35);
  --violet:        rgb(138, 99, 229);
  --sky:           rgb(100, 180, 221);
  --cyan:          rgb(55, 184, 210);

  /* ---- Radii ---- */
  --radius-xs:     4px;
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-screen: 62px;
  --radius-pill:   999px;

  /* ---- Elevation ---- */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:     0 0 20px rgba(0,0,0,0.12);
  --shadow-lg:     0 0 28px rgba(0,0,0,0.12);

  /* ---- Spacing scale ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  56px;
  --space-10: 62px;

  /* ---- Type ----
   * IBM Plex Sans Arabic covers Latin + Arabic glyphs — one family,
   * harmonized across both scripts.
   */
  --font-sans: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Motion (ease-out cubic, ≤300ms, no bounce) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 160ms;
  --dur-base:  240ms;
  --dur-long:  300ms;
}