/* =====================================================================
   BRAND THEME: the only stylesheet another store needs to change
   (plus the BRAND block in index.html). style.css uses only these names.
   Seylany values come from seylany.com and the black-and-gold Alba jar.
   ===================================================================== */

/* Cairo, Seylany's website font (SIL Open Font License, see fonts/OFL.txt). It also covers Arabic. */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/cairo-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/cairo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: "Cairo", "Segoe UI", system-ui, sans-serif;

  /* Sidebar: the black Alba jar, with gold foil and the logo's leaf */
  --shell: #24160F;
  --shell-raise: #35241A;
  --shell-ink: #F4ECDD;
  --shell-muted: #BCA88F;
  --foil: #C8A35F;
  --mark: #86B05E;

  /* Page */
  --ink: #4F2D21;          /* Seylany brown, seylany.com's text colour */
  --muted: #7A6556;
  --ground: #F8FAFA;       /* seylany.com's background */
  --paper: #FFFFFF;
  --cream: #F4F2E5;        /* Seylany cream */
  --line: #E8E0D0;
  --line-strong: #CDBFA6;

  /* Cinnamon: only on things you can press */
  --action: #8A6142;
  --action-hover: #714E36;
  --action-ink: #FFFFFF;

  /* States */
  --ok: #3F6B35;   --ok-soft: #E7F0DF;
  --wait: #9A5B0D; --wait-soft: #F9EDD6;
  --stop: #A23B2A; --stop-soft: #F7E3DE;
  --on-color: #FFFFFF;     /* text and ticks on a coloured fill */

  /* Depth */
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--shell) 8%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--shell) 38%, transparent);
  --shadow-lift: 0 18px 40px -18px color-mix(in srgb, var(--shell) 70%, transparent);
  --shadow-panel: -30px 0 60px -30px color-mix(in srgb, var(--shell) 45%, transparent);
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, .25);

  /* WhatsApp's own colours for the message preview: not brand, leave as they are */
  --wa-wall: #EFEAE2;
  --wa-bubble: #D9FDD3;
  --wa-ink: #111B21;
  --wa-link: #027EB5;
  --wa-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}