/*
 * 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 System - works with Bulma's CSS custom properties */
:root {
  --bulma-scheme-h: 221;
  --bulma-scheme-s: 14%;
  --bulma-light-l: 96%;
  --bulma-dark-l: 4%;
}

/* Auto theme - respect system preference */
html[data-theme="auto"] {
  color-scheme: light dark;
}

/* Light theme */
html[data-theme="light"] {
  --bulma-scheme-main-l: var(--bulma-light-l);
  --bulma-scheme-main-bis-l: calc(var(--bulma-light-l) - 2%);
  --bulma-scheme-main-ter-l: calc(var(--bulma-light-l) - 4%);
  --bulma-text-l: var(--bulma-dark-l);
}

/* Dark theme */
html[data-theme="dark"] {
  --bulma-scheme-main-l: var(--bulma-dark-l);
  --bulma-scheme-main-bis-l: calc(var(--bulma-dark-l) + 2%);
  --bulma-scheme-main-ter-l: calc(var(--bulma-dark-l) + 4%);
  --bulma-text-l: var(--bulma-light-l);

  /* Override box shadows for dark theme */
  --bulma-shadow: 0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-dark-l), 0.1),
                  0 0px 0 1px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-dark-l), 0.02);
}

/* Auto theme respecting system preference */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bulma-scheme-main-l: var(--bulma-dark-l);
    --bulma-scheme-main-bis-l: calc(var(--bulma-dark-l) + 2%);
    --bulma-scheme-main-ter-l: calc(var(--bulma-dark-l) + 4%);
    --bulma-text-l: var(--bulma-light-l);

    --bulma-shadow: 0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-dark-l), 0.1),
                    0 0px 0 1px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-dark-l), 0.02);
  }
}

/* Custom result box styling that works with both themes */
.result-box {
  background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-scheme-main-l) + 3%));
  border: 1px solid hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-scheme-main-l) + 6%));
}

.result-box-warning {
  background: hsl(48, 100%, calc(var(--bulma-scheme-main-l) + 8%));
  border: 1px solid hsl(48, 100%, calc(var(--bulma-scheme-main-l) + 15%));
}

.info-box {
  background: hsl(204, 86%, calc(var(--bulma-scheme-main-l) + 8%));
  border: 1px solid hsl(204, 86%, calc(var(--bulma-scheme-main-l) + 15%));
}

.warning-box {
  background: hsl(48, 100%, calc(var(--bulma-scheme-main-l) + 8%));
  border: 1px solid hsl(48, 100%, calc(var(--bulma-scheme-main-l) + 15%));
}

/* Theme toggle button styling */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}