/* ============================================================
   نظام تصميم العرين · tokens.css
   مشتق من دليل الهوية الرسمي (Ostudio 2025). هوية العرين فقط — صفر آزر.
   ============================================================ */

/* ---------- الخط الرسمي: Lyon Arabic Display ---------- */
@font-face{ font-family:"Lyon"; src:url("assets/fonts/lyon-ar-light.ttf") format("truetype");   font-weight:300; font-display:swap; }
@font-face{ font-family:"Lyon"; src:url("assets/fonts/lyon-ar-regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Lyon"; src:url("assets/fonts/lyon-ar-medium.ttf") format("truetype");  font-weight:500; font-display:swap; }
@font-face{ font-family:"Lyon"; src:url("assets/fonts/lyon-ar-bold.ttf") format("truetype");    font-weight:700; font-display:swap; }

:root{
  /* اللوحة الرسمية المغلقة (٤ ألوان — بلا accent خارجها) */
  --camel:#d6a26e;        /* اللون المهيمن · السطح الرئيسي */
  --camel-d:#b07f4e;      /* جملي أغمق · للحالات (hover) فقط — مشتق ويب */
  --brown:#8e735d;        /* بني قهوة */
  --beige:#ab9a8c;        /* بيج */
  --black:#000000;        /* أسود */
  --cream:#f4ede0;        /* كريمي · سطح فاتح بديل مشتق */

  /* أدوار دلالية */
  --surface:var(--camel);     /* الخلفية الافتراضية للعلامة = جملي لا أبيض */
  --ink:var(--black);
  --on-camel:var(--black);    /* النص على الجملي */
  --on-brown:var(--camel);    /* النص على القهوة */
  --on-black:var(--camel);    /* النص على الأسود */

  /* الخط */
  --font:"Lyon", serif;
  --num-ar:"Lyon", serif;     /* أرقام عربية ٠-٩ تُكتب في المحتوى */

  /* سلّم الأحجام (مشتق من الدليل · مقاسات ويب) */
  --t-h1:clamp(40px, 7vw, 96px);
  --t-h2:clamp(30px, 4.5vw, 60px);
  --t-h3:clamp(22px, 3vw, 38px);
  --t-body:clamp(16px, 1.5vw, 21px);
  --t-cta:19px;
  --t-label:13px;
  --lh-tight:1.12;
  --lh-body:1.55;

  /* المسافات (هامش رقمي 80px · gutter 24px) */
  --margin:80px;
  --gutter:24px;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px; --space-6:120px;

  /* الموتيف: الزاوية المشطوفة 45° */
  --chamfer:22px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font); font-weight:400; color:var(--ink);
  background:var(--surface); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
[dir="rtl"]{ text-align:right; }

/* ---------- الطباعة ---------- */
.h1{ font-size:var(--t-h1); font-weight:700; line-height:var(--lh-tight); letter-spacing:-.01em; }
.h2{ font-size:var(--t-h2); font-weight:500; line-height:1.15; }
.h3{ font-size:var(--t-h3); font-weight:500; line-height:1.2; }
.body{ font-size:var(--t-body); font-weight:300; line-height:var(--lh-body); }
.lead{ font-size:clamp(18px,2vw,26px); font-weight:300; line-height:1.5; }
.label{ font-size:var(--t-label); font-weight:500; letter-spacing:.22em; text-transform:uppercase; }
.en{ font-family:var(--font); letter-spacing:.04em; } /* لاتيني Lyon */

/* ---------- الموتيف: كتلة/إطار مشطوف الزاوية ---------- */
/* قطع زاويتين (أعلى-يسار + أسفل-يمين) — توقيع العرين */
.chamfer{
  clip-path:polygon(
    var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)
  );
}
/* قطع زاوية واحدة (أعلى-يسار) — كما في الأغلفة */
.chamfer-tl{
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer));
}

/* ---------- الأزرار: pill (الاستدارة الوحيدة) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font); font-size:var(--t-cta); font-weight:500;
  padding:14px 32px; border-radius:999px; border:1.5px solid var(--black);
  background:var(--camel); color:var(--black); cursor:pointer;
  text-decoration:none; transition:background .2s, color .2s;
}
.btn:hover{ background:var(--black); color:var(--camel); }
.btn.ghost{ background:transparent; }
.btn.ghost:hover{ background:var(--black); color:var(--camel); }

/* ---------- أسطح ---------- */
.s-camel{ background:var(--camel); color:var(--on-camel); }
.s-brown{ background:var(--brown); color:var(--on-brown); }
.s-black{ background:var(--black); color:var(--on-black); }
.s-cream{ background:var(--cream); color:var(--black); }
/* ملاحظة الدليل: لا تجمع جملي+بيج (تباين ضعيف) */

/* ---------- شبكة ---------- */
.wrap{ max-width:1280px; margin:0 auto; padding-inline:clamp(20px, 6vw, 80px); }
.frame-img{ overflow:hidden; }
.frame-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ممنوع في كل النظام: تدرجات · ظلال · لون خارج اللوحة · استدارة (إلا pill) */