/* Ron’s branding. Shared layout lives in sbs-pkg runtime/service.css. */
@import url("service.css");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&family=Montserrat:wght@500;600;700&display=swap");

:root {
  color-scheme: light;
  --abyss: #292929;
  --deep: #323232;
  --sea: #707067;
  --teal: #cf2d2d;
  --teal-ink: #cf2d2d;
  --glow: #ffffff;
  --sand: transparent;
  --paper: #ffffff;
  --ink: #323232;
  --muted: #292929;
  --line: #000000;
  --orange: #cf2d2d;
  --radius: 6px;
  --display: "Lobster", "Brush Script MT", cursive;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --service-heading-font: "Montserrat", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --service-nav-font: "Barlow Condensed", "Arial Narrow", sans-serif;
  --red: #cf2d2d;
  --service-title-ink: #8b0000;
  /* ronsbarber.com's boxes: grey, a black edge and a stepped grey shadow */
  --box: rgba(112, 112, 103, 0.9);
  --box-shadow: #808080 1px 1px 0 0, #808080 3px 3px 0 0, #808080 5px 5px 0 0, #808080 7px 7px 0 0, #808080 9px 9px 0 0;
  --rule: rgba(255, 255, 255, 0.22);
  --gutter: clamp(12px, 3vw, 28px);
  --pad: clamp(20px, 3.2vw, 36px);
  --page: 1160px;
  --header: #ffffff;
  --header-solid: #ffffff;
  --header-ink: #000000;
  --header-current: var(--red);
  --header-btn: var(--red);
  --header-btn-ink: #ffffff;
  --service-hover: #b22626;
  --service-background:
    radial-gradient(circle at 95.013% 9.56706%, rgb(243, 167, 143) 0%, 20%, rgba(243, 167, 143, 0) 40%),
    radial-gradient(circle at 5.10579% 10.1725%, rgba(56, 74, 211, 0.99) 0%, 25%, rgba(56, 74, 211, 0) 50%),
    radial-gradient(circle at 5.30111% 89.1536%, rgb(237, 88, 41) 0%, 42%, rgba(237, 88, 41, 0) 70%),
    radial-gradient(circle at 95.3532% 90.7031%, rgb(128, 21, 232) 0%, 42%, rgba(128, 21, 232, 0) 70%),
    radial-gradient(circle at 48.9014% 49.5215%, rgb(255, 255, 255) 0%, 100%, rgba(255, 255, 255, 0) 100%);
  --shadow: var(--box-shadow);
}