/* ============================================================
   نَسَق — رموز التصميم (Design Tokens)
   قماشة زيتونية دافئة (OKLCH)، ألوان فئات نابضة، خط Brando Arabic،
   وحلقات تقدّم كموتيف. مع "جسر" يربط أسماء متغيّرات التطبيق القديمة
   بأسماء نَسَق فيتبنّى كامل التطبيق الهوية دون تعديل كل سطر.
   ============================================================ */

/* ---------- الخط: Brando Arabic (مستضاف محليًا، الأوزان السبعة بلا 800) ---------- */
@font-face { font-family:"brando-arabic"; font-style:normal; font-weight:200; font-display:swap; src:url("../fonts/brando/brando-arabic-200.otf") format("opentype"); }
@font-face { font-family:"brando-arabic"; font-style:normal; font-weight:300; font-display:swap; src:url("../fonts/brando/brando-arabic-300.otf") format("opentype"); }
@font-face { font-family:"brando-arabic"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/brando/brando-arabic-400.otf") format("opentype"); }
@font-face { font-family:"brando-arabic"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/brando/brando-arabic-500.otf") format("opentype"); }
@font-face { font-family:"brando-arabic"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/brando/brando-arabic-600.otf") format("opentype"); }
@font-face { font-family:"brando-arabic"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/brando/brando-arabic-700.otf") format("opentype"); }
@font-face { font-family:"brando-arabic"; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts/brando/brando-arabic-900.otf") format("opentype"); }

:root {
  /* ===== القماشة والأسطح — زيتوني داكن دافئ (لا أسود مسطّح) ===== */
  --olive-950: oklch(0.17 0.017 122);
  --olive-900: oklch(0.205 0.020 121);
  --olive-850: oklch(0.235 0.022 120);
  --olive-800: oklch(0.262 0.023 119);
  --olive-750: oklch(0.298 0.024 118);
  --olive-700: oklch(0.345 0.026 117);
  --olive-600: oklch(0.44 0.028 116);
  --olive-500: oklch(0.56 0.028 115);

  /* ===== النص — أبيض دافئ مائل (نتجنّب الأبيض النقي) ===== */
  --paper-50: oklch(0.965 0.010 100);
  --paper-100: oklch(0.93 0.012 104);
  --ink-1: oklch(0.96 0.010 101);
  --ink-2: oklch(0.85 0.014 106);
  --ink-3: oklch(0.70 0.018 110);
  --ink-4: oklch(0.56 0.020 113);

  /* ===== الشعيرات والفواصل ===== */
  --line-soft: color-mix(in oklch, var(--paper-50) 8%, transparent);
  --line-mid: color-mix(in oklch, var(--paper-50) 14%, transparent);
  --line-strong: color-mix(in oklch, var(--paper-50) 24%, transparent);

  /* ===== الأساسي — "الزيتوني وقد دبّت فيه الحياة" ===== */
  --primary: oklch(0.80 0.185 126);
  --primary-hi: oklch(0.86 0.19 127);
  --primary-lo: oklch(0.70 0.17 125);
  --primary-ink: oklch(0.22 0.06 128);
  --primary-wash: color-mix(in oklch, var(--primary) 16%, transparent);

  /* ===== ألوان الفئات — لونٌ لكل مجال ===== */
  --c-workout: oklch(0.83 0.19 129);
  --c-food: oklch(0.73 0.17 38);
  --c-money: oklch(0.82 0.16 82);
  --c-habits: oklch(0.78 0.165 58);
  --c-water: oklch(0.80 0.12 212);
  --c-mood: oklch(0.76 0.135 305);
  --c-sleep: oklch(0.73 0.13 268);
  --c-reading: oklch(0.75 0.155 14);
  --c-tasks: oklch(0.80 0.13 190);
  --c-goals: oklch(0.81 0.17 100);

  /* ===== الدلالة ===== */
  --accent-c: var(--primary);
  --success: oklch(0.80 0.18 145);
  --danger: oklch(0.66 0.19 27);
  --danger-hi: oklch(0.72 0.20 28);
  --info: var(--c-water);
  --focus-ring: color-mix(in oklch, var(--primary) 70%, transparent);

  /* ===== الغسلات (washes) ===== */
  --wash-workout: color-mix(in oklch, var(--c-workout) 16%, transparent);
  --wash-food: color-mix(in oklch, var(--c-food) 18%, transparent);
  --wash-money: color-mix(in oklch, var(--c-money) 16%, transparent);
  --wash-habits: color-mix(in oklch, var(--c-habits) 16%, transparent);
  --wash-water: color-mix(in oklch, var(--c-water) 18%, transparent);
  --wash-mood: color-mix(in oklch, var(--c-mood) 18%, transparent);
  --wash-sleep: color-mix(in oklch, var(--c-sleep) 20%, transparent);
  --wash-reading: color-mix(in oklch, var(--c-reading) 18%, transparent);

  /* ===== أسماء الأسطح الدلالية ===== */
  --bg-page: var(--olive-950);
  --bg-canvas: var(--olive-900);
  --surface-card: var(--olive-800);
  --surface-raised: var(--olive-750);
  --surface-hover: var(--olive-700);
  --surface-well: var(--olive-850);

  /* ===== الطباعة ===== */
  --font-sans: "brando-arabic", "Segoe UI", system-ui, sans-serif;
  --fw-thin: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;
  --fs-display-xl: clamp(3.2rem, 6vw, 5.5rem);
  --fs-display-lg: clamp(2.4rem, 4vw, 3.6rem);
  --fs-display-md: clamp(1.9rem, 3vw, 2.6rem);
  --fs-title-lg: 1.75rem;
  --fs-title-md: 1.375rem;
  --fs-title-sm: 1.125rem;
  --fs-body-lg: 1.0625rem;
  --fs-body: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-micro: 0.6875rem;
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.7; --lh-relaxed: 1.9;
  --ls-display: -0.01em; --ls-caps: 0.14em;

  /* ===== المسافات (إيقاع 4px) ===== */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px; --sp-11:96px; --sp-12:128px;
  --gutter: clamp(16px, 3vw, 40px);
  --content-max: 1280px;
  --sidebar-w: 264px;

  /* ===== الحواف ===== */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-2xl:40px; --r-3xl:56px; --r-pill:999px;

  /* ===== الظلال والإضاءة ===== */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.32);
  --shadow-2: 0 6px 20px -6px rgba(0,0,0,0.45);
  --shadow-3: 0 16px 48px -12px rgba(0,0,0,0.55);
  --shadow-4: 0 28px 80px -20px rgba(0,0,0,0.62);
  --rim-top: inset 0 1px 0 color-mix(in oklch, var(--paper-50) 8%, transparent);
  --glow-primary: 0 0 48px -10px color-mix(in oklch, var(--primary) 60%, transparent);
  --glow-soft: 0 0 32px -12px color-mix(in oklch, var(--primary) 45%, transparent);

  /* ===== الحركة (مقتصدة) ===== */
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:380ms; --dur-slower:620ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     الجسر — أسماء التطبيق القديمة → رموز نَسَق
     ============================================================ */
  --bg: var(--bg-page);
  --bg-elevated: var(--surface-card);
  --bg-sunken: var(--surface-well);
  --bg-hover: var(--surface-hover);

  --border: var(--line-soft);
  --border-strong: var(--line-strong);

  --text: var(--ink-1);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-inverted: var(--primary-ink);

  --accent: var(--primary);
  --accent-hover: var(--primary-hi);
  --accent-soft: var(--primary-wash);
  --accent-soft-text: var(--primary-hi);

  --danger-soft: color-mix(in oklch, var(--danger) 16%, transparent);
  --success-soft: color-mix(in oklch, var(--success) 16%, transparent);
  --warning: var(--c-money);
  --warning-soft: color-mix(in oklch, var(--c-money) 16%, transparent);

  --color-water: var(--c-water);
  --color-food: var(--c-food);
  --color-training: var(--c-workout);
  --color-reading: var(--c-habits);
  --color-budget: var(--c-money);

  --radius-sm: var(--r-sm);
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-full: var(--r-pill);

  --shadow-sm: var(--shadow-1);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-3);

  --font-family: var(--font-sans);

  --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3);
  --space-4: var(--sp-4); --space-5: var(--sp-6); --space-6: var(--sp-7); --space-7: 48px;

  --text-xs: var(--fs-micro);
  --text-sm: var(--fs-caption);
  --text-base: var(--fs-body);
  --text-md: var(--fs-body-lg);
  --text-lg: var(--fs-title-md);
  --text-xl: var(--fs-title-lg);
  --text-2xl: var(--fs-display-md);

  --ease: var(--ease-out);
  --duration-fast: var(--dur-fast);
  --duration: var(--dur-base);
  --duration-slow: var(--dur-slow);

  --chart-grid: var(--line-soft);
  --skeleton-base: var(--surface-well);
  --skeleton-shine: var(--surface-hover);

  color-scheme: dark;
}

/* ============================================================
   الوضع الفاتح — قماشة كريمية دافئة، حبر زيتوني داكن
   ============================================================ */
:root[data-theme="light"] {
  --olive-950: oklch(0.955 0.010 100);
  --olive-900: oklch(0.945 0.013 101);
  --olive-850: oklch(0.915 0.016 103);
  --olive-800: oklch(0.895 0.018 104);
  --olive-750: oklch(0.885 0.019 104);
  --olive-700: oklch(0.865 0.020 105);
  --olive-600: oklch(0.62 0.030 112);
  --olive-500: oklch(0.52 0.030 113);

  --paper-50: oklch(0.255 0.038 128);
  --paper-100: oklch(0.30 0.032 126);
  --ink-1: oklch(0.29 0.034 125);
  --ink-2: oklch(0.42 0.030 122);
  --ink-3: oklch(0.53 0.026 119);
  --ink-4: oklch(0.63 0.024 117);

  --bg-page: oklch(0.962 0.010 100);
  --bg-canvas: oklch(0.950 0.012 101);
  --surface-card: oklch(0.995 0.005 100);
  --surface-raised: oklch(1 0 0);
  --surface-hover: oklch(0.915 0.016 103);
  --surface-well: oklch(0.923 0.015 104);

  --c-workout: oklch(0.60 0.17 132);
  --c-food: oklch(0.57 0.17 38);
  --c-money: oklch(0.60 0.13 76);
  --c-habits: oklch(0.60 0.15 54);
  --c-water: oklch(0.56 0.12 224);
  --c-mood: oklch(0.55 0.16 305);
  --c-sleep: oklch(0.52 0.14 268);
  --c-reading: oklch(0.57 0.18 20);
  --c-tasks: oklch(0.56 0.12 198);
  --c-goals: oklch(0.58 0.16 108);

  --primary: oklch(0.68 0.17 128);
  --primary-hi: oklch(0.62 0.17 128);
  --primary-lo: oklch(0.58 0.15 126);
  --primary-ink: oklch(0.99 0.02 128);
  --success: oklch(0.60 0.16 148);
  --danger: oklch(0.58 0.19 27);
  --danger-hi: oklch(0.52 0.20 27);

  --shadow-1: 0 1px 2px rgba(46,44,28,0.10);
  --shadow-2: 0 6px 20px -6px rgba(46,44,28,0.15);
  --shadow-3: 0 16px 44px -12px rgba(46,44,28,0.20);
  --shadow-4: 0 28px 72px -20px rgba(46,44,28,0.24);
  --rim-top: inset 0 0 0 1px color-mix(in oklch, var(--ink-1) 9%, transparent);
  --glow-primary: 0 0 44px -12px color-mix(in oklch, var(--primary) 45%, transparent);
  --glow-soft: 0 0 28px -14px color-mix(in oklch, var(--primary) 35%, transparent);

  color-scheme: light;
}