/* ===========================================================================
   Atheal Design System Z1 — web tokens
   Adapted from the Z1 handoff bundle's colors_and_type.css for the static
   site. First Z1 surface: /loved1s/. Inter carries Latin; IBM Plex Sans
   Arabic carries Arabic (fallthrough). No other faces.
   =========================================================================== */

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

:root {
  /* ---------------- Brand main palette ---------------- */
  --atheal-ink:        rgb(25, 25, 16);
  --atheal-graphite:   rgb(35, 37, 37);
  --atheal-stone-700:  rgb(78, 80, 79);
  --atheal-stone-600:  rgb(101, 101, 93);
  --atheal-stone-500:  rgb(142, 142, 130);
  --atheal-stone-400:  rgb(164, 164, 150);
  --atheal-stone-300:  rgb(191, 191, 176);
  --atheal-stone-200:  rgb(208, 208, 194);
  --atheal-sand:       rgb(237, 237, 227);
  --atheal-cream:      rgb(247, 247, 242);
  --atheal-paper:      rgb(250, 250, 250);
  --atheal-white:      rgb(255, 255, 255);

  --atheal-forest:     rgb(4, 76, 64);
  --atheal-forest-deep:rgb(0, 29, 24);
  --atheal-green:      rgb(21, 154, 132);
  --atheal-green-mid:  rgb(55, 159, 141);
  --atheal-green-bright:rgb(68, 197, 175);
  --atheal-green-soft: rgb(134, 193, 169);
  --atheal-green-pale: rgb(196, 227, 193);

  --atheal-blue:       rgb(55, 165, 205);
  --atheal-orange:     rgb(254, 137, 87);
  --atheal-purple:     rgb(138, 99, 229);
  --atheal-success:    rgb(5, 154, 104);

  /* ---------------- Semantic ---------------- */
  --color-bg:            var(--atheal-cream);
  --color-bg-elevated:   var(--atheal-white);
  --color-bg-alt:        var(--atheal-sand);
  --color-bg-brand:      var(--atheal-forest);
  --color-bg-accent:     var(--atheal-green);
  --color-fg:            var(--atheal-ink);
  --color-fg-secondary:  var(--atheal-stone-600);
  --color-fg-tertiary:   var(--atheal-stone-500);
  --color-fg-inverse:    var(--atheal-cream);
  --color-fg-accent:     var(--atheal-green);
  --color-stroke-weak:   var(--atheal-stone-200);
  --color-stroke:        var(--atheal-stone-300);

  /* ---------------- Type ---------------- */
  --font-display: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-arabic:  "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-mono:    "Roboto Mono", ui-monospace, monospace;

  --type-overline-tracking: 0.12em;

  /* ---------------- Spacing / radii / shadows ---------------- */
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 48px;
  --radius-full: 9999px;

  --shadow-card: 0 0 28px 0 rgba(0, 0, 0, 0.12);
  --shadow-soft: 0 1px 2px 0 rgba(0, 0, 0, 0.06),
                 0 4px 12px 0 rgba(25, 25, 16, 0.06);

  /* ---------------- Motion ---------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* RTL surfaces lead with the Arabic face */
[dir="rtl"] body,
body[dir="rtl"] {
  font-family: var(--font-arabic);
}