/* Loli Store design tokens. Components only ever use these variables. Brand: the Loli logo (hot pink tile, deep magenta
   star), as on the old lolistore.net theme (Themes/Loli/Content/css/tokens.css). */
:root {
  /* Brand. Deep magenta carries white text (5.4:1, AA); logo pink and blush are for large type and decoration only. */
  --c-primary: #cf0c5e;
  --c-primary-hover: #a8094b;
  --c-primary-active: #8c073e;
  --c-primary-contrast: #ffffff;
  --c-accent: #eb3274;
  --c-blush: #ff8fb5;
  --c-tint: #fdebf2;
  --c-tint-strong: #f9d0e0;
  --c-primary-border: #f4b6cd;
  /* Rules, strips and accents only: never under text (blush is 2.1:1 with white). */
  --gradient: linear-gradient(90deg, #cf0c5e 0%, #eb3274 55%, #ff8fb5 100%);
  --gradient-soft: linear-gradient(135deg, #fff5f9 0%, #fdebf2 60%, #f9d0e0 100%);

  /* Neutrals: ink warmed to pink, white cards on a cool canvas. */
  --c-bg: #ffffff;
  --c-canvas: #f3f8f8;
  --c-surface: #fcf6f8;
  --c-text: #24121a;
  --c-muted: #6b5a61;
  --c-border: #efe1e7;
  --c-danger: #d51f28;
  --c-success: #207d4c;

  /* Shape and depth. */
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 6px 20px rgba(207, 12, 94, 0.1);
  --shadow-lg: 0 14px 38px rgba(207, 12, 94, 0.16);
  --shadow-sm: 0 1px 2px rgba(36, 18, 26, 0.06), 0 2px 8px rgba(207, 12, 94, 0.05);

  /* One family for Arabic and Latin, so mixed product names set in one voice. Self-hosted below. */
  --font-store: "IBM Plex Sans Arabic";

  /* Product badges (spec 10 §37): top-right, because Loli's photos carry the logo top-left. In Arabic (RTL) that is the
     inline start; set --badge-start: auto and --badge-end: 0.5rem to move them to the other side. */
  --badge-start: 0.625rem;
  --badge-end: auto;
}
/* English (LTR): the same physical corner, top-right. */
html[dir="ltr"] {
  --badge-start: auto;
  --badge-end: 0.625rem;
}

/* IBM Plex Sans Arabic, from stores/loli/public/fonts. Split per script: the browser fetches only the files a page's
   characters need (unicode-range). swap: text paints at once in the system face, then swaps. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("/fonts/plex-arabic-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("/fonts/plex-arabic-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("/fonts/plex-arabic-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url("/fonts/plex-arabic-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("/fonts/plex-arabic-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("/fonts/plex-arabic-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("/fonts/plex-arabic-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url("/fonts/plex-arabic-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }