/* Tiryaq Design System — Colors & Type
 * Locked 2026-05-05 from brand-concept.md
 * Source palette: sampled directly from assets/tiryaq-leaf.png
 * NO green dot. NO bright cyan. NO saturated tech-blue.
 * Single coherent muted teal-seafoam family.
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ─────────────────────────────────────────────
   * PRIMARY — leaf-derived teal-seafoam family
   * ───────────────────────────────────────────── */
  --teal-900: #043441;   /* leaf dark outline — primary headings, body text, dark surfaces */
  --teal-700: #14424E;   /* interpolated — primary brand CTA bg, dark UI elements */
  --teal-500: #277E83;   /* leaf mid-tone — interactive default, secondary CTAs */
  --teal-300: #7DB8B0;   /* leaf sage — hover states, soft accents */
  --teal-200: #B3E0D7;   /* leaf mint interior — light brand surfaces, badges, tints */
  --teal-100: #E4F4EA;   /* leaf highlight — soft hover bg, faint section bg */

  /* ─────────────────────────────────────────────
   * NEUTRALS — warm bone scale (NOT pure grays)
   * ───────────────────────────────────────────── */
  --bone-50:  #FDFBF6;   /* page surface (cards on default bg) */
  --bone-100: #F8F4EC;   /* BACKGROUND — landing default; never pure #FFFFFF */
  --bone-200: #EFE9DC;
  --bone-300: #E0D8C5;

  /* ─────────────────────────────────────────────
   * INK — text scale tinted off leaf outline
   * ───────────────────────────────────────────── */
  --ink-900: #052B36;    /* body text on bone */
  --ink-700: #14424E;    /* subheads */
  --ink-500: #5A6B68;    /* muted text */
  --ink-300: #8A9794;    /* placeholder + disabled */

  /* ─────────────────────────────────────────────
   * STATUS — sparingly, never as accent
   * ───────────────────────────────────────────── */
  --success: #2DC653;
  --error:   #BA1A1A;
  --warning: #F4A261;
  --info:    var(--teal-500);

  /* ─────────────────────────────────────────────
   * SEMANTIC TOKENS
   * ───────────────────────────────────────────── */
  --bg-page:        var(--bone-100);
  --bg-surface:     var(--bone-50);
  --bg-tint:        var(--teal-100);
  --bg-brand-soft:  var(--teal-200);

  --fg-primary:     var(--ink-900);
  --fg-secondary:   var(--ink-700);
  --fg-muted:       var(--ink-500);
  --fg-placeholder: var(--ink-300);
  --fg-on-dark:     var(--bone-50);

  --border-soft:    var(--bone-300);
  --border-medium:  rgba(39, 126, 131, 0.25);
  --border-strong:  var(--teal-700);

  --cta-bg:         var(--teal-700);
  --cta-fg:         var(--bone-50);
  --cta-hover-bg:   var(--teal-900);

  /* ─────────────────────────────────────────────
   * RADII
   * ───────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   10px;   /* buttons, inputs */
  --radius-lg:   16px;   /* cards */
  --radius-xl:   24px;   /* large surfaces */
  --radius-pill: 9999px;

  /* ─────────────────────────────────────────────
   * SHADOWS — cool teal-tinted, never warm/grey
   * ───────────────────────────────────────────── */
  --shadow-card:    0 2px 12px rgba(5, 43, 54, 0.06);
  --shadow-lift:    0 6px 18px rgba(4, 52, 65, 0.10);
  --shadow-cta:     0 6px 18px rgba(4, 52, 65, 0.28);
  --shadow-glow:    0 8px 28px rgba(125, 184, 176, 0.45);

  /* ─────────────────────────────────────────────
   * SPACING — 4pt baseline
   * ───────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─────────────────────────────────────────────
   * TYPE — Cairo Arabic / Inter Latin pair
   * ───────────────────────────────────────────── */
  --font-arabic: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-latin:  'Inter', system-ui, -apple-system, sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Fluid type scale (mobile-first → desktop) */
  --fs-display: clamp(36px, 7vw, 64px);     /* hero headline */
  --fs-h1:      clamp(30px, 5vw, 48px);
  --fs-h2:      clamp(24px, 4vw, 36px);
  --fs-h3:      24px;
  --fs-lead:    clamp(17px, 2vw, 20px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-button:  16px;

  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.6;

  --tracking-display: -0.5px;

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  180ms;
  --dur-base:  240ms;
  --dur-slow:  320ms;
}

/* ─────────────────────────────────────────────
 * BASE — RTL Arabic-first
 * ───────────────────────────────────────────── */
html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-arabic);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  font-weight: var(--fw-regular);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────
 * SEMANTIC TYPE CLASSES
 * ───────────────────────────────────────────── */
.t-display {
  font-family: var(--font-arabic);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-primary);
}
.t-h1 {
  font-family: var(--font-arabic);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: 1.2;
  color: var(--fg-primary);
}
.t-h2 {
  font-family: var(--font-arabic);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.t-h3 {
  font-family: var(--font-arabic);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg-primary);
}
.t-lead {
  font-family: var(--font-arabic);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}
.t-body {
  font-family: var(--font-arabic);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-primary);
}
.t-small {
  font-family: var(--font-arabic);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.t-button {
  font-family: var(--font-arabic);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-button);
  line-height: 1;
}
.t-eyebrow {
  font-family: var(--font-arabic);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--teal-500);
  text-transform: none;
}

/* Latin pair — wrap inside <bdi class="latin"> for brand names, prices, phone */
.latin {
  font-family: var(--font-latin);
  font-feature-settings: 'tnum' 1;
}