/* ===== Zekra Bakery — skins, fonts and layouts =====================================
   Three independent axes, combined freely and saved per device by js/skinpick.js:

     data-skin="<id>"     a whole world: colours AND shapes (radius, borders, shadows, lift)
     data-font="<id>"     the type pairing (Latin + Arabic together)
     data-layout="<id>"   where things sit: grid, rows, magazine, dense, text-only

   Every skin MUST set the full token contract below with literal colours — tests/check-contrast.js
   parses this file, resolves each skin and fails the build on unreadable pairs.

     --cream        page background          --card-bg      surface (cards, boxes)
     --cream-deep   secondary surface        --line         hairlines and borders
     --ink          body text                --ink-soft     secondary text
     --gold         accent                   --gold-bright  accent hover / highlight
     --gold-dim     accent on dark           --foot-bg      footer background
     --foot-ink     footer text
   Shape tokens are optional; the defaults in style.css apply when a skin leaves them out. */

/* ═══════════════ shape defaults (the classic bakery) ═══════════════ */
:root{
  --radius:18px;            /* cards, boxes */
  --radius-pill:999px;      /* chips, buttons */
  --radius-img:0px;         /* corners inside a card image */
  --border-w:1px;
  --card-lift:-8px;         /* how far a card rises on hover */
  --img-filter:none;
  --texture:none;
  --btn-weight:600;
  --heading-transform:none;
  --heading-spacing:.2px;
  --chip-border:1px solid var(--line);
}

/* ═══════════════ 1. ليلي — dark ═══════════════ */
:root[data-skin="dark"]{
  --cream:#12100e; --cream-deep:#1b1815; --card-bg:#1c1917; --line:#2f2a25;
  --ink:#f2ece1; --ink-soft:#c3b8a8; --gold:#e0b062; --gold-bright:#f0c67f; --gold-dim:#6b5636;
  --foot-bg:#0b0a09; --foot-ink:#cdbf9f;
  --shadow:0 20px 50px -20px rgba(0,0,0,.7); --shadow-soft:0 10px 30px -15px rgba(0,0,0,.6);
  --img-filter:brightness(.94);
}

/* ═══════════════ 2. ورقي — newsprint: hard edges, rules instead of shadows ═══════════════ */
:root[data-skin="paper"]{
  --cream:#f7f4ec; --cream-deep:#eee9dc; --card-bg:#fffdf7; --line:#2a2723;
  --ink:#1a1815; --ink-soft:#4a4540; --gold:#8a3a2a; --gold-bright:#a94a36; --gold-dim:#d8c9b6;
  --foot-bg:#1a1815; --foot-ink:#e6dfd0;
  --radius:0px; --radius-pill:0px; --border-w:1.5px; --card-lift:0px;
  --shadow:none; --shadow-soft:none;
  --img-filter:grayscale(.35) contrast(1.08);
  --heading-transform:uppercase; --heading-spacing:.06em;
}
:root[data-skin="paper"] .card,
:root[data-skin="paper"] .ingredients-box,
:root[data-skin="paper"] .chip{border:var(--border-w) solid var(--line)}
:root[data-skin="paper"] .card:hover{background:var(--cream-deep)}

