/* Tabali Survey — design tokens
   All values extracted from prototype/src/app/components/*.tsx. */
:root {
  /* Brand */
  --color-primary:        #1FA88A;
  --color-primary-dark:   #0F7A63;
  --color-primary-soft:   rgba(31, 168, 138, 0.10);
  --color-gold:           #E8B53B;
  --color-gold-soft:      rgba(232, 181, 59, 0.15);
  --color-red:            #D24A3D;
  --color-red-soft:       rgba(210, 74, 61, 0.10);
  --color-red-dark:       #9C2A1F;
  --color-gold-dark:      #C68A1A;

  /* Surfaces */
  --color-bg:             #FAF6EE;
  --color-bg-alt:         #F0E6D2;
  --color-surface:        #FFFFFF;
  --color-surface-soft:   rgba(250, 246, 238, 0.60);
  --color-border:         #E8DCC2;
  --color-border-soft:    rgba(232, 220, 194, 0.6);

  /* Text */
  --color-text:           #2A1810;
  --color-text-muted:     #6B5848;
  --color-text-inverse:   #FFFFFF;

  /* Gradients */
  --gradient-primary:     linear-gradient(135deg, #1FA88A, #0F7A63);
  --gradient-warm:        linear-gradient(135deg, #E8B53B, #D24A3D);
  --gradient-tri:         linear-gradient(90deg, #1FA88A, #E8B53B, #D24A3D);
  --gradient-page:        linear-gradient(180deg, #FAF6EE 0%, #FAF6EE 60%, #F0E6D2 100%);
  --gradient-rate-low:    linear-gradient(135deg, #D24A3D, #E8B53B);
  --gradient-rate-mid:    linear-gradient(135deg, #E8B53B, #1FA88A);
  --gradient-rate-high:   linear-gradient(135deg, #1FA88A, #0F7A63);

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(42, 24, 16, 0.05);
  --shadow-md:  0 4px 12px rgba(42, 24, 16, 0.08);
  --shadow-lg:  0 12px 32px rgba(42, 24, 16, 0.12);
  --shadow-primary-glow: 0 6px 18px rgba(31, 168, 138, 0.30);

  /* 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:  56px;
  --space-10: 72px;

  /* Typography */
  --font-body:    "Tajawal", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Naskh Arabic", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   34px;
  --fs-4xl:   38px;
  --lh-tight: 1.15;
  --lh-base:  1.45;

  /* Breakpoints (used only in media queries, not as custom-property in @media) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* Z-index scale */
  --z-modal: 50;
  --z-sticky: 30;
  --z-toast: 60;
  --z-lang: 70;
}