/* Modern style - SaaS/モダンアプリ向け、柔らかいグラデーション */

/* Color variables */
@theme {
  --color-app-ember: oklch(0.65 0.18 30);
  --color-app-spruce: oklch(0.45 0.12 160);
  --color-app-sky: oklch(0.7 0.15 230);
}

/* Font settings */
body[data-style="modern"] {
  font-family: 'Manrope', 'Noto Sans JP', ui-sans-serif, system-ui, sans-serif;
}

body[data-style="modern"] .font-display {
  font-family: 'Fraunces', 'Noto Sans JP', ui-serif, Georgia, serif;
}

/* Background gradient effect */
body[data-style="modern"].bg-style {
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 40%, oklch(0.7 0.15 230 / 0.15), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, oklch(0.65 0.18 30 / 0.1), transparent),
    radial-gradient(ellipse 50% 30% at 50% 80%, oklch(0.45 0.12 160 / 0.08), transparent);
}

/* Form components with rounded corners */
body[data-style="modern"] .input,
body[data-style="modern"] .select,
body[data-style="modern"] .textarea,
body[data-style="modern"] .file-input {
  border-radius: 0.5rem;
}

/* Checkbox styling */
body[data-style="modern"] .checkbox {
  background-color: transparent;
  border-color: oklch(0.7 0 0);
}

body[data-style="modern"] .checkbox:checked {
  background-color: var(--color-app-spruce);
  border-color: var(--color-app-spruce);
}