/* ══════════════════════════════════════════════════════════════
   Sweetlab design tokens
   The six official brand colors are defined ONCE here. Every other
   color in the site is derived from them (color-mix) or is one of them.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Amiri';src:url(../assets/fonts/Amiri-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Amiri';src:url(../assets/fonts/Amiri-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Tajawal';src:url(../assets/fonts/Tajawal-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Tajawal';src:url(../assets/fonts/Tajawal-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Tajawal';src:url(../assets/fonts/Tajawal-Bold.woff2) format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:'Playpen Sans Arabic';src:url(../assets/fonts/PlaypenSansArabic-Variable.woff2) format('woff2');font-weight:100 800;font-display:swap}

:root{
  /* palette (official) */
  --sl-brown:#6E351F;      /* بني داكن   */
  --sl-ochre:#AF680B;      /* عنبري      */
  --sl-terracotta:#A75422; /* تيراكوتا   */
  --sl-olive:#8F7C34;      /* زيتوني     */
  --sl-sand:#E7C47B;       /* عسلي فاتح  */
  --sl-cream:#FFEDD2;      /* كريمي دافئ */

  /* derived tints (only mixes of the six) */
  --cream-2:color-mix(in srgb,var(--sl-sand) 26%,var(--sl-cream));
  --brown-soft:color-mix(in srgb,var(--sl-brown) 74%,var(--sl-cream));
  --line-soft:color-mix(in srgb,var(--sl-brown) 22%,var(--sl-cream));

  /* type */
  --font-display:'Amiri','Tajawal',serif;
  --font-ui:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-note:'Playpen Sans Arabic','Tajawal',sans-serif;

  /* shape + rhythm */
  --r-lg:22px; --r-md:16px; --r-sm:12px; --stroke:1.5px; --offset:5px;
  --gutter:clamp(18px,5vw,40px); --maxw:1120px; --section-y:clamp(56px,9vw,104px);

  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-1:160ms; --dur-2:320ms; --dur-3:720ms;

  /* kit theme variables (names kept from Sweetlab_Kit.html) */
  --sl-bg:var(--sl-cream); --sl-ink:var(--sl-brown); --sl-frame:var(--sl-olive);
  --sl-acc:var(--sl-ochre); --sl-f1:var(--sl-sand); --sl-f2:var(--sl-olive);
  --offset-color:var(--sl-sand);

  /* legacy variable names still referenced by the old css → mapped to the palette */
  --primary:var(--sl-brown); --honey:var(--sl-ochre); --cinnamon:var(--sl-terracotta);
  --olive:var(--sl-olive); --sand:var(--sl-sand); --cream:var(--sl-cream);
  --light-beige:var(--cream-2); --warm-white:var(--cream-2); --muted:var(--line-soft);
  --text:var(--sl-brown); --text-2:var(--brown-soft); --text-light:var(--brown-soft);
  --brown-dark:var(--sl-brown); --brown-mid:var(--sl-terracotta); --rose:var(--sl-ochre);
  --oat:var(--sl-sand); --green:var(--sl-olive); --accent:var(--sl-ochre); --white:var(--sl-cream);
  --status-cancelled:var(--sl-terracotta);
}

/* the six card themes from the kit (كريمي، بني داكن، تيراكوتا، عنبري، زيتوني، عسلي) */
.theme-cream{--sl-bg:var(--sl-cream);--sl-ink:var(--sl-brown);--sl-frame:var(--sl-olive);--sl-acc:var(--sl-ochre);--sl-f1:var(--sl-sand);--sl-f2:var(--sl-olive);--offset-color:var(--sl-sand)}
.theme-brown{--sl-bg:var(--sl-brown);--sl-ink:var(--sl-cream);--sl-frame:var(--sl-ochre);--sl-acc:var(--sl-sand);--sl-f1:var(--sl-sand);--sl-f2:var(--sl-ochre);--offset-color:var(--sl-ochre)}
.theme-terracotta{--sl-bg:var(--sl-terracotta);--sl-ink:var(--sl-cream);--sl-frame:var(--sl-sand);--sl-acc:var(--sl-sand);--sl-f1:var(--sl-sand);--sl-f2:var(--sl-brown);--offset-color:var(--sl-brown)}
.theme-ochre{--sl-bg:var(--sl-ochre);--sl-ink:var(--sl-cream);--sl-frame:var(--sl-cream);--sl-acc:var(--sl-sand);--sl-f1:var(--sl-sand);--sl-f2:var(--sl-brown);--offset-color:var(--sl-brown)}
.theme-olive{--sl-bg:var(--sl-olive);--sl-ink:var(--sl-cream);--sl-frame:var(--sl-sand);--sl-acc:var(--sl-sand);--sl-f1:var(--sl-sand);--sl-f2:var(--sl-brown);--offset-color:var(--sl-brown)}
.theme-sand{--sl-bg:var(--sl-sand);--sl-ink:var(--sl-brown);--sl-frame:var(--sl-terracotta);--sl-acc:var(--sl-terracotta);--sl-f1:var(--sl-cream);--sl-f2:var(--sl-olive);--offset-color:var(--sl-terracotta)}