/* Creative style - デザイン・広告向け、大胆な色、アート感 */

/* Color variables */
@theme {
  --color-create-primary: oklch(0.65 0.25 330);
  --color-create-secondary: oklch(0.7 0.2 60);
  --color-create-accent: oklch(0.75 0.18 280);
}

/* Font settings - 個性的なタイポグラフィ */
body[data-style="creative"] {
  font-family: 'DM Sans', 'Noto Sans JP', ui-sans-serif, system-ui, sans-serif;
}

body[data-style="creative"] .font-display {
  font-family: 'Space Grotesk', 'Noto Sans JP', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Background - vibrant gradient */
body[data-style="creative"].bg-style {
  background-image:
    radial-gradient(ellipse 100% 80% at 0% 0%, oklch(0.65 0.25 330 / 0.08), transparent),
    radial-gradient(ellipse 80% 60% at 100% 100%, oklch(0.7 0.2 60 / 0.06), transparent),
    radial-gradient(ellipse 60% 40% at 50% 50%, oklch(0.75 0.18 280 / 0.04), transparent);
}

/* Form components - playful rounded */
body[data-style="creative"] .input,
body[data-style="creative"] .select,
body[data-style="creative"] .textarea,
body[data-style="creative"] .file-input {
  border-radius: 0.75rem;
  border-width: 2px;
  border-color: oklch(0.85 0.05 330);
}

body[data-style="creative"] .input:focus,
body[data-style="creative"] .select:focus,
body[data-style="creative"] .textarea:focus {
  border-color: var(--color-create-primary);
}

/* Checkbox styling */
body[data-style="creative"] .checkbox {
  background-color: transparent;
  border-color: oklch(0.7 0.1 330);
  border-radius: 0.25rem;
  border-width: 2px;
}

body[data-style="creative"] .checkbox:checked {
  background-color: var(--color-create-primary);
  border-color: var(--color-create-primary);
}

/* Card styling - bold shadow */
body[data-style="creative"] .card {
  border-radius: 1rem;
  box-shadow: 0 4px 20px oklch(0 0 0 / 0.1);
}

/* Button styling */
body[data-style="creative"] .btn-primary {
  background-color: var(--color-create-primary);
  border-color: var(--color-create-primary);
  border-radius: 9999px;
  font-weight: 600;
}