/* =====================================================================
   سنام العز — تطبيق العملاء (Prototype)
   base.css — الرموز التصميمية والأساسيات
   المصدر البصري: الصفحة الرئيسية docs/02-design/client-app/index.html (كانت سابقاً في مجلد homepage/)
   ===================================================================== */

/* ===================== الرموز التصميمية (Design Tokens) ===================== */
:root{
  /* الألوان — مستخرجة حرفيًا من الصفحة الرئيسية */
  --paper:#F7F3EA;          /* الخلفية الرملية */
  --card:#FFFFFF;
  --ink:#241E12;            /* نص أساسي بني داكن دافئ */
  --ink-2:#6B6353;          /* نص ثانوي */
  --line:#E7DEC9;           /* حدود */
  --green-900:#0C2E1D;
  --green-800:#123B27;
  --green-700:#175339;      /* الأخضر الأساسي */
  --green-600:#1E6A49;
  --green-tint:#E8F0EA;
  --gold-600:#8A6415;       /* الذهبي الأساسي — WCAG AA على الخلفية الفاتحة */
  --gold-500:#C89B3C;
  --gold-300:#E9D6A6;
  --gold-tint:#F6EDD8;
  --danger:#B3362B;
  --danger-tint:#F9E8E6;
  --live:#BF3A30;
  --success:#1E6A49;
  --warn:#8A6415;

  /* أسماء عامة مطلوبة في مواصفة المشروع — تشير لنفس القيم */
  --color-primary:var(--green-700);
  --color-primary-dark:var(--green-900);
  --color-gold:var(--gold-500);
  --color-sand:var(--gold-tint);
  --color-bg:var(--paper);
  --color-surface:var(--card);
  --color-muted:var(--ink-2);
  --color-border:var(--line);
  --color-text:var(--ink);

  /* الظلال */
  --shadow-sm:0 1px 2px rgba(36,30,18,.06);
  --shadow-md:0 6px 24px -8px rgba(36,30,18,.14);
  --shadow-lg:0 20px 50px -20px rgba(12,46,29,.35);

  /* الزوايا */
  --radius-sm:9px;
  --radius-md:14px;
  --radius:14px;
  --radius-lg:22px;

  /* سلم المسافات */
  --space-1:6px;
  --space-2:12px;
  --space-3:18px;
  --space-4:24px;
  --space-5:36px;
  --space-6:52px;

  --container-width:1200px;

  /* الخطوط */
  --font-display:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Arabic","Alexandria",system-ui,sans-serif;
}

/* الوضع الداكن — يُفعّل عبر data-theme="dark" (زر التبديل في الترويسة) */
:root[data-theme="dark"]{
  --paper:#12160F; --card:#1B211A; --ink:#F0EADC; --ink-2:#A79F8C; --line:#2E352B;
  --green-tint:#1E2B22; --gold-600:#D3AB55; --gold-500:#C89B3C; --gold-300:#7A6435; --gold-tint:#262215;
  --danger-tint:#332019;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 6px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 20px 50px -20px rgba(0,0,0,.6);
}

/* ===================== الأساسيات ===================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px;border-radius:6px}
.container{max-width:var(--container-width);margin-inline:auto;padding-inline:24px}

h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance;line-height:1.35}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* رابط التخطي للوحة المفاتيح وقارئات الشاشة */
.skip-link{
  position:absolute;top:-56px;right:16px;z-index:100;
  background:var(--green-700);color:#fff;font-weight:600;
  padding:12px 22px;border-radius:0 0 12px 12px;transition:top .15s;
}
.skip-link:focus{top:0}

