/* ==========================================================================
   THEME TOKENS  -  edit this file to re-brand the storefront.
   styles.css reads these variables for colour, type and radius.
   Change the Google Fonts <link> in index.html when you change a font family.
   ========================================================================== */
:root{
  /* Colour: surfaces (darkest to lightest), lines, text */
  color-scheme:dark;
  --bg:#0b1213; --bg2:#101a1b; --surface:#152123; --surface2:#1c2c2f; --line:#26383b; --line2:#33494c;
  --text:#efeadf; --muted:#93a4a2; --accent:#e2a93b; --accent-ink:#1c1405; --accent-soft:rgba(226,169,59,.14);
  --good:#5cc79a; --bad:#e8705f; --sage:#8fb39c;
  --f-display:"Instrument Serif","El Messiri",Georgia,serif;
  --f-body:"Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;
  --r:14px;
}
html[dir="rtl"]{--f-display:"El Messiri","Instrument Serif",Georgia,serif;--f-body:"IBM Plex Sans Arabic","Manrope",system-ui,sans-serif}

/* Accent quick-swaps (copy the values above to try another accent):
     Copper   --accent:#e07a4f;  --accent-ink:#1f0d05;
     Emerald  --accent:#3fbf8a;  --accent-ink:#04150d;
     Rose     --accent:#e6708f;  --accent-ink:#1f0610;
   This is a dark design. For a light theme, also revisit the few translucent
   header/overlay colours in styles.css that assume a dark ground. */