/* ═══════════════ 3. زجاجي — glass ═══════════════ */
:root[data-skin="glass"]{
  --cream:#e9eef7; --cream-deep:#dde5f2; --card-bg:rgba(255,255,255,.62); --line:rgba(70,90,130,.22);
  --ink:#141b2b; --ink-soft:#3d4761; --gold:#5a52c8; --gold-bright:#7a70e6; --gold-dim:#c3bef0;
  --foot-bg:#141b2b; --foot-ink:#cdd5e8;
  --radius:22px; --card-lift:-6px;
  --shadow:0 24px 60px -24px rgba(30,45,90,.4); --shadow-soft:0 12px 34px -18px rgba(30,45,90,.3);
}
:root[data-skin="glass"] body{background:linear-gradient(150deg,#e9eef7,#dbe6f8 45%,#efe6f6)}
:root[data-skin="glass"] .card,
:root[data-skin="glass"] .ingredients-box,
:root[data-skin="glass"] header.site,
:root[data-skin="glass"] .chip{backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.55)}

/* ═══════════════ 4. باستيل — pastel, very round ═══════════════ */
:root[data-skin="pastel"]{
  --cream:#fff6f8; --cream-deep:#ffe9ef; --card-bg:#ffffff; --line:#f3d7e0;
  --ink:#3d2430; --ink-soft:#7a5567; --gold:#c0447a; --gold-bright:#dc5f95; --gold-dim:#f6cfdf;
  --foot-bg:#3d2430; --foot-ink:#f5d9e4;
  --radius:28px; --radius-img:20px; --card-lift:-10px;
  --shadow:0 22px 44px -22px rgba(150,60,100,.35); --shadow-soft:0 12px 26px -14px rgba(150,60,100,.22);
}

/* ═══════════════ 5. ذهبي فاخر — luxury: black and thin gold ═══════════════ */
:root[data-skin="luxury"]{
  --cream:#0d0c0a; --cream-deep:#15130f; --card-bg:#161410; --line:#3d3320;
  --ink:#f4ecdc; --ink-soft:#c0b193; --gold:#d3ab55; --gold-bright:#efc978; --gold-dim:#7a6231;
  --foot-bg:#080706; --foot-ink:#c8b48a;
  --radius:2px; --radius-pill:2px; --border-w:1px; --card-lift:-4px;
  --shadow:0 24px 60px -30px rgba(0,0,0,.9); --shadow-soft:0 12px 30px -18px rgba(0,0,0,.8);
  --heading-transform:uppercase; --heading-spacing:.14em;
}
:root[data-skin="luxury"] .card,
:root[data-skin="luxury"] .ingredients-box{border:1px solid var(--gold-dim)}

/* ═══════════════ 6. ريترو — 70s bistro poster ═══════════════ */
:root[data-skin="retro"]{
  --cream:#f6ead2; --cream-deep:#eddcbb; --card-bg:#fff8e8; --line:#c39a4e;
  --ink:#2b1f10; --ink-soft:#5c4526; --gold:#a8481f; --gold-bright:#c85c2a; --gold-dim:#e0be7f;
  --foot-bg:#2b1f10; --foot-ink:#e8d2a4;
  --radius:6px; --radius-pill:6px; --border-w:2px; --card-lift:-3px;
  --shadow:6px 6px 0 rgba(43,31,16,.18); --shadow-soft:4px 4px 0 rgba(43,31,16,.14);
  --heading-transform:uppercase; --heading-spacing:.04em;
}
:root[data-skin="retro"] .card,
:root[data-skin="retro"] .chip,
:root[data-skin="retro"] .ingredients-box{border:var(--border-w) solid var(--ink)}

/* ═══════════════ 7. نيون — neon night ═══════════════ */
:root[data-skin="neon"]{
  --cream:#07080f; --cream-deep:#0d1020; --card-bg:#0f1322; --line:#26305a;
  --ink:#eef2ff; --ink-soft:#a9b4dd; --gold:#41e0d0; --gold-bright:#7bf5e8; --gold-dim:#1d5f5a;
  --foot-bg:#05060c; --foot-ink:#9fb0e0;
  --radius:14px; --card-lift:-6px;
  --shadow:0 0 0 1px rgba(65,224,208,.3), 0 20px 50px -22px rgba(65,224,208,.45);
  --shadow-soft:0 0 0 1px rgba(65,224,208,.22), 0 10px 28px -16px rgba(65,224,208,.35);
  --img-filter:saturate(1.15) contrast(1.05);
}
:root[data-skin="neon"] .card:hover{box-shadow:0 0 0 1px var(--gold), 0 24px 60px -20px rgba(65,224,208,.6)}

/* ═══════════════ 8. صلصال — soft clay (neumorphic) ═══════════════ */
:root[data-skin="clay"]{
  --cream:#eceef4; --cream-deep:#e3e6ef; --card-bg:#eef0f6; --line:#d6dae6;
  --ink:#232838; --ink-soft:#575e75; --gold:#6b5bd2; --gold-bright:#8878ef; --gold-dim:#c9c2f0;
  --foot-bg:#232838; --foot-ink:#ced4e6;
  --radius:26px; --radius-img:18px; --card-lift:-2px; --border-w:0px;
  --shadow:10px 10px 26px rgba(163,170,190,.65), -10px -10px 26px rgba(255,255,255,.9);
  --shadow-soft:6px 6px 16px rgba(163,170,190,.5), -6px -6px 16px rgba(255,255,255,.85);
}
:root[data-skin="clay"] .card,
:root[data-skin="clay"] .chip,
:root[data-skin="clay"] .ingredients-box{border:none}

/* ═══════════════ 9. لوح طباشير — chalkboard ═══════════════ */
:root[data-skin="chalk"]{
  --cream:#20282a; --cream-deep:#283134; --card-bg:#26302f; --line:#48585a;
  --ink:#f0f4ef; --ink-soft:#bcc8be; --gold:#f2c14e; --gold-bright:#ffd977; --gold-dim:#7a6428;
  --foot-bg:#161d1e; --foot-ink:#c9d4c9;
  --radius:8px; --border-w:2px; --card-lift:-4px;
  --shadow:0 18px 44px -22px rgba(0,0,0,.8); --shadow-soft:0 8px 22px -14px rgba(0,0,0,.7);
  --img-filter:saturate(.92);
}
:root[data-skin="chalk"] .card,
:root[data-skin="chalk"] .ingredients-box{border:2px dashed var(--line)}

/* ═══════════════ 10. بيسترو — red-and-white French bistro ═══════════════ */
:root[data-skin="bistro"]{
  --cream:#fbf6f2; --cream-deep:#f3e3dd; --card-bg:#ffffff; --line:#e2c6bd;
  --ink:#241413; --ink-soft:#5d423d; --gold:#a52125; --gold-bright:#c72c31; --gold-dim:#eebcbb;
  --foot-bg:#241413; --foot-ink:#eccfc9;
  --radius:10px; --radius-pill:8px; --border-w:1px; --card-lift:-6px;
  --shadow:0 18px 40px -22px rgba(90,20,20,.4); --shadow-soft:0 10px 24px -14px rgba(90,20,20,.28);
}
:root[data-skin="bistro"] header.site{border-bottom:3px solid var(--gold)}

/* ═══════════════ 11. أحادي — strict monochrome ═══════════════ */
:root[data-skin="mono"]{
  --cream:#ffffff; --cream-deep:#f2f2f2; --card-bg:#ffffff; --line:#111111;
  --ink:#000000; --ink-soft:#3f3f3f; --gold:#000000; --gold-bright:#333333; --gold-dim:#bdbdbd;
  --foot-bg:#000000; --foot-ink:#e8e8e8;
  --radius:0px; --radius-pill:0px; --border-w:1.5px; --card-lift:0px;
  --shadow:none; --shadow-soft:none;
  --img-filter:grayscale(1) contrast(1.1);
  --heading-transform:uppercase; --heading-spacing:.08em;
}
:root[data-skin="mono"] .card,
:root[data-skin="mono"] .chip,
:root[data-skin="mono"] .ingredients-box{border:var(--border-w) solid var(--line)}
:root[data-skin="mono"] .card:hover .card-img img{filter:grayscale(0)}

/* ═══════════════ 12. كاكاو — warm cocoa ═══════════════ */
:root[data-skin="cocoa"]{
  --cream:#f6efe6; --cream-deep:#ebdfd0; --card-bg:#fffaf3; --line:#ddc7ae;
  --ink:#33200f; --ink-soft:#6b4b2e; --gold:#8a4b1e; --gold-bright:#a95f2a; --gold-dim:#dcb894;
  --foot-bg:#2a1a0c; --foot-ink:#e5cdb2;
  --radius:16px; --card-lift:-7px;
  --shadow:0 20px 44px -22px rgba(70,40,15,.4); --shadow-soft:0 10px 26px -16px rgba(70,40,15,.3);
}

/* ═══════════════ 13. ربيعي — spring garden ═══════════════ */
:root[data-skin="spring"]{
  --cream:#f3f8f0; --cream-deep:#e6f0e2; --card-bg:#ffffff; --line:#cfe0c8;
  --ink:#1c2b1a; --ink-soft:#48603f; --gold:#3f7a34; --gold-bright:#4f9741; --gold-dim:#bcdcb4;
  --foot-bg:#1c2b1a; --foot-ink:#d5e6cf;
  --radius:20px; --radius-img:14px; --card-lift:-8px;
  --shadow:0 20px 44px -22px rgba(30,60,25,.32); --shadow-soft:0 10px 26px -16px rgba(30,60,25,.22);
}

/* ═══════════════ 14. حبر أزرق — cool blue ink ═══════════════ */
:root[data-skin="ink"]{
  --cream:#f4f6fb; --cream-deep:#e7ecf6; --card-bg:#ffffff; --line:#d2dbeb;
  --ink:#101a2e; --ink-soft:#41506d; --gold:#1d4ed8; --gold-bright:#3b6ff0; --gold-dim:#bcd0f7;
  --foot-bg:#101a2e; --foot-ink:#ccd8ee;
  --radius:12px; --radius-pill:10px; --card-lift:-5px;
  --shadow:0 18px 40px -22px rgba(16,26,46,.35); --shadow-soft:0 10px 24px -15px rgba(16,26,46,.25);
}

/* ═══════════════ FONT AXIS ═══════════════
   The picker injects the Google Fonts <link> the first time a pairing is chosen. */
:root[data-font="cairo"]{ --font-display:'Cairo',sans-serif; --font-body:'Cairo',sans-serif; }
:root[data-font="amiri"]{ --font-display:'Amiri',serif; --font-body:'Amiri',serif; }
:root[data-font="reem"]{ --font-display:'Reem Kufi',sans-serif; --font-body:'Tajawal',sans-serif; }
:root[data-font="mono"]{ --font-display:'IBM Plex Mono',monospace; --font-body:'IBM Plex Mono',monospace; --heading-spacing:0; }
:root[data-font="lora"]{ --font-display:'Lora',serif; --font-body:'Lora',serif; }
:root[data-font] body,
:root[data-font] .nav-search input,
:root[data-font] .lang-btn,
:root[data-font] .chip,
:root[data-font] button{font-family:var(--font-body)}
:root[data-font] h1,:root[data-font] h2,:root[data-font] h3,:root[data-font] .logo{font-family:var(--font-display)}

/* ═══════════════ LAYOUT AXIS ═══════════════ */

/* أ) قوائم طولية — one full-width row per recipe, small thumbnail */
:root[data-layout="list"] .grid{grid-template-columns:1fr;gap:14px}
:root[data-layout="list"] .card{display:grid;grid-template-columns:132px 1fr;align-items:stretch}
:root[data-layout="list"] .card-img{aspect-ratio:1/1}
:root[data-layout="list"] .card-body{padding:16px 20px}
:root[data-layout="list"] .card-body h3{font-size:19px}
:root[data-layout="list"] .card:hover{transform:none;box-shadow:var(--shadow)}
@media(max-width:520px){
  :root[data-layout="list"] .card{grid-template-columns:96px 1fr}
  :root[data-layout="list"] .card-body{padding:12px 14px}
}

/* ب) مجلة — two big editorial columns */
:root[data-layout="magazine"] .grid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:36px}
:root[data-layout="magazine"] .card-img{aspect-ratio:16/10}
:root[data-layout="magazine"] .card-body{padding:26px 28px 30px}
:root[data-layout="magazine"] .card-body h3{font-size:28px}
:root[data-layout="magazine"] .card-body p{-webkit-line-clamp:3;font-size:15px}