/* ===================== عناوين الأقسام ===================== */
.section{padding-block:44px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:36px;flex-wrap:wrap}
.section-title h2{font-size:32px;font-weight:700}
.section-title .eyebrow{
  display:inline-block;font-size:13px;font-weight:600;
  color:var(--gold-600);margin-bottom:6px;
}
.hump-line{width:88px;height:12px;margin-top:10px;color:var(--green-700)}
.link-more{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  color:var(--green-700);padding:10px 6px;border-radius:8px;
}
:root[data-theme="dark"] .link-more{color:var(--gold-600)}
.link-more svg{width:18px;height:18px;transition:transform .2s}
.link-more:hover svg{transform:translateX(-4px)}

/* ===================== الأزرار ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 28px;border-radius:12px;
  font-family:var(--font-display);font-weight:600;font-size:16px;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn-primary{background:var(--green-700);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--green-600);box-shadow:var(--shadow-md)}
.btn-gold{background:var(--gold-500);color:#2B1F04}
.btn-gold:hover{background:#D9B25C}
.btn-outline{border:1.5px solid var(--green-700);color:var(--green-700);background:transparent}
.btn-outline:hover{background:var(--green-tint)}
:root[data-theme="dark"] .btn-outline{border-color:var(--gold-300);color:var(--ink)}
.btn-ghost-light{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}
.btn-light{background:#fff;color:var(--green-800)}
.btn-light:hover{background:#F1EBDD}
.btn-danger-outline{border:1.5px solid var(--danger);color:var(--danger);background:transparent}
.btn-danger-outline:hover{background:var(--danger-tint)}
.btn-block{width:100%}
.btn-sm{min-height:42px;padding:8px 18px;font-size:15px}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.cta-group{display:flex;gap:14px;flex-wrap:wrap}

/* ===================== الشارات ===================== */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px;
  background:var(--gold-tint);color:var(--gold-600);
}
.badge svg{width:14px;height:14px}
.badge-green{background:var(--green-tint);color:var(--green-700)}
:root[data-theme="dark"] .badge-green{color:#9BC7AC}
.badge-muted{background:var(--paper);color:var(--ink-2);border:1px solid var(--line)}
.badge-danger{background:var(--danger-tint);color:var(--danger)}

/* شارات الحالة — لا تعتمد على اللون وحده: النص يوضح الحالة دائمًا */
.status-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:999px;
}
.status-badge::before{content:"";width:8px;height:8px;border-radius:999px;background:currentColor}
.status-badge.st-internal{background:var(--paper);color:var(--ink-2);border:1px solid var(--line)}
.status-badge.st-published{background:var(--green-tint);color:var(--green-700)}
:root[data-theme="dark"] .status-badge.st-published{color:#9BC7AC}
.status-badge.st-sale{background:var(--gold-tint);color:var(--gold-600)}
.status-badge.st-auction{background:#EFE4F2;color:#6D3E7C}
:root[data-theme="dark"] .status-badge.st-auction{background:#2B2130;color:#C9A3D6}
.status-badge.st-rent{background:#E4EEF4;color:#2C5E7A}
:root[data-theme="dark"] .status-badge.st-rent{background:#1C2A33;color:#8FC0DB}
.status-badge.st-sold{background:var(--danger-tint);color:var(--danger)}
.status-badge.st-pending{background:var(--gold-tint);color:var(--gold-600)}
.status-badge.st-verified{background:var(--green-tint);color:var(--green-700)}
:root[data-theme="dark"] .status-badge.st-verified{color:#9BC7AC}
.status-badge.st-live{background:var(--live);color:#fff}
.status-badge.st-soon{background:var(--gold-500);color:#2B1F04}
.status-badge.st-ended{background:var(--paper);color:var(--ink-2);border:1px solid var(--line)}

/* ===================== السعر ===================== */
.price{display:inline-flex;align-items:baseline;gap:6px}
.price .amount{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--green-700);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .price .amount{color:var(--gold-600)}
.price .currency{font-size:14px;color:var(--ink-2);font-weight:600}
.price.price-sm .amount{font-size:19px}
.price.price-lg .amount{font-size:34px}

/* ===================== النماذج ===================== */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 20px}
.form-grid .span-2{grid-column:1 / -1}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field label{font-weight:600;font-size:14.5px}
.form-field .req{color:var(--danger);font-weight:700}
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field select,
.form-field textarea{
  font:inherit;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 14px;min-height:48px;width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.form-field textarea{min-height:110px;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--green-700);box-shadow:0 0 0 3px var(--green-tint);
}
.form-field .hint{font-size:13px;color:var(--ink-2)}
.form-field .error-text{font-size:13px;color:var(--danger);font-weight:600;display:flex;align-items:center;gap:6px}
.form-field.has-error input,.form-field.has-error select,.form-field.has-error textarea{border-color:var(--danger)}
.form-field input[readonly]{background:var(--paper);color:var(--ink-2)}

/* شريط تمرير (Range) — أُضيف 2026-07-30 لطلب مالك المنتج (معايير التقييم البشري 1–10).
   لا حقل نصي مصاحب افتراضيًا؛ يُقرأ القيمة عبر <output> مرتبط بـ for/id — انظر شاشة evaluation-form.html
   للنمط الكامل (تحديث القيمة + مزامنة خطوة المراجعة عبر سكربت مضمَّن خاص بتلك الشاشة). */
.form-field input[type="range"]{
  appearance:none;-webkit-appearance:none;width:100%;height:6px;border-radius:999px;
  background:var(--line);margin:16px 0 6px;cursor:pointer;
}
.form-field input[type="range"]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--gold-600);border:3px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;
}
.form-field input[type="range"]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--gold-600);
  border:3px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;
}
.form-field input[type="range"]:focus{outline:none}
.form-field input[type="range"]:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--green-tint)}
.form-field input[type="range"]:focus::-moz-range-thumb{box-shadow:0 0 0 4px var(--green-tint)}
.range-value{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.range-value output{font-size:16px;font-weight:700;color:var(--ink)}

.check-row{display:flex;align-items:flex-start;gap:10px;font-size:14.5px}
.check-row input{width:20px;height:20px;margin-top:4px;accent-color:var(--green-700);flex-shrink:0}

/* مفتاح تبديل (شكلي) */
.switch{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:46px;height:26px;cursor:pointer}
.switch .track{
  width:46px;height:26px;border-radius:999px;background:var(--line);
  transition:background .15s;flex-shrink:0;position:relative;
}
.switch .track::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;
  border-radius:999px;background:#fff;box-shadow:var(--shadow-sm);transition:transform .15s;
}
.switch input:checked + .track{background:var(--green-700)}
.switch input:checked + .track::after{transform:translateX(-20px)}
.switch input:focus-visible + .track{outline:3px solid var(--gold-500);outline-offset:2px}
.switch input:disabled + .track{opacity:.55;cursor:not-allowed}
.switch:has(input:disabled){cursor:not-allowed}

/* ===================== تنبيهات ورسائل ===================== */
.note{
  display:flex;gap:12px;align-items:flex-start;
  border-radius:var(--radius);padding:14px 18px;font-size:14.5px;line-height:1.8;
  border:1px solid var(--line);background:var(--card);
}
.note svg{width:20px;height:20px;flex-shrink:0;margin-top:4px}
.note-info{background:var(--green-tint);border-color:transparent;color:var(--green-800)}
:root[data-theme="dark"] .note-info{color:#CFE4D6}
.note-gold{background:var(--gold-tint);border-color:transparent;color:#6B4E10}
:root[data-theme="dark"] .note-gold{color:#E9D6A6}
.note-danger{background:var(--danger-tint);border-color:transparent;color:var(--danger)}
.note b{font-weight:700}

/* =====================================================================
   الأنماط اللونية القابلة للتبديل (Palettes)
   الأخضر هو النمط الأساسي في :root أعلاه؛ والأنماط الأخرى تُفعّل
   عبر data-palette على <html> من مبدّل الترويسة. النمط الافتراضي
   المحفوظ في localStorage هو "brown" (يُضبط في سكربت التهيئة المبكر).
   ===================================================================== */

/* رموز إضافية للنمط الأخضر الافتراضي — يستهلكها البطل المصغّر والعناوين على الخلفيات الداكنة */
:root{
  --hero-g1:#2E5E43; --hero-g2:#1C4A31; --hero-g3:#123B27;
  --accent-hi:#E9C87A; --accent-soft:#E9D6A6;
  --header-bg:#123B27;      /* خلفية شريط القائمة العلوي — تتبدل مع النمط اللوني */
  --header-ink:#F2ECDD;     /* لون روابط القائمة على الخلفية الداكنة */
}

/* ---------- النمط الجملي ---------- */
:root[data-palette="camel"]{
  --paper:#FAF4E9; --card:#FFFFFF; --ink:#3E2E1B; --ink-2:#7A6A53; --line:#EFE3CC;
  --green-900:#4E3419; --green-800:#6B4A28; --green-700:#8C6239; --green-600:#A87944; --green-tint:#F3E9D6;
  --gold-600:#8F6A20; --gold-500:#D9A441; --gold-300:#EAD3A0; --gold-tint:#F6ECD6;
  --hero-g1:#BC8E58; --hero-g2:#A87944; --hero-g3:#8C6239;
  --accent-hi:#F5DFA9; --accent-soft:#F1E3C2;
  --header-bg:#6B4A28;
}
:root[data-palette="camel"][data-theme="dark"]{
  --paper:#171209; --card:#211A10; --ink:#F2E9D8; --ink-2:#B0A28A; --line:#352B1D;
  --green-tint:#2C2213; --gold-600:#DDB05E; --gold-300:#7A6435; --gold-tint:#292013;
}

/* ---------- النمط البرتقالي ---------- */
:root[data-palette="orange"]{
  --paper:#FAF2E6; --card:#FFFFFF; --ink:#3C2414; --ink-2:#7A5B48; --line:#F1E4CE;
  --green-900:#6E2A11; --green-800:#8A3618; --green-700:#A8451B; --green-600:#C4561D; --green-tint:#F8E7DA;
  --gold-600:#A05E12; --gold-500:#E0912F; --gold-300:#F2C489; --gold-tint:#F9EBD5;
  --hero-g1:#D96A2B; --hero-g2:#C4561D; --hero-g3:#A8451B;
  --accent-hi:#F6C377; --accent-soft:#F5D6A6;
  --header-bg:#8A3618;
}
:root[data-palette="orange"][data-theme="dark"]{
  --paper:#191008; --card:#241710; --ink:#F4E9DE; --ink-2:#B39D8D; --line:#3A281C;
  --green-tint:#2E1D12; --gold-600:#E8A34C; --gold-300:#7A5835; --gold-tint:#2B1D10;
}

/* ---------- النمط البني الداكن (الافتراضي) ---------- */
:root[data-palette="brown"]{
  --paper:#F5F1EB; --card:#FFFFFF; --ink:#2E2118; --ink-2:#6E5B48; --line:#E8E0D4;
  --green-900:#3B2A1F; --green-800:#55402E; --green-700:#C0532B; --green-600:#D06437; --green-tint:#F6EADF;
  --gold-600:#8F6A20; --gold-500:#D9A441; --gold-300:#EAD3A0; --gold-tint:#F3EBDD;
  --hero-g1:#4A3526; --hero-g2:#3B2A1F; --hero-g3:#2B1E15;
  --accent-hi:#E8B95C; --accent-soft:#EFD9AC;
  --header-bg:#3B2A1F;
}
:root[data-palette="brown"][data-theme="dark"]{
  --paper:#171108; --card:#221912; --ink:#F2EADF; --ink-2:#AF9E8D; --line:#382B20;
  --green-tint:#2E2318; --gold-600:#DFAF56; --gold-300:#7A6435; --gold-tint:#2A2012;
}