/* Alshanab.ai — الهوية البصرية (v3 · 2026-10-11)
   المصدر الوحيد للألوان والأسطح والخطوط. كل أداة (ريلز، كاروسيل، ميديا كِت) بتقرأ من هون.
   --k = معامل التكبير: 1 للويب، 2.7 لفيديو/صورة بعرض 1080. */
:root {
  --k: 1;

  /* أرضية وحبر */
  --bg: #fff; --bg-surface: #f6f6f7; --bg-edge: #eef0f3;
  --ground: radial-gradient(90% 80% at 50% 20%, #fff 0, #fff 55%, #eef0f3 100%);
  --fg: #111; --text-2: #545454; --text-3: #717171; /* ألوان النص دايماً مصمتة: الشفافية بتبيّن تداخل الحروف العربية */
  --edge: rgba(0, 0, 0, 0.1);
  --accent: #0071e3; --accent-deep: #0a4fa3; --marker: #cfe3fa;

  /* لوحة النغمات (هادية، مش فاقعة) */
  --sun: #d9a43a; --tangerine: #c8703e; --coral: #b8564a; --pink: #b55a78; --lilac: #7e6bb8;
  --sky: #4f7fb8; --cobalt: #34509a; --mint: #3d8a70; --lime: #8d9a3e; --teal: #2f7c7a;
  --sun-deep: #8a5d18; --tangerine-deep: #9a4d1f; --coral-deep: #9a3f35; --pink-deep: #8f3b5a;
  --lilac-deep: #5b4a99; --sky-deep: #2f5f8f; --mint-deep: #2c6e57;

  /* زوايا */
  --radius-sm: calc(10px * var(--k)); --radius-md: calc(18px * var(--k));
  --radius-lg: calc(26px * var(--k)); --radius-xl: calc(36px * var(--k)); --radius-tile: 22.4%;

  /* خطوط: كلها خط ثمانية (tool/fonts/thmanyah) */
  --font-display: "Brand Display", serif;   /* thmanyah serif display · 900 */
  --font-text: "Brand Text", serif;         /* thmanyah serif text · 500-700 */
  --font-ui: "Brand Sans", sans-serif;      /* thmanyah sans */
}

/* نغمة لكل نوع محتوى: حط الكلاس على البطاقة */
.tone-clay   { --tone-rgb: 217 119 87;  --tone-a: 229 138 104; --tone-c: 196 98 63;  --tone-deep: #9a3f25; --tone-hi: 255 214 190; --tone-lo: 140 50 30; }
.tone-lilac  { --tone-rgb: 101 72 194;  --tone-a: 132 102 218; --tone-c: 78 54 160;  --tone-deep: #4f3d99; --tone-hi: 214 200 255; --tone-lo: 48 30 110; }
.tone-teal   { --tone-rgb: 22 150 134;  --tone-a: 44 170 152;  --tone-c: 15 110 98;  --tone-deep: #0f6157; --tone-hi: 190 240 228; --tone-lo: 8 66 60; }
.tone-cobalt { --tone-rgb: 31 120 196;  --tone-a: 58 142 214;  --tone-c: 20 88 150;  --tone-deep: #144f82; --tone-hi: 196 224 250; --tone-lo: 10 50 96; }
.tone-sun    { --tone-rgb: 232 152 40;  --tone-a: 240 172 70;  --tone-c: 200 122 24; --tone-deep: #8a5410; --tone-hi: 255 232 180; --tone-lo: 120 70 8; }
.tone-pink   { --tone-rgb: 214 61 122;  --tone-a: 226 92 146;  --tone-c: 176 40 98;  --tone-deep: #9b2257; --tone-hi: 255 204 226; --tone-lo: 110 16 58; }
.tone-ink    { --tone-rgb: 24 24 26;    --tone-a: 44 44 48;    --tone-c: 14 14 15;   --tone-deep: #111;    --tone-hi: 130 130 140; --tone-lo: 0 0 0; }

/* ── أسطح ── */
.glass { /* زجاج حليبي: كروت المحتوى على الأرضية البيضا */
  position: relative; isolation: isolate; border-radius: var(--radius-lg);
  background: radial-gradient(70% 45% at 22% -6%, rgba(255,255,255,.5), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  box-shadow: inset calc(1.5px*var(--k)) calc(2px*var(--k)) 0 calc(-.5px*var(--k)) rgba(255,255,255,.95), 0 0 0 calc(1px*var(--k)) rgba(18,18,18,.08),
    0 calc(2px*var(--k)) calc(4px*var(--k)) rgba(0,0,0,.05), 0 calc(18px*var(--k)) calc(30px*var(--k)) calc(-14px*var(--k)) rgba(0,0,0,.22);
}
.band { /* بطاقة ملوّنة: البطل بكل صفحة/مشهد. دايماً مع tone-* */
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); color: #fff;
  background: radial-gradient(70% 60% at 85% 10%, rgb(var(--tone-hi) / .55), transparent 60%), radial-gradient(80% 70% at 10% 100%, rgb(var(--tone-lo) / .45), transparent 60%),
    linear-gradient(150deg, rgb(var(--tone-a)), rgb(var(--tone-rgb)) 45%, rgb(var(--tone-c)));
  box-shadow: inset calc(1.5px*var(--k)) calc(2px*var(--k)) 0 calc(-.5px*var(--k)) rgba(255,255,255,.55), inset calc(-1px*var(--k)) calc(-1.5px*var(--k)) 0 calc(-.5px*var(--k)) rgba(255,255,255,.2),
    0 calc(30px*var(--k)) calc(60px*var(--k)) calc(-28px*var(--k)) rgb(var(--tone-c) / .75), 0 calc(12px*var(--k)) calc(24px*var(--k)) calc(-12px*var(--k)) rgba(0,0,0,.18);
}
.tint { /* بطاقة فاتحة بلمسة لون (للأسعار/الخلاصة) */
  position: relative; isolation: isolate; border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 100% 0, rgb(var(--tone-rgb) / .34), transparent 58%), radial-gradient(90% 70% at 0 100%, rgb(var(--tone-rgb) / .16), transparent 60%), linear-gradient(165deg, rgba(255,255,255,.94), rgb(var(--tone-rgb) / .1));
  box-shadow: inset 0 calc(3px*var(--k)) 0 rgb(var(--tone-rgb) / .9), 0 0 0 calc(1px*var(--k)) rgb(var(--tone-rgb) / .3), 0 calc(34px*var(--k)) calc(60px*var(--k)) calc(-30px*var(--k)) rgb(var(--tone-rgb) / .7), 0 calc(14px*var(--k)) calc(24px*var(--k)) calc(-14px*var(--k)) rgba(0,0,0,.18);
}
.tile { /* مربعات الأيقونات العايمة بالخلفية */
  border-radius: var(--radius-tile); background: #fff;
  box-shadow: 0 calc(18px*var(--k)) calc(30px*var(--k)) calc(-14px*var(--k)) rgba(0,0,0,.35), 0 0 0 calc(1px*var(--k)) rgba(18,18,18,.06);
}

/* ── عناصر ── */
.btn-dark { /* الزر الأساسي: حبة سودا لمّاعة */
  display: inline-flex; align-items: center; justify-content: center; color: #fff; border-radius: 999px; font-weight: 600;
  padding: calc(.8rem*var(--k)) calc(1.4rem*var(--k));
  background: radial-gradient(80% 60% at 28% 0, rgba(255,255,255,.28), transparent 70%), linear-gradient(160deg, rgba(28,28,30,.96), rgba(18,18,18,.9));
  box-shadow: inset calc(1.5px*var(--k)) calc(2px*var(--k)) 0 calc(-.5px*var(--k)) rgba(255,255,255,.45), inset 0 0 0 calc(1px*var(--k)) rgba(255,255,255,.08), 0 calc(2px*var(--k)) calc(4px*var(--k)) rgba(0,0,0,.12), 0 calc(14px*var(--k)) calc(28px*var(--k)) calc(-12px*var(--k)) rgba(0,0,0,.45);
}
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; color: var(--fg); border-radius: 999px; font-weight: 500;
  padding: calc(8px*var(--k)) calc(18px*var(--k));
  background: radial-gradient(80% 60% at 28% 0, rgba(255,255,255,.9), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  box-shadow: inset calc(1.5px*var(--k)) calc(2px*var(--k)) 0 calc(-.5px*var(--k)) #fff, 0 0 0 calc(1px*var(--k)) rgba(18,18,18,.09), 0 calc(14px*var(--k)) calc(26px*var(--k)) calc(-14px*var(--k)) rgba(0,0,0,.22);
}
.chip { display: inline-flex; align-items: center; border: calc(1px*var(--k)) solid var(--edge); background: rgba(255,255,255,.7); border-radius: 999px; padding: calc(.45rem*var(--k)) calc(.9rem*var(--k)); color: var(--fg); }
.chip-glass { /* شريحة فوق بطاقة ملوّنة */
  display: inline-flex; align-items: center; border-radius: 999px; padding: calc(.35rem*var(--k)) calc(.8rem*var(--k)); font-weight: 600; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,.32), rgba(255,255,255,.12));
  box-shadow: inset calc(1px*var(--k)) calc(1.5px*var(--k)) 0 calc(-.5px*var(--k)) rgba(255,255,255,.7), 0 0 0 calc(1px*var(--k)) rgba(255,255,255,.18);
}
.tone-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: calc(.3rem*var(--k)) calc(.75rem*var(--k)); font-weight: 600; color: var(--tone-deep); background: rgb(var(--tone-rgb) / .14); box-shadow: inset 0 0 0 calc(1px*var(--k)) rgb(var(--tone-rgb) / .3); }
.marker { /* التظليل دايماً ورا النص، على النص السفلي من الكلمة */
  background-image: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%); padding-inline: .08em;
}
.band .marker { --marker: rgba(255, 255, 255, 0.28); }