/* ج) مضغوط — as many as fit, minimal chrome */
:root[data-layout="compact"] .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
:root[data-layout="compact"] .card-body{padding:12px 14px 16px}
:root[data-layout="compact"] .card-body h3{font-size:16px}
:root[data-layout="compact"] .card-body p,
:root[data-layout="compact"] .card-meta{display:none}

/* د) نص فقط — no photos at all: fastest, lightest, kindest to slow connections */
:root[data-layout="text"] .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
:root[data-layout="text"] .card-img{display:none}
:root[data-layout="text"] .card{box-shadow:none;border:1px solid var(--line)}
:root[data-layout="text"] .card:hover{transform:none;background:var(--cream-deep)}
:root[data-layout="text"] .card-body{padding:14px 16px}
:root[data-layout="text"] .recipe-hero{display:none}
:root[data-layout="text"] .related .card-img{display:none}

/* التنظيم يمسّ صفحة الوصفة كمان: عمود واحد بدل عمودين */
:root[data-layout="list"] .recipe-body,
:root[data-layout="compact"] .recipe-body,
:root[data-layout="text"] .recipe-body{grid-template-columns:1fr;gap:34px}
:root[data-layout="list"] .ingredients-box,
:root[data-layout="compact"] .ingredients-box,
:root[data-layout="text"] .ingredients-box{position:static}

