/* Tsujikiri.css - Themeable, Compiler-Free CSS Framework */

:root {
  /* Default values for easy customization/theming */
  --background-color: #fcb;
  --default-border-radius: 2rem;

  /* Primary color */
  --primary-h: 290;
  --primary-s: 100%;
  --primary-l: 50%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --text-on-primary: white;

  /* Secondary color */
  --secondary-h: 220;
  --secondary-s: 100%;
  --secondary-l: 50%;
  --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
  --text-on-secondary: white;
}

/* Dark Mode */
[data-theme="dark"] {
  --background-color: #000;
  --primary-s: 60%;
  --primary-l: 70%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

body {
  background-color: var(--background-color);
}

/* Base Button */
.button {
  font-family: sans-serif;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: var(--default-border-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Themed Buttons */
.button.is-primary {
  background-color: var(--primary);
  color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 40%));
}
.button.is-primary:hover {
  background-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 30%));
  color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 15%));
}

.button.is-secondary {
  background-color: var(--secondary);
  color: var(--text-on-secondary);
  border: 1px solid var(--secondary-dark);
}
.button.is-secondary:hover {
  background-color: var(--secondary-dark);
  border-color: var(--secondary-dark);
}

/* Outline Variants */
.button.is-primary.is-outline {
  background-color: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.button.is-primary.is-outline:hover {
  background-color: var(--primary-light);
  color: var(--text-on-primary);
}

.button.is-secondary.is-outline {
  background-color: transparent;
  color: var(--secondary);
  border: 2px solid var(--secondary);
}
.button.is-secondary.is-outline:hover {
  background-color: var(--secondary-light);
  color: var(--text-on-secondary);
}

/* Utility Classes */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }

.text-on-primary { color: var(--text-on-primary); }
.text-on-secondary { color: var(--text-on-secondary); }

.border-primary { border: 1px solid var(--primary); }
.border-secondary { border: 1px solid var(--secondary); }

.rounded { border-radius: 0.5rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }

.has-text-centered { text-align: center; }
.is-flex { display: flex; align-items: center; }