/* ==========================================================================
   OIC Statements — Public Design Tokens
   RTL-first (Arabic default). Light + Dark themes via [data-theme].
   ========================================================================== */

:root {
  /* Brand palette */
  --oic-primary: #0e7c6b;        /* deep teal — OIC-inspired */
  --oic-primary-600: #0b6557;
  --oic-primary-700: #084a40;
  --oic-secondary: #1b3a5b;      /* midnight blue */
  --oic-accent: #c8992e;         /* warm gold */
  --oic-accent-600: #a87f22;

  /* Surfaces (light) */
  --oic-bg: #f6f4ef;             /* warm paper */
  --oic-surface: #ffffff;
  --oic-surface-2: #f0ece3;
  --oic-border: #e2dcd0;
  --oic-text: #1d2327;
  --oic-text-muted: #5d6b73;
  --oic-heading: #14201c;

  /* Status */
  --oic-success: #2e7d4f;
  --oic-warning: #b8860b;
  --oic-danger: #c0392b;
  --oic-info: #2a6f97;

  /* Typography */
  --oic-font-ar: "Cairo", "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --oic-font-latin: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --oic-font-display: "Cairo", "Tajawal", serif;
  --oic-fs-base: 1rem;
  --oic-fs-sm: 0.875rem;
  --oic-fs-lg: 1.125rem;
  --oic-fs-xl: 1.375rem;
  --oic-fs-2xl: 1.75rem;
  --oic-fs-3xl: 2.25rem;
  --oic-fs-display: 3rem;
  --oic-lh: 1.7;

  /* Spacing scale */
  --oic-sp-1: 0.25rem;
  --oic-sp-2: 0.5rem;
  --oic-sp-3: 0.75rem;
  --oic-sp-4: 1rem;
  --oic-sp-5: 1.5rem;
  --oic-sp-6: 2rem;
  --oic-sp-7: 3rem;
  --oic-sp-8: 4rem;

  /* Radius & shadows */
  --oic-radius-sm: 6px;
  --oic-radius: 12px;
  --oic-radius-lg: 20px;
  --oic-radius-pill: 999px;
  --oic-shadow-sm: 0 1px 3px rgba(20, 32, 28, 0.08);
  --oic-shadow: 0 6px 20px rgba(20, 32, 28, 0.10);
  --oic-shadow-lg: 0 18px 50px rgba(20, 32, 28, 0.18);

  /* Z-index layers (flip < overlay-ui < drawer < popover < modal < toast) */
  --oic-z-flip: 10;
  --oic-z-overlay-ui: 100;
  --oic-z-drawer: 1000;
  --oic-z-popover: 1500;
  --oic-z-modal: 2000;
  --oic-z-toast: 3000;

  /* Motion */
  --oic-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --oic-dur: 0.28s;

  --c-primary: #216e48;
      --c-primary-rgb: 33, 110, 72;
      --c-primary-dark: #174f35;
      --c-primary-soft: #eaf4ef;
      --c-secondary: #a08405;
      --c-secondary-rgb: 160, 132, 5;
      --c-secondary-dark: #765f03;
      --c-secondary-soft: #f7f1d8;

      --c-page: #f6f6f1;
      --c-surface: #ffffff;
      --c-surface-2: #f0f3ef;
      --c-text: #17211c;
      --c-muted: #66736c;
      --c-border: rgba(23, 33, 28, .12);
      --c-dark: #0f1d16;
      --c-white: #ffffff;
      --c-danger: #b42318;

      --font-display: "Changa", sans-serif;
      --font-body: "Tajawal", sans-serif;

      --container: 1240px;
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 30px;
      --shadow-sm: 0 10px 30px rgba(21, 50, 36, .08);
      --shadow-md: 0 22px 60px rgba(21, 50, 36, .14);
      --shadow-lg: 0 32px 90px rgba(13, 37, 25, .22);
      --ease: cubic-bezier(.2, .8, .2, 1);
      --header-height: 82px;
}
 
[data-theme="dark"] {
  --oic-bg: #11171a;
  --oic-surface: #182025;
  --oic-surface-2: #1f2a30;
  --oic-border: #2c3a42;
  --oic-text: #e6ebee;
  --oic-text-muted: #9fb0ba;
  --oic-heading: #f2f6f7;
  --oic-primary: #2bb29b;
  --oic-primary-600: #229884;
  --oic-accent: #e0b54a;
  --oic-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --oic-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  --oic-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6);
}

   html[data-theme="dark"] {
      --c-page: #0e1712;
      --c-surface: #142019;
      --c-surface-2: #18271f;
      --c-text: #edf5f0;
      --c-muted: #a8b7ae;
      --c-border: rgba(255, 255, 255, .12);
      --c-primary-soft: rgba(33, 110, 72, .22);
      --c-secondary-soft: rgba(160, 132, 5, .18);
      --shadow-sm: 0 12px 35px rgba(0, 0, 0, .18);
      --shadow-md: 0 26px 70px rgba(0, 0, 0, .28);
    }




@media (prefers-reduced-motion: reduce) {
  :root { --oic-dur: 0.001s; }
  * { scroll-behavior: auto !important; }
}