/*
 * 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.
 */

/* Theme variables default to the orange preset; the ThemeHelper.theme_style_tag overrides them per-event. */
:root {
  --theme-primary: #ea580c;
  --theme-secondary: #f97316;
  --theme-bg: #f9fafb;
  --theme-text: #111827;
  --theme-accent: #ea580c;
  --theme-heading-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --theme-body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.theme-bg-primary { background-color: var(--theme-primary); }
.theme-bg-primary:hover { background-color: var(--theme-secondary); }
.theme-bg-secondary { background-color: var(--theme-secondary); }
.theme-text-primary { color: var(--theme-primary); }
.theme-text-primary:hover { color: var(--theme-secondary); }
.theme-text-accent { color: var(--theme-accent); }
.theme-border-primary { border-color: var(--theme-primary); }
.theme-bg-page { background-color: var(--theme-bg); }
.theme-text-body { color: var(--theme-text); }
.theme-font-heading { font-family: var(--theme-heading-font); }
.theme-font-body { font-family: var(--theme-body-font); }

.theme-gradient {
  background-image: linear-gradient(to bottom right, var(--theme-primary), var(--theme-secondary));
}

/* Button: filled, uses primary bg + hover to secondary */
.theme-button {
  background-color: var(--theme-primary);
  color: #ffffff;
}
.theme-button:hover {
  background-color: var(--theme-secondary);
}

/* Form focus rings tinted by theme */
.theme-focus:focus {
  border-color: var(--theme-primary);
  --tw-ring-color: var(--theme-primary);
}