:root {
  /* Brand colours — exact values read from the Folios Figma via the REST API */
  --color-orange:        #E7A200;
  --color-orange-hover:  #C98D00;
  --color-pink:          #E51D74;
  --color-pink-hover:    #C4135F;
  --color-pink-soft:     #FCE8F1;   /* = pink #E51D74 @ 10% over white (hero band) */

  /* Validation/error red — Booktime uses red (not the brand pink) for form errors. */
  --color-error:         #DD4140;
  --color-error-soft:    #FDECEC;

  --color-black:         #000000;
  --color-white:         #FFFFFF;
  --color-bg:            #FFFFFF;
  --color-bg-shaded:     #F2F2F2;   /* shaded section band + quality panel */
  --color-card:          #F0F0F0;   /* feature-card fill */

  --color-heading:       #222222;
  --color-body:          #555555;
  --color-body-strong:   #333333;
  --color-muted:         #6B6B6B;
  --color-border:        #E5E5E5;
  --color-border-light:  #EFEFEF;

  /* Type */
  --font-primary: "Noto Sans", sans-serif;
  --font-arabic:  "NotoNaskhArabic", sans-serif;   /* Booktime: NotoNaskhArabic, sans-serif (#6528) */

  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.125rem;
  --font-size-xl:  1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.75rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 2.75rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.2;
  --line-height-snug:     1.4;
  --line-height-normal:   1.6;
  --line-height-relaxed:  1.75;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;

  /* Radii / shadows */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);

  /* Layout */
  /* Figma content block is 1200px wide; container adds 30px gutters on top
     (max-width 1260 − 2×30 padding = 1200 content) so content matches the
     design on wide screens while keeping a safe gutter on narrow ones. */
  --container-max: 1260px;
  --section-space-y: var(--space-10);
  --header-bottom-height: 52px;

  /* Motion / z */
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --easing-standard: ease;

  --z-header:     900;
  --z-dropdown:  1000;
}