/* بومو — نظام التصميم. هادي ومسطّح زي Claude: أسطح صريحة، حدود رفيعة، نص صغير مقروء،
   ولون الدولة في التفاصيل بس (العلامة، زرار الإرسال، التحديد). فاتح وغامق حسب الجهاز أو اختيار المستخدم.
   لون الدولة بيحطّه js/theme.js، وكل الباقي محسوب منه هنا. */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=Noto+Naskh+Arabic:wght@500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* متسجّل كلون فعلي عشان التحوّل بين دولتين يبقى تدريجي */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #c96442; }

:root {
  color-scheme: light;
  --accent: #c96442;

  /* الأسطح — عاجي دافي */
  --background: #faf9f5;
  --sidebar-bg: #f5f4ed;
  --surface: #ffffff;
  --surface-sunken: #f0eee6;
  --surface-hover: rgb(31 30 29 / 0.05);
  --surface-press: rgb(31 30 29 / 0.09);
  --bubble: #f0eee6;

  --border: rgb(31 30 29 / 0.1);
  --border-strong: rgb(31 30 29 / 0.18);

  --text-primary: #141413;
  --text-secondary: #3d3d3a;
  --text-muted: #73726c;
  --text-faint: #7d7a72;
  --on-accent: #ffffff;

  /* مشتقات لون الدولة */
  --accent-ink: color-mix(in oklab, var(--accent) 88%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);
  --focus-ring: color-mix(in srgb, var(--accent) 24%, transparent);
  --focus: color-mix(in oklab, var(--accent) 85%, #000);

  /* الكود: جزيرة داكنة زي المحرّر في الوضعين */
  --code-bg: #1a1a18;
  --code-bar: #232321;
  --code-text: #e8e6e0;
  --code-muted: #8a877e;
  --code-line: rgb(255 255 255 / 0.07);

  --danger: #c4413a;
  --danger-soft: rgb(196 65 58 / 0.09);
  --success: #2f8a5b;

  --shadow-sm: 0 1px 2px rgb(31 30 29 / 0.06);
  --shadow-md: 0 1px 2px rgb(31 30 29 / 0.05), 0 6px 16px -8px rgb(31 30 29 / 0.14);
  --shadow-lg: 0 2px 6px rgb(31 30 29 / 0.06), 0 18px 44px -20px rgb(31 30 29 / 0.28);
  --scrim: rgb(20 20 19 / 0.32);

  /* الخطوط والمقاسات — صغيرة ومقروءة */
  --font-ui: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-display: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-md: 13.5px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 26px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;

  /* الحركة: منحنى دخول ناعم واحد، ومدد قصيرة */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 120ms var(--ease);
  --transition-normal: 220ms var(--ease);
  --transition-slow: 420ms var(--ease);
  --theme-morph: 900ms;

  --sidebar-width: 268px;
  --measure: 720px;

  transition: --accent var(--theme-morph) var(--ease-soft);
}

/* الغامق — زي Claude على الديسكتوب */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #262624;
  --sidebar-bg: #1f1e1d;
  --surface: #30302e;
  --surface-sunken: #1f1e1d;
  --surface-hover: rgb(255 255 255 / 0.05);
  --surface-press: rgb(255 255 255 / 0.09);
  --bubble: #141413;
  --border: rgb(255 255 255 / 0.09);
  --border-strong: rgb(255 255 255 / 0.16);
  --text-primary: #ececea;
  --text-secondary: #c2c0b6;
  --text-muted: #9c9a92;
  --text-faint: #8f8d85;
  /* لون الدولة بيفتح شوية عشان يبان على الغامق */
  --accent-ink: color-mix(in oklab, var(--accent) 70%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 55%, transparent);
  --code-bg: #1a1a18;
  --code-bar: #21211f;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 20px -8px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 2px 8px rgb(0 0 0 / 0.35), 0 24px 56px -20px rgb(0 0 0 / 0.65);
  --scrim: rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --theme-morph: 0ms; --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; }
}