/* ==========================================================================
   Green Generation — Design Tokens  |  شركة الجيل الأخضر — متغيرات الهوية
   v1.0 · CR 1009169740 · contact@ggen.sa
   Drop this file in your theme and reference the variables everywhere.
   ضع هذا الملف في القالب واستخدم المتغيرات في كل مكان بدل الأكواد الثابتة.
   ========================================================================== */

:root {
  /* ---- Brand core / الألوان الأساسية ---------------------------------- */
  --ggen-teal:            #0EA489; /* Primary brand mark colour */
  --ggen-leaf:            #71AC6F; /* Gradient end / secondary  */
  --ggen-ink:             #2D2D2D; /* Wordmark black            */
  --ggen-gray:            #AEAEAE; /* Logo subtitle gray        */

  --ggen-gradient:        linear-gradient(225deg, #0EA489 0%, #71AC6F 100%);
  --ggen-gradient-soft:   linear-gradient(225deg, #E8F7F4 0%, #F0F6EF 100%);

  /* ---- Teal scale / تدرج التيل ---------------------------------------- */
  --teal-50:   #E8F7F4;
  --teal-100:  #C6EDE5;
  --teal-200:  #93DECF;
  --teal-300:  #5ECCB8;
  --teal-400:  #2DB79E;
  --teal-500:  #0EA489;  /* brand */
  --teal-600:  #0B8571;  /* white text passes AA (4.56:1) */
  --teal-700:  #096A5A;  /* links on white (6.52:1)       */
  --teal-800:  #075043;
  --teal-900:  #05372F;

  /* ---- Leaf scale / تدرج الأخضر الورقي -------------------------------- */
  --leaf-50:   #F0F6EF;
  --leaf-100:  #DCEBDB;
  --leaf-200:  #BDD9BB;
  --leaf-300:  #9BC599;
  --leaf-400:  #85B983;
  --leaf-500:  #71AC6F;  /* brand */
  --leaf-600:  #5A9058;
  --leaf-700:  #467345;
  --leaf-800:  #345634;
  --leaf-900:  #243B24;

  /* ---- Neutrals / المحايدة -------------------------------------------- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F8F7;
  --neutral-100:  #EDEFEE;
  --neutral-200:  #DCDFDD;
  --neutral-300:  #C4C8C6;
  --neutral-400:  #AEAEAE;
  --neutral-500:  #8A8D8B;
  --neutral-600:  #6A6D6B;  /* muted text on white (5.23:1) */
  --neutral-700:  #4E514F;
  --neutral-800:  #3A3C3B;
  --neutral-900:  #2D2D2D;  /* body text (13.77:1) */
  --neutral-950:  #1A1C1B;

  /* ---- Supporting accents / ألوان مساندة ------------------------------ */
  --harvest:   #D98A0B;  /* offers, badges — max 10% of a layout */
  --soil:      #6B4F3A;  /* earthy backgrounds, print           */

  /* ---- Semantic / الألوان الدلالية ------------------------------------ */
  --success:      #2F9E5F;
  --success-bg:   #E8F6EE;
  --warning:      #D98A0B;
  --warning-bg:   #FDF3E1;
  --error:        #C2413C;
  --error-bg:     #FBEBEA;
  --info:         #2B7FB8;
  --info-bg:      #E9F2F9;

  /* ---- Semantic roles / أدوار الاستخدام ------------------------------- */
  --color-bg:            var(--neutral-0);
  --color-bg-subtle:     var(--neutral-50);
  --color-surface:       var(--neutral-0);
  --color-border:        var(--neutral-200);
  --color-text:          var(--neutral-900);
  --color-text-muted:    var(--neutral-600);
  --color-text-invert:   var(--neutral-0);
  --color-link:          var(--teal-700);
  --color-link-hover:    var(--teal-800);
  --color-action:        var(--teal-600);
  --color-action-hover:  var(--teal-700);
  --color-focus:         var(--teal-500);

  /* ---- Typography / الطباعة ------------------------------------------- */
  --font-ar: 'Tajawal', 'Noto Kufi Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-en: 'Tajawal', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;
  --fw-black:     800;

  /* Type scale — 1.25 major third, 16px base */
  --fs-xs:    0.75rem;   /* 12 — captions, legal        */
  --fs-sm:    0.875rem;  /* 14 — labels, helper text    */
  --fs-base:  1rem;      /* 16 — body                   */
  --fs-lg:    1.25rem;   /* 20 — lead paragraph         */
  --fs-xl:    1.563rem;  /* 25 — H4                     */
  --fs-2xl:   1.953rem;  /* 31 — H3                     */
  --fs-3xl:   2.441rem;  /* 39 — H2                     */
  --fs-4xl:   3.052rem;  /* 49 — H1                     */
  --fs-5xl:   3.815rem;  /* 61 — hero display           */

  /* Arabic needs more leading than Latin — الخط العربي يحتاج تباعد أسطر أكبر */
  --lh-tight:   1.25;
  --lh-heading: 1.4;   /* Arabic headings */
  --lh-body:    1.8;   /* Arabic body     */
  --lh-body-en: 1.65;  /* Latin body      */

  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.14em;  /* matches the logo's GREEN GENERATION lockup */

  /* ---- Spacing (8pt grid) / المسافات ---------------------------------- */
  --sp-1:  0.25rem;  /*  4 */
  --sp-2:  0.5rem;   /*  8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  3rem;     /* 48 */
  --sp-8:  4rem;     /* 64 */
  --sp-9:  6rem;     /* 96 */

  /* ---- Radius / الانحناءات -------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ---- Elevation / الظلال --------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(45,45,45,.06), 0 1px 3px rgba(45,45,45,.08);
  --shadow-md: 0 4px 12px rgba(45,45,45,.08), 0 2px 4px rgba(45,45,45,.04);
  --shadow-lg: 0 12px 32px rgba(45,45,45,.10), 0 4px 8px rgba(45,45,45,.04);
  --shadow-brand: 0 10px 28px rgba(14,164,137,.22);

  /* ---- Motion / الحركة ------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---- Layout / التخطيط ------------------------------------------------ */
  --container: 1200px;
  --container-narrow: 760px;
}

/* ---- Dark surfaces / الأسطح الداكنة ----------------------------------- */
[data-theme="dark"] {
  --color-bg:          var(--teal-900);
  --color-bg-subtle:   #06463A;
  --color-surface:     #06463A;
  --color-border:      rgba(255,255,255,.14);
  --color-text:        #EAF6F3;
  --color-text-muted:  #9BC3BA;
  --color-link:        var(--teal-200);
  --color-link-hover:  var(--teal-100);
  --color-action:      var(--teal-400);
  --color-action-hover:var(--teal-300);
}

/* ------------------------------------------------------------------------
   نسخة القالب: المتغيّرات فقط. قواعد المكوّنات (الأزرار، البطاقات، الأدوات)
   نُقلت إلى storefront.css كي لا تتنازع مع الأنماط التي يولّدها theme.json.
   المصدر الأصلي بلا نقص: brand-kit/ggen-tokens.css
   ------------------------------------------------------------------------ */