/* Design tokens: style C, Eislab Pastel. */
:root {
  --base: #FBF6F1;
  --ink: #2B1610;
  --ink-2: #6B4A3E;
  --line: rgba(43, 22, 16, .14);
  --white: #FFFFFF;
  --pink: #FFC9C4;
  --pistachio: #D7E6B3;
  --ice: #BFE3F2;
  --lilac: #D9CCFF;
  --yellow: #F7E273;
  --peach: #FFD4B5;
  --mint: #C2EAD3;
  --rose: #F6C3DA;
  --caramel: #EACFA8;
  --red: #D1343A;
  --cta: #CB0C0C; /* the main action buttons (Full menu, Find your branch, Add +, Send…) */
  --wa: #25D366;
  --wa-ink: #073B1F;

  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ku: "Vazirmatn", "Onest", Tahoma, sans-serif;
  --font-hand: "Caveat Brush", "Vazirmatn", "Comic Sans MS", cursive; /* short hand-written notes only */

  --gutter: clamp(16px, 4vw, 48px);
  --radius-xl: clamp(28px, 4vw, 64px);
  --radius-l: 24px;
  --radius-m: 16px;
  --header-h: 84px;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --item-shadow: drop-shadow(0 18px 22px rgba(60, 20, 10, .22));
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  /* Sticker style: a white die-cut margin and a soft lift off the paper. */
  --cut: rgba(43, 22, 16, .13);
  --lift: 0 0 0 1px var(--cut), 0 10px 18px -10px rgba(43, 22, 16, .45);
  --lift-hi: 0 0 0 1px var(--cut), 0 18px 28px -14px rgba(43, 22, 16, .5);
  /* Print grain on coloured surfaces only (cards, buttons, menu blocks); it scrolls with them. The page
     itself stays clean. grain-soft.png is assets/img/brand/grain.png at 10% strength. */
  --speckle: url("../img/brand/grain-soft.png?v=3");
  --speckle-soft: url("../img/brand/grain-soft.png?v=3");
  --paper-grain: none;
  color-scheme: light;
}

/* Every category keeps its colour everywhere: home section, menu block, tab and card tint. */
[data-color="pink"] { --tint: var(--pink); --tint-soft: #FFE6E3; }
[data-color="pistachio"] { --tint: var(--pistachio); --tint-soft: #EEF5DC; }
[data-color="ice"] { --tint: var(--ice); --tint-soft: #E4F4FB; }
[data-color="lilac"] { --tint: var(--lilac); --tint-soft: #EFEAFF; }
[data-color="yellow"] { --tint: var(--yellow); --tint-soft: #FCF5CC; }
[data-color="peach"] { --tint: var(--peach); --tint-soft: #FFEDE0; }
[data-color="mint"] { --tint: var(--mint); --tint-soft: #E5F6EC; }
[data-color="rose"] { --tint: var(--rose); --tint-soft: #FCE6F0; }
[data-color="caramel"] { --tint: var(--caramel); --tint-soft: #F7ECDC; }