/* JawwalPay & Esdad — Design tokens
   Palestinian heritage palette (red, green, black, white) — production-tuned */

:root {
  /* Brand — heritage palette */
  --jp-red: #c8102e;          /* heritage red — primary brand */
  --jp-red-600: #a50d24;
  --jp-red-700: #82081c;
  --jp-red-50:  #fdecef;
  --jp-red-100: #fad0d6;

  --jp-green: #007a3d;        /* heritage green — success, secondary */
  --jp-green-600: #006634;
  --jp-green-700: #00522a;
  --jp-green-50:  #e6f4ec;
  --jp-green-100: #c2e2cf;

  --jp-black: #000000;        /* heritage black */
  --jp-white: #ffffff;        /* heritage white */

  /* Semantic */
  --c-bg:        #ffffff;
  --c-surface:   #fafaf7;
  --c-surface-2: #f3f2ec;
  --c-border:    #e4e2d9;
  --c-border-2:  #cfccc0;
  --c-text:      #14140f;
  --c-text-2:    #555550;
  --c-text-3:    #8a8a82;
  --c-muted:     #b8b8b0;
  --c-overlay:   rgba(20, 20, 15, 0.55);

  --c-primary:        var(--jp-red);
  --c-primary-hover:  var(--jp-red-600);
  --c-primary-active: var(--jp-red-700);
  --c-primary-text:   #ffffff;

  --c-accent:         var(--jp-green);
  --c-accent-hover:   var(--jp-green-600);
  --c-accent-text:    #ffffff;

  --c-success: var(--jp-green);
  --c-success-bg: var(--jp-green-50);
  --c-warning: #d4a017;
  --c-warning-bg: #fdf4d9;
  --c-danger: var(--jp-red);
  --c-danger-bg: var(--jp-red-50);
  --c-info: #2563eb;
  --c-info-bg: #eff6ff;

  /* Type */
  --font-arabic: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(20,20,15,0.06);
  --shadow-sm: 0 2px 6px rgba(20,20,15,0.08);
  --shadow-md: 0 6px 18px rgba(20,20,15,0.10);
  --shadow-lg: 0 18px 48px rgba(20,20,15,0.16);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 400ms;

  --container: 1280px;
  --header-h: 64px;
}

[data-theme="dark"] {
  --c-bg:        #0e0e0a;
  --c-surface:   #16160f;
  --c-surface-2: #1f1f17;
  --c-border:    #2c2c22;
  --c-border-2:  #3f3f33;
  --c-text:      #f4f3ee;
  --c-text-2:    #c6c4b8;
  --c-text-3:    #8e8c80;
  --c-muted:     #5a584d;

  --c-primary:        #e8324a;
  --c-primary-hover:  #f04a60;
  --c-primary-text:   #ffffff;

  --c-accent:         #2da866;
  --c-accent-hover:   #3bbb78;

  --c-success-bg: rgba(0,122,61,0.16);
  --c-warning-bg: rgba(212,160,23,0.16);
  --c-danger-bg:  rgba(200,16,46,0.16);
  --c-info-bg:    rgba(37,99,235,0.16);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 22px rgba(0,0,0,0.55);
  --shadow-lg: 0 22px 56px rgba(0,0,0,0.7);
}