/* جاهز — design system (Figma file 4TRuckJsXN7xavEEPF8lw7, page 1 "Foundations" + the sticker language of page 10). */
:root {
  --bg-canvas: #faf7f2;
  --bg-surface: #ffffff;
  --bg-subtle: #f2eee8;
  --bg-inverse: #1f1b18;
  --border-default: #e6e0d9;
  --border-strong: #cfc7bf;
  --text-primary: #1f1b18;
  --text-secondary: #48413b;
  --text-muted: #6f665e;
  --text-inverse: #ffffff;
  --brand-accent: #f5b700;
  --brand-accent-subtle: #fff3cc;
  --text-on-accent: #14110f;
  --action-primary: #1f1b18;
  --action-on-primary: #ffffff;
  --focus-ring: #f5b700;
  --status-preparing-bg: #fff3cc;
  --status-preparing-fg: #7a5800;
  --status-ready-bg: #ddf5e7;
  --status-ready-fg: #0e6b3d;
  --status-ready-solid: #12804a;
  --status-danger-bg: #fbe3e0;
  --status-danger-fg: #c8362b;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px;

  /* sticker language: ink outlines and hard offset shadows */
  --ink: #1f1b18;
  --sticker: 6px 6px 0 var(--ink);

  --font: 'Readex Pro', system-ui, sans-serif;
  --font-display: 'Lalezar', 'Readex Pro', sans-serif;
}
:root[data-theme="dark"] {
  --bg-canvas: #14110f;
  --bg-surface: #1f1b18;
  --bg-subtle: #2e2925;
  --bg-inverse: #faf7f2;
  --border-default: #48413b;
  --border-strong: #6f665e;
  --text-primary: #faf7f2;
  --text-secondary: #cfc7bf;
  --text-muted: #a39a92;
  --text-inverse: #14110f;
  --brand-accent: #ffc933;
  --brand-accent-subtle: #3a2e08;
  --text-on-accent: #14110f;
  --action-primary: #ffc933;
  --action-on-primary: #14110f;
  --focus-ring: #ffc933;
  --status-preparing-bg: #3a2e08;
  --status-preparing-fg: #ffc933;
  --status-ready-bg: #0b3b23;
  --status-ready-fg: #4ed38a;
  --status-ready-solid: #12804a;
  --status-danger-bg: #3d1512;
  --status-danger-fg: #f27a70;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font: 400 16px/24px var(--font);
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
img { display: block; }

/* Icons: the Figma icon set as a sprite (/img/icons.svg), stroke follows the text color. */
.i { width: 20px; height: 20px; flex: none; }

/* Sticker text: white Lalezar with a solid ink copy offset down-right (set --o per size). */
.stk {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  color: #fff;
  text-shadow: var(--o, 3px) var(--o, 3px) 0 var(--ink);
  white-space: nowrap;
}

/* Logo: "جاهز" sticker — saffron with an ink copy (white on dark), tilted 6°, spark at the top. */
.logo {
  --c: #1f1b18; /* Jahez's own mark keeps its colours on themed shop screens */
  position: relative;
  display: inline-block;
  font: 400 var(--logo-size, 34px)/1 'Lalezar', 'Readex Pro', sans-serif;
  color: #f5b700;
  text-shadow: .07em .07em 0 var(--c);
  transform: rotate(-6deg);
  padding: .16em .3em .1em .25em;
  text-decoration: none;
  white-space: nowrap;
}
.logo::after {
  content: "";
  position: absolute;
  top: .02em;
  right: .12em;
  width: .42em;
  height: .42em;
  background: url(/img/fig/logo-spark-onlight.svg) center / contain no-repeat;
  transform: rotate(20deg);
}
.logo.on-dark { --c: #fff; }
.logo.on-dark::after { background-image: url(/img/fig/logo-spark-ondark.svg); }

/* Dark pill that carries the logo on saffron screens (tablet). */
.logo-pill { display: inline-flex; align-items: center; background: #1f1b18; border-radius: var(--radius-full); padding: 2px 14px; }

/* Shop pill: white, ink outline, hard shadow; avatar shows the shop logo or its initial on the brand color. */
.shop-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: var(--radius-full);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 6px 6px 14px;
  font: 600 14px/1.45 var(--font);
  white-space: nowrap;
}
.shop-pill .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--brand, #0f5257); color: #fff;
  font: 700 15px/1 var(--font);
}
.shop-pill .avatar img { width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* Big sticker buttons (customer & tablet screens). */
.sbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 64px; border-radius: 20px; border: 0;
  font: 400 28px/1.05 var(--font-display);
  cursor: pointer; text-decoration: none;
  transition: transform .06s;
}
.sbtn:active { transform: translate(2px, 2px); }
.sbtn .i { width: 26px; height: 26px; }
.sbtn.dark { background: var(--ink); color: var(--brand-accent); box-shadow: 5px 5px 0 #fff; }
.sbtn.dark.acc-shadow { box-shadow: 5px 5px 0 var(--brand-accent); }
.sbtn.white { background: #fff; color: var(--ink); border: 3.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.sbtn.ghost { background: none; color: var(--ink); font: 600 16px/1.45 var(--font); height: 60px; }

/* Sticker card: white, thick ink border, hard shadow. */
.scard { background: #fff; color: var(--ink); border: 3.5px solid var(--ink); border-radius: 22px; box-shadow: var(--sticker); }

/* Shop logo shape (set by the platform owner): circle (default), rounded square, or the bare logo */
[data-logo-shape="square"] .shop-pill .avatar, [data-logo-shape="square"] .shop-av { border-radius: 22%; }
[data-logo-shape="none"] .shop-pill .avatar, [data-logo-shape="none"] .shop-av { background: transparent !important; border-radius: 0; }
[data-logo-shape="none"] .shop-pill .avatar img, [data-logo-shape="none"] .shop-av img { background: transparent; object-fit: contain; }