/*
 * 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.
 *
 * Note: Component classes with @apply directives are in app/assets/tailwind/application.css
 * and are compiled into the tailwind.css build file, which is loaded via stylesheet_link_tag "tailwind".
 */

:root {
  --bu: 4px;
  --space-1: calc(var(--bu) * 1);
  --space-2: calc(var(--bu) * 2);
  --space-3: calc(var(--bu) * 3);
  --space-4: calc(var(--bu) * 4);
  --space-6: calc(var(--bu) * 6);
  --space-8: calc(var(--bu) * 8);
  --space-12: calc(var(--bu) * 12);
  --space-16: calc(var(--bu) * 16);

  --container-booking: 480px;
  --container-admin-content: 1200px;
  --sidebar-width: 240px;
  --touch-target: 44px;
}

@media (min-width: 1024px) {
  :root {
    --bu: 6px;
    --sidebar-width: 240px;
  }
}

@media (min-width: 1440px) {
  :root {
    --sidebar-width: 280px;
    --container-admin-content: 1600px;
  }
}

.touch-target {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
}