/* ============================================================
   KDN · TYPOGRAPHY TOKENS
   Arabic-first. Headlines bold & short. Clear hierarchy.
   AR: Baloo Bhaijaan 2 · EN: Kodchasan
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-ar: 'Baloo Bhaijaan 2', system-ui, sans-serif;
  --font-en: 'Kodchasan', system-ui, sans-serif;
  /* Default display + body lean Arabic; switch to --font-en for Latin runs. */
  --font-display: var(--font-ar);
  --font-body:    var(--font-ar);

  /* ---- Weights (shared scale) ---- */
  --w-extralight: 200; /* @kind font */ /* Kodchasan only */
  --w-light:      300;  /* @kind font */
  --w-regular:    400;  /* @kind font */
  --w-medium:     500;  /* @kind font */
  --w-semibold:   600;  /* @kind font */
  --w-bold:       700;  /* @kind font */
  --w-black:      800; /* @kind font */ /* Baloo Bhaijaan 2 top weight */

  /* ---- Type scale (rem, 1rem = 16px) ---- */
  --text-2xs:  0.75rem;   /* 12 · legal / micro          */
  --text-xs:   0.875rem;  /* 14 · captions, labels       */
  --text-sm:   1rem;      /* 16 · small body             */
  --text-md:   1.125rem;  /* 18 · body                   */
  --text-lg:   1.375rem;  /* 22 · lead / sub-headline    */
  --text-xl:   1.75rem;   /* 28 · card titles            */
  --text-2xl:  2.25rem;   /* 36 · section titles         */
  --text-3xl:  3rem;      /* 48 · page titles            */
  --text-4xl:  4rem;      /* 64 · display                */
  --text-5xl:  5.5rem;    /* 88 · hero / poster headline */
  --text-6xl:  7.5rem;    /* 120 · billboard             */

  /* ---- Line heights ---- */
  --leading-tight:   1.05;  /* big bold headlines        */
  --leading-snug:    1.2;
  --leading-normal:  1.45;  /* body                      */
  --leading-relaxed: 1.65;

  /* ---- Tracking ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* Latin all-caps labels   */

  /* ---- Semantic roles ---- */
  --role-display-size:   var(--text-5xl);
  --role-display-weight: var(--w-black);
  --role-display-leading:var(--leading-tight);

  --role-title-size:     var(--text-3xl);
  --role-title-weight:   var(--w-bold);
  --role-title-leading:  var(--leading-tight);

  --role-headline-size:  var(--text-2xl);
  --role-headline-weight:var(--w-bold);

  --role-lead-size:      var(--text-lg);
  --role-lead-weight:    var(--w-medium);

  --role-body-size:      var(--text-md);
  --role-body-weight:    var(--w-regular);
  --role-body-leading:   var(--leading-normal);

  --role-label-size:     var(--text-xs);
  --role-label-weight:   var(--w-semibold);
}