/* Raqami brand tokens. Source: Raqami Branding Update.pdf, pages 4-7. */
@font-face{font-family:"Alexandria";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/Alexandria-arabic.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/Alexandria-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Main colours, page 4. */
  --purple:#8a64d6;
  --navy:#1c142b;
  --white:#ffffff;

  /* Secondary colours, page 4. */
  --charcoal:#3a3a3a;
  --teal:#0cead9;
  --yellow:#ffde13;

  /* Gradient stop, page 6. Purple on white is 4.3:1, so this carries small purple text and buttons. */
  --purple-deep:#533c80;

  /* Tints sampled from page 5. The guide prints no codes for these. */
  --lavender:#e8e0f7;
  --lilac:#d0c1ef;
  --teal-pale:#cefbf7;
  --yellow-pale:#fff8d0;

  /* Errors only. The guide has no danger colour. */
  --danger:#a8261b;
  --danger-pale:#fdecea;

  /* Roles. */
  --text:var(--navy);
  --text-soft:var(--charcoal);
  --text-on-dark:var(--white);
  --surface:var(--white);
  --surface-tint:var(--lavender);
  --line:var(--lilac);
  --line-strong:var(--purple);
  --action:var(--purple-deep);
  --action-hover:var(--navy);
  --focus:var(--navy);

  /* Gradient families, page 6. */
  --gradient-dark:linear-gradient(135deg,var(--purple),var(--purple-deep) 45%,var(--navy));
  --gradient-teal:linear-gradient(135deg,var(--purple),var(--teal));
  --gradient-light:linear-gradient(135deg,var(--purple),var(--white));

  /* Type, page 7. The guide names the family; the sizes are our adaptation. */
  --font:"Alexandria",system-ui,sans-serif;
  --weight-body:400;
  --weight-label:500;
  --weight-title:700;
  --weight-display:800;
  --size-small:.875rem;
  --size-body:1rem;
  --size-lead:1.125rem;
  --size-h3:1.25rem;
  --size-h2:clamp(1.625rem,1.25rem + 1.5vw,2.25rem);
  --size-h1:clamp(2rem,1.3rem + 3vw,3.5rem);
  --leading-body:1.8;
  --leading-title:1.3;

  /* Space. */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:clamp(3rem,2rem + 4vw,5rem);
  --page:min(100% - 2rem,72rem);
  --reading:min(100%,42rem);

  /* Shape. Hard offsets come from the paper-cut layers in visual direction 1, page 8. */
  --radius-small:.5rem;
  --radius:.75rem;
  --radius-pill:62.4375rem;
  --shadow-paper:.375rem .4375rem 0 var(--purple-deep);
  --shadow-paper-soft:.375rem .4375rem 0 var(--lilac);
}