/* ==========================================================================
   Roleo brand: colours, fonts and basic sizes, taken from the client's site
   --------------------------------------------------------------------------
   Source:    https://roleomassager.com/ (Shopify theme settings on the homepage)
   Extracted: 2026-09-29
   Dark mode: none on the source site, so this page is light only.
   Keep this file to the values below. Layout lives in fact-sheet.css.
   Each value notes the source setting it came from, so a later check can
   compare against the live site and flag changes.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");

:root {
  color-scheme: light;

  /* ---- Colours ---- */
  --paper:         #fafafa;  /* theme stylesheet light grey */
  --sheet:         #ffffff;  /* --body-bg-color */
  --ink:           #282727;  /* --body-text-color */
  --ink-soft:      #686868;  /* --header-top-link-color */
  --rule:          #ecefef;  /* --header-border-color */
  --accent:        #107fa8;  /* --content-link-color */
  --callout:       #efefef;  /* theme stylesheet panel grey */
  --header-bg:     #ffffff;  /* --header-bg-color */
  --header-ink:    #282827;  /* --nav-text-color */
  --header-border: #ecefef;  /* --header-border-color */
  --footer-bg:     #282727;  /* --footer-bg-color */
  --footer-ink:    #ffffff;  /* --footer-text-color */

  /* ---- Fonts ---- */
  --font-body:     Lato, sans-serif;  /* --body-font */
  --font-head:     Lato, sans-serif;  /* --heading-font */
  --font-label:    Lato, sans-serif;
  --head-weight:   700;               /* --body-text-bolder (site headings are 400 at small sizes) */
  --nav-weight:    900;               /* --nav-text-weight */
  --nav-case:      uppercase;         /* --nav-text-transform */

  /* ---- Basic sizes ---- */
  --text:          1rem;              /* --body-text-size: 16px */
}