:root {
  --fourh-green: #339966;
  --fourh-white: #ffffff;
  --fourh-black: #000000;
  --fourh-sunflower: #fdc82f;
  --fourh-kale: #004438;
  --fourh-mint: #82c4b7;
  --fourh-sky: #c9e3dc;
  --fourh-tomato: #f54359;
  --fourh-cherry-blossom: #ebbda9;
  --fourh-stone: #e0ded8;

  --app-bg: var(--fourh-sky);
  --app-surface: var(--fourh-white);
  --app-surface-muted: color-mix(in srgb, var(--fourh-mint) 30%, var(--fourh-white));
  --app-border: color-mix(in srgb, var(--fourh-kale) 26%, var(--fourh-mint));
  --app-text: var(--fourh-kale);
  --app-text-muted: color-mix(in srgb, var(--fourh-kale) 72%, var(--fourh-black));

  --app-primary: var(--fourh-green);
  --app-primary-text: var(--fourh-white);
  --app-link: var(--fourh-green);
  --app-focus: var(--fourh-tomato);

  --app-danger-bg: color-mix(in srgb, var(--fourh-tomato) 18%, var(--fourh-white));
  --app-danger-text: var(--fourh-kale);
  --app-danger-border: var(--fourh-tomato);

  --app-success-bg: color-mix(in srgb, var(--fourh-mint) 42%, var(--fourh-white));
  --app-success-text: var(--fourh-kale);
  --app-success-border: var(--fourh-green);

  --app-warning-bg: color-mix(in srgb, var(--fourh-sunflower) 34%, var(--fourh-white));
  --app-warning-text: var(--fourh-kale);
  --app-warning-border: var(--fourh-sunflower);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --app-bg: var(--fourh-kale);
  --app-surface: color-mix(in srgb, var(--fourh-kale) 82%, var(--fourh-black));
  --app-surface-muted: color-mix(in srgb, var(--fourh-kale) 66%, var(--fourh-black));
  --app-border: var(--fourh-mint);
  --app-text: var(--fourh-white);
  --app-text-muted: var(--fourh-sky);

  --app-primary: var(--fourh-mint);
  --app-primary-text: var(--fourh-kale);
  --app-link: var(--fourh-sunflower);
  --app-focus: var(--fourh-sunflower);

  --app-danger-bg: color-mix(in srgb, var(--fourh-tomato) 55%, var(--fourh-kale));
  --app-danger-text: var(--fourh-white);
  --app-danger-border: color-mix(in srgb, var(--fourh-tomato) 64%, var(--fourh-white));

  --app-success-bg: color-mix(in srgb, var(--fourh-mint) 22%, var(--fourh-kale));
  --app-success-text: var(--fourh-white);
  --app-success-border: var(--fourh-mint);

  --app-warning-bg: color-mix(in srgb, var(--fourh-sunflower) 42%, var(--fourh-kale));
  --app-warning-text: var(--fourh-white);
  --app-warning-border: var(--fourh-sunflower);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --app-bg: var(--fourh-kale);
    --app-surface: color-mix(in srgb, var(--fourh-kale) 82%, var(--fourh-black));
    --app-surface-muted: color-mix(in srgb, var(--fourh-kale) 66%, var(--fourh-black));
    --app-border: var(--fourh-mint);
    --app-text: var(--fourh-white);
    --app-text-muted: var(--fourh-sky);

    --app-primary: var(--fourh-mint);
    --app-primary-text: var(--fourh-kale);
    --app-link: var(--fourh-sunflower);
    --app-focus: var(--fourh-sunflower);

    --app-danger-bg: color-mix(in srgb, var(--fourh-tomato) 55%, var(--fourh-kale));
    --app-danger-text: var(--fourh-white);
    --app-danger-border: color-mix(in srgb, var(--fourh-tomato) 64%, var(--fourh-white));

    --app-success-bg: color-mix(in srgb, var(--fourh-mint) 22%, var(--fourh-kale));
    --app-success-text: var(--fourh-white);
    --app-success-border: var(--fourh-mint);

    --app-warning-bg: color-mix(in srgb, var(--fourh-sunflower) 42%, var(--fourh-kale));
    --app-warning-text: var(--fourh-white);
    --app-warning-border: var(--fourh-sunflower);

    color-scheme: dark;
  }
}

body,
.bg-base-200 {
  background: radial-gradient(
    100% 70% at 0% 0%,
    color-mix(in srgb, var(--fourh-sky) 42%, transparent) 0%,
    transparent 55%
  ),
  radial-gradient(
    78% 58% at 100% 100%,
    color-mix(in srgb, var(--fourh-sunflower) 18%, transparent) 0%,
    transparent 60%
  ),
  var(--app-bg) !important;
  color: var(--app-text) !important;
}

.bg-base-100,
.modal-box,
.stats,
.card,
.input,
.textarea,
.select {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
}

.border,
.border-base-300,
.input,
.textarea,
.select,
.table :where(th, td) {
  border-color: var(--app-border) !important;
}

.text-base-content,
.text-base-content\/80,
.text-base-content\/70,
.text-base-content\/60,
.stat-title,
.label-text,
.label-text-alt {
  color: var(--app-text-muted) !important;
}

.stat-value,
h1,
h2,
h3,
h4,
.card-title,
th,
td,
label,
button,
p,
span,
input {
  color: var(--app-text);
}

a {
  color: var(--app-link);
}

a:hover {
  text-decoration: underline;
}

.hero {
  border: 1px solid var(--app-border);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--fourh-sky) 34%, var(--app-surface) 66%) 0%,
    var(--app-surface) 55%,
    color-mix(in srgb, var(--fourh-stone) 30%, var(--app-surface) 70%) 100%
  ) !important;
}

.btn-primary,
.badge-primary {
  border-color: var(--app-primary) !important;
  background-color: var(--app-primary) !important;
  color: var(--app-primary-text) !important;
}

.btn-primary:hover,
.badge-primary:hover {
  filter: brightness(0.92);
}

.badge-outline {
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

.radio-primary {
  --chkbg: var(--app-primary);
  --chkfg: var(--app-primary-text);
  border-color: var(--app-border) !important;
}

.alert-error {
  border-color: var(--app-danger-border) !important;
  background-color: var(--app-danger-bg) !important;
  color: var(--app-danger-text) !important;
}

.alert-success {
  border-color: var(--app-success-border) !important;
  background-color: var(--app-success-bg) !important;
  color: var(--app-success-text) !important;
}

.alert-warning {
  border-color: var(--app-warning-border) !important;
  background-color: var(--app-warning-bg) !important;
  color: var(--app-warning-text) !important;
}

.input::placeholder,
.textarea::placeholder {
  color: color-mix(in srgb, var(--app-text-muted) 70%, transparent);
}

*:focus-visible {
  outline: 3px solid var(--app-focus) !important;
  outline-offset: 2px;
}