/* ==========================================================================
   SNIPD Design System / Design Tokens
   Sudanese Nafeer Initiative for Peace and Development
   Palette derived from the SNIPD logo: nafeer green + sunrise orange.
   ========================================================================== */

:root {
  /* ---- Brand ramps ------------------------------------------------------ */
  --green-50:  #e8f7ee;
  --green-100: #c9ecd8;
  --green-200: #99dbb4;
  --green-300: #5cc689;
  --green-400: #21ad61;
  --green-500: #019d3c;   /* logo green */
  --green-600: #068236;
  --green-700: #09682d;
  --green-800: #0a5225;
  --green-900: #093c1c;
  --green-950: #04220f;

  --orange-50:  #fef4e8;
  --orange-100: #fde4c8;
  --orange-200: #fbc98f;
  --orange-300: #f8ac55;
  --orange-400: #f5811a;  /* logo orange */
  --orange-500: #e5710f;
  --orange-600: #c25c0b;
  --orange-700: #97470a;
  --orange-800: #6f350a;

  /* ---- Warm neutrals ---------------------------------------------------- */
  --sand-25:  #fcfbf9;
  --sand-50:  #f7f5f1;
  --sand-100: #efece5;
  --sand-200: #e2ddd3;
  --sand-300: #cbc4b6;
  --sand-400: #a49c8c;
  --sand-500: #7d7566;
  --sand-600: #5d564a;
  --sand-700: #423d34;
  --sand-800: #2b2822;
  --sand-900: #1a1814;
  --sand-950: #100f0c;

  /* ---- Support ---------------------------------------------------------- */
  --sky-500: #0e7c9c;
  --clay-500: #b4472e;
  --success: #068236;
  --warning: #c25c0b;
  --danger:  #b4232a;

  /* ---- Semantic (light theme is the default) ---------------------------- */
  --bg:            var(--sand-25);
  --bg-subtle:     var(--sand-50);
  --bg-inverse:    var(--green-950);
  --surface:       #ffffff;
  --surface-2:     var(--sand-50);
  --surface-raised:#ffffff;

  --text:          var(--sand-900);
  --text-muted:    var(--sand-600);
  --text-subtle:   var(--sand-500);
  --text-inverse:  #ffffff;
  --text-on-brand: #ffffff;

  --border:        var(--sand-200);
  --border-strong: var(--sand-300);

  --primary:        var(--green-600);
  --primary-hover:  var(--green-700);
  --primary-soft:   var(--green-50);
  --primary-border: var(--green-200);

  --accent:        var(--orange-400);
  --accent-hover:  var(--orange-500);
  --accent-soft:   var(--orange-50);

  --ring: color-mix(in srgb, var(--green-500) 55%, transparent);

  /* ---- Typography ------------------------------------------------------- */
  /* Readex Pro carries both Latin and Arabic, so one family serves the whole
     site in either direction. */
  --font-display: "Readex Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Readex Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-arabic:  "Readex Pro", "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, monospace;

  /* Fluid type scale. One proportional ramp shared by the whole site: each
     step interpolates from its mobile size to its desktop size over roughly
     the same viewport range, so the intervals between steps stay in the same
     relation at every width. Pixel ranges assume a 16px browser root. */
  --text-xs:   clamp(0.75rem,  0.70rem  + 0.25vw, 0.875rem);  /* 12   -> 14   */
  --text-sm:   clamp(0.875rem, 0.825rem + 0.25vw, 1rem);      /* 14   -> 16   */
  --text-base: clamp(1rem,     0.95rem  + 0.25vw, 1.125rem);  /* 16   -> 18   */
  --text-h4:   clamp(1.125rem, 1.05rem  + 0.40vw, 1.35rem);   /* 18   -> 21.6 */
  --text-h3:   clamp(1.35rem,  1.20rem  + 0.75vw, 1.75rem);   /* 21.6 -> 28   */
  --text-h2:   clamp(1.65rem,  1.40rem  + 1.25vw, 2.25rem);   /* 26.4 -> 36   */
  --text-h1:   clamp(2rem,     1.60rem  + 2.00vw, 3rem);      /* 32   -> 48   */
  --text-hero: clamp(2.25rem,  1.75rem  + 2.50vw, 3.75rem);   /* 36   -> 60   */

  /* Eyebrows and footer column headings. Uppercase labels set at body size, so
     they read as headings rather than as fine print. */
  --text-label: var(--text-base);

  /* ---- Line height ------------------------------------------------------- */
  --lh-tight:   1.15;  /* h1 and h2 */
  --lh-heading: 1.25;  /* h3 and h4 */
  --lh-body:    1.6;   /* running text; the Arabic layer raises this */
  --lh-ui:      1.4;   /* captions, meta rows and other dense UI text */

  --tracking-tight: -0.02em;
  --tracking-hero:  -0.03em;
  --tracking-wide:   0.08em;

  /* ---- Space scale (4px base) ------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  --section-y: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
  --container: 76rem;
  --container-narrow: 46rem;
  --gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);

  /* ---- Radii ------------------------------------------------------------ */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 3px;
  --radius-xl: 4px;
  --radius-pill: 999px;

  /* ---- Elevation ---------------------------------------------------------
     The site is flat by design: surfaces are separated by rules, not by
     shadows. Only the off-canvas drawer and the lightbox, which sit above the
     page, carry any depth at all. */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 0 0 1px rgba(10, 60, 28, 0.10);
  --shadow-glow: none;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  --header-h: 72px;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

/* ---- Dark theme --------------------------------------------------------- */
[data-theme="dark"] {
  --bg:            var(--sand-950);
  --bg-subtle:     #16171a;
  --bg-inverse:    #000000;
  --surface:       #1b1d1b;
  --surface-2:     #202320;
  --surface-raised:#232725;

  --text:          #f2f3ef;
  --text-muted:    #b6b9b1;
  --text-subtle:   #8f938a;
  --text-inverse:  var(--sand-950);
  --text-on-brand: #ffffff;

  --border:        #33372f;
  --border-strong: #454a41;

  --primary:        var(--green-400);
  --primary-hover:  var(--green-300);
  --primary-soft:   rgba(1, 157, 60, 0.14);
  --primary-border: rgba(33, 173, 97, 0.38);

  --accent:        var(--orange-300);
  --accent-hover:  var(--orange-200);
  --accent-soft:   rgba(245, 129, 26, 0.15);

  --ring: color-mix(in srgb, var(--green-300) 60%, transparent);

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.10);
  --shadow-glow: none;
}