/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.logo-font {
  font-family: "Rubik Distressed", system-ui, sans-serif;
}

body.bg-app-texture {
  min-height: 100vh;
  background-color: #c7bfb1;
  background-image:
    linear-gradient(180deg, rgba(255, 241, 211, 0.7), rgba(248, 222, 181, 0.45)),
    radial-gradient(circle at 20% 20%, rgba(223, 183, 132, 0.35), transparent 0%),
    radial-gradient(circle at 80% 0%, rgba(245, 204, 157, 0.28), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(236, 193, 144, 0.25), transparent 55%),
    url("data:image/svg+xml,%3Csvg width='180' height='240' viewBox='0 0 180 240' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='180' height='240' fill='%23fff9ef'/%3E%3Cg fill='%23b28b5c' opacity='0.22'%3E%3Cpath d='M20 40 v20 a6 6 0 1 0 4 -5 v-22 z' transform='scale(0.6) translate(10 20)'/%3E%3Cpath d='M60 140 v22 a6 6 0 1 0 4 -5 v-24 z' transform='scale(0.7)'/%3E%3Cpath d='M120 60 v18 a5 5 0 1 0 3 -4 v-20 z' transform='scale(0.55)'/%3E%3Cpath d='M20 200 v18 a5 5 0 1 0 3 -4 v-20 z' transform='scale(0.65)'/%3E%3Cpath d='M90 100 v30 a8 8 0 1 0 5 -7 v-32 z' transform='scale(0.9)' opacity='0.9'/%3E%3Cpath d='M150 180 v30 a8 8 0 1 0 5 -7 v-32 z' transform='scale(0.85)' opacity='0.8'/%3E%3Ccircle cx='130' cy='30' r='4' opacity='0.8'/%3E%3Ccircle cx='30' cy='120' r='3' opacity='0.6'/%3E%3Ccircle cx='150' cy='90' r='5' opacity='0.75'/%3E%3Ccircle cx='80' cy='200' r='4' opacity='0.8'/%3E%3Cpath d='M130 30 v-20' stroke='%23b28b5c' stroke-width='2' opacity='0.5'/%3E%3Cpath d='M150 90 v-26' stroke='%23b28b5c' stroke-width='2' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140% 140%, 120% 120%, 120% 120%, 140% 140%, 180px 240px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, normal, normal, multiply;
  background-attachment: fixed;
}