/* ============================================================
   tokens.css — مصدر الحقيقة الوحيد للألوان والمقاييس
   Light + Dark عبر [data-theme]. لا ألوان inline في أي ملف آخر.
   الهوية: أخضر غامق (متوافق مع هوية التطبيق #0B6E4F) + لمسة كهرمانية.
   ============================================================ */

:root {
  /* --- Brand --- */
  --color-primary:        #0B6E4F;
  --color-primary-dark:   #075039;
  --color-primary-light:  #11976E;
  --color-primary-soft:   rgba(11, 110, 79, 0.08);
  --color-primary-border: rgba(11, 110, 79, 0.35);
  --color-on-primary:     #FFFFFF;
  --color-accent:         #B45309;
  --color-accent-soft:    rgba(180, 83, 9, 0.10);
  --color-on-accent:      #FFFFFF;

  /* --- Surfaces (Light) --- */
  --color-background:        #F3F6F4;
  --color-surface:           #FFFFFF;
  --color-surface-elevated:  #FFFFFF;
  --color-surface-sunken:    #EAEFEC;
  --color-border:            #DFE6E1;
  --color-border-strong:     #C4CEC8;

  /* --- Text (Light) --- */
  --color-text:        #171D1A;
  --color-text-muted:  #57645D;
  --color-text-faint:  #7C8781;

  /* --- Feedback (Light) --- */
  --color-success:       #15803D;
  --color-success-soft:  rgba(21, 128, 61, 0.10);
  --color-warning:       #92580A;
  --color-warning-soft:  rgba(146, 88, 10, 0.10);
  --color-danger:        #C22424;
  --color-danger-soft:   rgba(194, 36, 36, 0.09);
  --color-info:          #0B6394;
  --color-info-soft:     rgba(11, 99, 148, 0.09);
  --color-on-status:     #FFFFFF;

  /* --- Interaction --- */
  --focus-ring: 0 0 0 3px rgba(11, 110, 79, 0.35);
  --overlay:    rgba(10, 16, 13, 0.55);

  /* --- Spacing scale --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  /* --- Typography --- */
  --font-sans: "Inter", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar:   "Cairo", "Inter", system-ui, sans-serif;
  --text-xs:  0.75rem;  --text-sm:  0.875rem; --text-md: 1rem;
  --text-lg:  1.125rem; --text-xl:  1.375rem;
  --text-2xl: 1.75rem;  --text-3xl: 2.25rem;  --text-4xl: 3rem;
  --leading-tight: 1.25; --leading-body: 1.65;

  /* --- Radius / Shadow --- */
  --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 25, 20, 0.06), 0 1px 6px rgba(15, 25, 20, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 25, 20, 0.08), 0 8px 24px rgba(15, 25, 20, 0.08);
  --shadow-lg: 0 8px 20px rgba(15, 25, 20, 0.12), 0 20px 48px rgba(15, 25, 20, 0.14);

  /* --- Layout --- */
  --container: 1180px;
  --content:   760px;
  --topbar-h:  64px;

  /* --- Motion --- */
  --transition-fast: 140ms ease;
  --transition-med:  240ms ease;

  color-scheme: light;
}

/* ================= Dark theme ================= */
[data-theme="dark"] {
  --color-primary:        #2FB57F;
  --color-primary-dark:   #269868;
  --color-primary-light:  #4CCB98;
  --color-primary-soft:   rgba(47, 181, 127, 0.12);
  --color-primary-border: rgba(47, 181, 127, 0.45);
  --color-on-primary:     #06130D;
  --color-accent:         #E09A3E;
  --color-accent-soft:    rgba(224, 154, 62, 0.14);
  --color-on-accent:      #1A1206;

  --color-background:        #0D1411;
  --color-surface:           #141C18;
  --color-surface-elevated:  #1B2620;
  --color-surface-sunken:    #0A100D;
  --color-border:            #26332C;
  --color-border-strong:     #3A4A42;

  --color-text:        #E9EFEB;
  --color-text-muted:  #A2B0A8;
  --color-text-faint:  #77857D;

  --color-success:       #4ADE80;
  --color-success-soft:  rgba(74, 222, 128, 0.12);
  --color-warning:       #FBBF24;
  --color-warning-soft:  rgba(251, 191, 36, 0.12);
  --color-danger:        #F87171;
  --color-danger-soft:   rgba(248, 113, 113, 0.12);
  --color-info:          #7DD3FC;
  --color-info-soft:     rgba(125, 211, 252, 0.10);
  --color-on-status:     #0B1210;

  --focus-ring: 0 0 0 3px rgba(47, 181, 127, 0.45);
  --overlay:    rgba(2, 6, 4, 0.7);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}