/* ═══════════════ منتقي الأنماط — the picker itself ═══════════════ */
.skin-fab{
  position:fixed; inset-inline-end:18px; bottom:18px; z-index:200;
  width:52px; height:52px; border-radius:999px; border:1px solid var(--line);
  background:var(--card-bg); color:var(--ink); font-size:22px; line-height:1;
  cursor:pointer; box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
}
.skin-fab:hover{border-color:var(--gold)}
.skin-panel{
  position:fixed; inset-inline-end:18px; bottom:80px; z-index:201;
  width:min(360px,calc(100vw - 36px)); max-height:min(72vh,620px); overflow-y:auto;
  background:var(--card-bg); color:var(--ink);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:18px 18px 22px;
}
.skin-panel h3{font-size:15px; margin:0 0 4px}
.skin-panel .skin-hint{font-size:12.5px; color:var(--ink-soft); margin-bottom:14px}
.skin-panel h4{
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  margin:16px 0 8px; font-family:inherit;
}
.skin-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.skin-opt{
  border:1.5px solid var(--line); background:var(--cream); color:var(--ink);
  border-radius:10px; padding:7px 8px 8px; cursor:pointer; text-align:start;
  font-size:12px; font-weight:600; line-height:1.35; font-family:inherit;
}
.skin-opt:hover{border-color:var(--gold)}
.skin-opt[aria-pressed="true"]{border-color:var(--gold); box-shadow:inset 0 0 0 1.5px var(--gold)}
.skin-sw{display:block; height:24px; border-radius:6px; margin-bottom:6px; border:1px solid rgba(0,0,0,.14)}
.skin-reset{
  margin-top:18px; width:100%; padding:10px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--cream-deep); color:var(--ink);
  font-weight:600; font-size:13px; font-family:inherit;
}
.skin-close{position:absolute; inset-inline-end:12px; top:10px; background:none; border:none; cursor:pointer; font-size:20px; color:var(--ink-soft); line-height:1}
.skin-panel{position:fixed}
@media print{.skin-fab,.skin-panel{display:none !important}}