:root {
  /* Brand colours sampled from Folios Figma */
  --color-orange:        #F0A91C;
  --color-orange-hover:  #D4940F;
  --color-pink:          #E5197F;
  --color-pink-hover:    #C7126E;
  --color-pink-soft:     #FDE6F0;

  --color-black:         #000000;
  --color-white:         #FFFFFF;
  --color-bg:            #FFFFFF;
  --color-bg-shaded:     #F3F3F3;

  --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", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-arabic:  "Noto Sans Arabic", "Noto Sans", system-ui, sans-serif;

  --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 */
  --container-max: 1200px;
  --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;
}